How Do I Add CSS To My Website ???

  • 2
  • Question
  • Updated 7 years ago
  • Answered
i would love to add css nav bar to my website the code is
#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;

but how do i ad this to my yola site :D
thanks ,
Darren
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
  • unsure

Posted 8 years ago

  • 2
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
Hey Darren!

Just drag-and-drop the HTML widget into your site. When the editor pops up insert the following:

<!--
#tabsC{
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
-->

This should now work. I'm not much of a CSS expert but this should just about do the trick.

Dill
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
Please not it took out these tags: < style type="text/css"> & < /style> (-with no spaces between the first tag and the command.)
The first tag goes at the very top of the script and the other straight at the bottom.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Dill!
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
doesnt work but thx for the answers,
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Darren

You can add the CSS code as Dill suggested.

You can upload also .css files. These are uploaded to the "Resource" folder of your site. However, your custom styles are not auto-loaded for you. You will need to add them with the HTML widget.

e.g.:

<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />

You manually add your files with the HTML editor. The advantage is that you can use the same stylesheet across multiple pages - edit the one file, and your changes reflect on all the pages. As such your files will be included after the default template files and will over-ride the default.

Please note that this is an option for advanced users and we will not be able to assist you if your CSS edits break your site. If you unsure of how to proceed, we recommend that you try this on a blank test site first before attempting it on a website which contains your valuable content.
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
doesnt work but thx for the answers,
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
doesnt work but thx for the answers,
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Darren,
The CSS only will not add the menu, you have to add html code too. Do you have that code?
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
yes its still not working comes up blank
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Darren

I'm sorry to hear that you're still having trouble getting this to work. Would you mind posting your site URL and the page so that we can take a look at your code? I'm sure that we will be able to get this working.
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
http://www.emporiumgames.yolasite.com , Thanks A Million , Sanja
Photo of TSHIRT

TSHIRT

  • 34 Posts
  • 0 Reply Likes
http://www.emporiumgames.yolasite.com , Thanks A Million , Sanja
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Darren

I am not able to see the code implemented on your site. Have you added it? If so, please let me know on which page you have added this code. Thanks.
Photo of narayana.karthavya

narayana.karthavya

  • 1 Post
  • 0 Reply Likes
how to write css in html page
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello narayana.karthavya,
Here is a link to a tutorial with more information on how to do this: How to edit your site's CSS.

Kind Regards,
Emmy