Use/Insert Custom CSS

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Use/Insert Custom CSS

Post by Enupnion »

Hello. And please forgive the newbie question. :)

How do I insert and use custom CSS within a Web Builder 10 project? I have code for creating a moving star field background. I can easily insert this code into exported CSS and HTML, but I would rather add it within Web Builder if possible. That way, when I preview the page, I can see the effect on my design instead of having to wait until I publish and then add the code.

The code is pretty simple. In the HTML file between the body tags, I would insert the following code:

Code: Select all

<div id="space">
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
</div>


In the CSS file the page or site uses, I insert the following code:

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Orbitron:700);

/* Stars 
------------------------------------- */

#space, .stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: zoom 5s infinite;
  opacity: 0;
}

.stars:nth-child(1) {
  background-position: 50% 50%;
  animation-delay: 0s;
}
.stars:nth-child(2) {
  background-position: 20% 60%;
  animation-delay: 1s;
}
.stars:nth-child(3) {
  background-position: -20% -30%;
  animation-delay: 2s;
}
.stars:nth-child(4) {
  background-position: 40% -80%;
  animation-delay: 3s;
}
.stars:nth-child(5) {
  background-position: -20% 30%;
  animation-delay: 4s;
}

@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0.5);
    animation-timing-function: ease-in;
  } 
  85% {
    opacity: 1;
    transform: scale(2.8);
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}

/* Demo syles 
------------------------------------- */

body {
  background: #000;
  font-family: 'Orbitron', sans-serif;
}

h1 {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin: -1.5em -2.5em;
  width: 5em;
  color: #011;
  font-size: 5em;
  text-align: center;
  text-shadow: 0 0 3px #6cf;
}
h1:first-line {
  font-size: 200%;
}
I have the code. It works. The question again is, how can I put this into my Web Builder 10 project before publishing?

Thanks in advance.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo »

You can add custom code with the HTML object, Page HTML or in Object HTML:
http://wysiwygwebbuilder.com/add_html.html
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion »

support wrote:You can add custom code with the HTML object, Page HTML or in Object HTML:
http://wysiwygwebbuilder.com/add_html.html
Right. Thank you. But what about the CSS code?
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo »

You can add CSS code between the head tags of Page HTML.
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion »

support wrote:You can add CSS code between the head tags of Page HTML.
Excellent. And then will Web Builder spit this out as a separate CSS file? I am guessing it will.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo »

The CSS code will be added to the Page HTML or to ther external CSS file (whatever you have configured)
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion »

support wrote:You can add CSS code between the head tags of Page HTML.
Okay. I cannot get this to work. When I add the CSS code between the head tags and the HTML between the body tags and preview the page all I see is the CSS text displayed on the page.

Here is a link to what I get when I insert the code as you've instructed:

http://www.scifiphotoguys.com/mobile/
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo »

The syntax of your code is invalid.
CSS Styles should be between <style> tags.

Please note that I cannot assist you with programming related questions.
When adding custom code I assume that you know what you are doing.
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion »

Ugh! I feel like an idiot. I knew that. And I know that. All is working perfectly now. Thanks again. :)
cdasupport
 
 
Posts: 25
Joined: Wed Oct 22, 2014 8:23 am

Re: Use/Insert Custom CSS

Post by cdasupport »

Hi

Im trying to follow these instructions but seems confusing, one saying one thing but meaning another.

May I kindly ask for a screen shot that shows exactly where Im suppose to add my custom CSS pls, detailed instructions, hopefully one response to here will be enough
cdasupport
 
 
Posts: 25
Joined: Wed Oct 22, 2014 8:23 am

Re: Use/Insert Custom CSS

Post by cdasupport »

Hi, I actually worked it out after some rooting about lol
Picd : http://prntscr.com/gd6q2g
Post Reply