Linking to my CSS file

  • 1
  • Question
  • Updated 9 years ago
So i'm going to undertake the massive job of removing all the CSS from my pages and instead linking to a CSS file.

So i just wanted to know the correct code to link to the file.

This is going to be so good, any change i now make will be on all pages - carnt wait.

I also wanted to know if there was a way of linking to a html file so i could change all the page code of my menus at the same time.

Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Lee

Try using this code:

<link rel="stylesheet" type="text/css" href="resources/my-custom-html.html" />

You can replace the my-custom-html.html with the file for your .css as well.

I hope that helps! Happy building!! =)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Thansk Littleus,

The CSS links but the page code will not - am i doing something wrong?

Does the menu page code need somekind of opening / closing tag.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

I can link to it by using
<object data="resources/menu1.html"></object>

but it doesnt listen to the CSS file and shows as plain text.

-->
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hey Lee,

Linking to css can be done with this code:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

With html I don't really know. Here's one way though I think should work, I'm not to sure if it would work with Yola but it is the easiest way, you can try it out:

<!--#include file="http://www.whatever.com/page.html" -->

Hopefully this helps
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
thanks Connor,

The CSS is done - i have applied to half the site its the html i carnt get working...

what i was hoping to achieve was to have the menu code in a html file and link to it on the page. So if i wanted to change the pages or add another i could and it would apply site wide.

Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Another tip Lee, while you are at it....

If you are using div boxes anywhere, change the header's to images (even if they are just a plain colour) I've been busy for more than a week now redoing my whole site(s).

I even used images for my drop down menu's. Nope, they are not just flat colours, they are images. That way you can update your headers site wide.

Now with this new update and the Pro account the last part is a bit redundant.
Now, I too have to go back and redo my menu's (again!!) Better to do it now before I create any more pages though. It's like one step forward and two steps backwards for me at the moment ;-) http://helderberg.cc/
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
P.S. I can almost change my whole sites colour scheme in less than a day now. Background, banner, box headers, menu colours etc. Site wide...
That's what I'm aiming for.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I'm lost <!--

I want to add this code to a html file then link to it where i want the menu to appear - is this possible?

<div style="padding-top: 2px" class="ubercolortabs">
<ul>
<li class="selected"><a style="text-decoration: none;" href="http://hexham.info">&lt;span>Home&lt;...>
<li><a style="text-decoration: none;" href="http://hexham.info/business">&lt;span...>
<li><a style="text-decoration: none;" href="http://hexham.info/forum">&lt;span>Fo...>
<li><a style="text-decoration: none;" href="http://hexham.info/news">&lt;span>New...>
<li><a style="text-decoration: none;" href="http://hexham.info/contact">&lt;span>...>
</ul>
</div>
-->

Also does the div code need to be in the file or on the page.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I haven't done it before, but it must be possible.
I'm on my way to the office - I'll give it a try later
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
thanks Boomer - it would make adding a page or changing a page name a site wide 1 off task - I'm 420 pages now - please help :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Where's the rest of the code Lee?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
thats all the page code, the CSS which is linked using the above method is this:

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 12px Arial;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 0 0 0;
padding: 0;
text-transform: uppercase;
}

.ubercolortabs a{
float: left;
color: white;
background: #3b5998 url(roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 5px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}

.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #ff0000; /*background color of tabs onMouseover*/
color: #ffffff;
}

.ubercolortabs a:hover span{
background-color: transparent;
}

}
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}

----------------------------------------------------------------------------------
-->
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Looking at this again, I don't think it's going to be possible.
It's fine to upload the second portion to the file manager and change the style globaly, but the menu portion is going to have to be on each page.
There may be another way to do this. Let me play with it and see what I can come up with. I can only look at it this evening :-(
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
ok thanks man, i just tyr'd adding the CSS to the html file and calling by using the object tags - it shows on the page but with a huge space below it.