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: 96
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Use/Insert Custom CSS

Post by Enupnion » Thu Oct 23, 2014 4:34 am

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: 19280
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo » Thu Oct 23, 2014 6:17 am

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: 96
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion » Thu Oct 23, 2014 6:29 am

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: 19280
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo » Thu Oct 23, 2014 6:32 am

You can add CSS code between the head tags of Page HTML.

User avatar
Enupnion
 
 
Posts: 96
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion » Thu Oct 23, 2014 6:59 am

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: 19280
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo » Thu Oct 23, 2014 9:16 am

The CSS code will be added to the Page HTML or to ther external CSS file (whatever you have configured)

User avatar
Enupnion
 
 
Posts: 96
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion » Fri Oct 24, 2014 10:07 am

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: 19280
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Use/Insert Custom CSS

Post by Pablo » Fri Oct 24, 2014 10:35 am

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: 96
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: Use/Insert Custom CSS

Post by Enupnion » Fri Oct 24, 2014 11:09 am

Ugh! I feel like an idiot. I knew that. And I know that. All is working perfectly now. Thanks again. :)

cdasupport
 
 
Posts: 89
Joined: Wed Oct 22, 2014 8:23 am

Re: Use/Insert Custom CSS

Post by cdasupport » Sat Aug 26, 2017 4:48 am

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: 89
Joined: Wed Oct 22, 2014 8:23 am

Re: Use/Insert Custom CSS

Post by cdasupport » Sat Aug 26, 2017 5:34 am

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

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 1 guest