CSS pecking order

Support for Fusion 11
artman
Posts: 38
Joined: Fri Sep 04, 2009 12:05 pm

CSS pecking order

Postby artman » Thu May 20, 2010 5:21 pm

I have a question.

What is the ranking order of the css files for a site?
What trumps what of these files?

fusion.css
mlr.css
multilayoutregionXtab_topX.css
Site.css
sitewide.css
style.css

The reason I ask is that I made a .menu class for links. The site.css has some of the .menu code in it but the sitewide.css has all the .menu code.

The hover and active do not work when the site is published, but work in preview. So it got me thinking that one must trump the other.

Along the same lines, is there a way to rename a site stylesheet without blowing up the entire site layout?

Thanks

User avatar
admin
Site Admin
Posts: 1303
Joined: Mon Oct 24, 2005 2:07 am
Location: Stuart, FL
Contact:

Re: CSS pecking order

Postby admin » Thu May 20, 2010 11:40 pm

I have a question.

What is the ranking order of the css files for a site?
What trumps what of these files?

fusion.css
mlr.css
multilayoutregionXtab_topX.css
Site.css
sitewide.css
style.css

The reason I ask is that I made a .menu class for links. The site.css has some of the .menu code in it but the sitewide.css has all the .menu code.

The hover and active do not work when the site is published, but work in preview. So it got me thinking that one must trump the other.

Along the same lines, is there a way to rename a site stylesheet without blowing up the entire site layout?

Thanks
Last loaded is the order of application. Look at the header of a published page.

Broadly speaking, the order is from widest to narrowest focus, with a page level style taking priority over all others.

Precedence only applies to same named elements within the applied CSS files, of course.

Admin Chuck

artman
Posts: 38
Joined: Fri Sep 04, 2009 12:05 pm

Re: CSS pecking order

Postby artman » Mon May 24, 2010 10:13 am

Chuck,

I understand what you are saying.

Here is the order from the header of my first page.

<LINK REL="STYLESHEET" TYPE="text/css" HREF="./fusion.css">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="./style.css">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="./site.css">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="./sitewide.css">

In this scenario, for any class items that are the same in site.css and sitewide.css, the items in sitewide will determine the look.

Below are my site.css and sitewide.css files.
I was going to attach them, but .css is not an allowed file extension.

menu and category are classes I made.

You will notice there is no .menu:hover in either file. Yet it does exist within NOF. And when I preview, hover over the text, it changes color.

I am thinking the solution is the remove the menu class from site.css.

Let me know what you think.


site.css

/* CSS definition file containing site wide stylesheets */

.menu:link {
color: rgb(255,255,255)
}

.Testimonial {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size: xx-small;
font-style: italic;
text-align: left;
border: 1pt solid rgb(51,102,204);
padding: 2pt 3pt
}

.menu:active {
color: rgb(163,129,69)
}

.menu_style {
font-size: 14px;
letter-spacing: 0px;
line-height: 15px;
text-align: left;
text-indent: 0px;
margin: 0px;
padding: 2px 0px;
border-left-style: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none
}

.menu:visited {
color: rgb(153,153,153)
}

.menu {
font-size: 13px;
color: rgb(255,255,255);
line-height: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none
}

.NavBarText {
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: rgb(0,0,0);
line-height: 10px;
font-weight: bold
}

.TextNavBar {


sitewide.css

.Testimonial {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size: xx-small;
font-style: italic;
text-align: left;
border: 1pt solid rgb(51,102,204);
padding: 2pt 3pt
}
.menu {
font-size: 13px;
color: rgb(0,0,0);
line-height: 18px;
margin: 0px, 0px, 0px, 0px ;
font-weight: normal;
font-style: normal;
text-decoration: none
}

.category {
font-size: small;
color: rgb(0,0,0);
line-height: 18px;
font-weight: bold;
font-style: normal;
text-decoration: none
}

.NavBarText {
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: rgb(0,0,0);
line-height: 10px;
font-weight: bold
}

.TextNavBar {
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
white-space : normal
}

.menu:link { color: rgb(0,153,255); font-variant: normal}
.menu:visited { color: rgb(153,153,153)}
.menu:active { color: rgb(163,129,69)}

.category:link { color: rgb(0,153,255); font-variant: normal}
.category:visited { color: rgb(153,153,153)}
.category:active { color: rgb(163,129,69)}


Return to “Fusion 11”

Who is online

Users browsing this forum: No registered users and 2 guests

cron