Gossamer Forum
Home : Products : Gossamer Links : Discussions :

GLinks 3.x HOWTO: Overriding styles in CSS using custom.css

Quote Reply
GLinks 3.x HOWTO: Overriding styles in CSS using custom.css
Since we've released the Gossamer Links 3.0 beta, I've seen a few custom.css files that various people have created. One of the things that I've noticed is that people are overriding more than they probably want to in their custom.css file.

Remember that the point of the custom.css file is to keep your custom changes separate allowing for easier upgrades. It allows us to make fixes and improvements to the core.css style sheet without overriding any changes that you've made. However, to make sure these changes make it through, you must make sure that you only override styles that you need changed.

For example, in core.css, the body's style is defined by:
Code:
body {
margin: 0px;
padding: 0px;
color: #33332e;
background: #ffffff;
font: normal 11px tahoma, geneva, verdana, sans-serif;
text-align: center;
}

If you wanted to change the background colour from white (#ffffff) to black then you would only add the following to your custom.css file:
Code:
body {
background: black;
}
rather than:
Code:
body {
margin: 0px;
padding: 0px;
color: #33332e;
background: black;
font: normal 11px tahoma, geneva, verdana, sans-serif;
text-align: center;
}
Why does this matter? Say, for example, we decide to change the margin to 5px in core.css, then you would not see this change, as you overrode it in your custom.css file when you copied it from the original style. By only overriding needed styles you not only keep your custom.css file shorter, but also make it easier to debug and manage upgrades.

Adrian

Last edited by:

brewt: Mar 17, 2005, 11:58 PM
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Hi,
I thought I'd just share this Smile. I have a case where I require a CSS override of the core CSS code but only on one specific page. If I add it to the general custom CSS file then I will see the effect site-wide whereas it only needs to be applied to one page.
A way around this is to add the code in the 'head' of the html. If I've understood correctly during my reading you can actually put it any where on the page it's just good practice I suppose to have it in the head area so that you or the following person coding the page can see/find it.
I may be wrong, but I feel that it's better to have one or two specific lines of overriding code like this inline rather than sending the browser for yet another custom file for such a small piece of code.
So for example you could put :

Code:
<style type="text/css">
<!-- p {font-weight: bolder; color: red; } -->
</style>

The comments are actually to stop old browsers from attempting to interpret the code (<!-- ... --> ) and creating an error...

John
Significant Media
Quote Reply
Re: [Jag] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
If you want to make template/page specific overrides then you should probably add it to your custom.css as well instead of editing the template (one less template modified, as well as keeping all your css in one place).

Each template's body id is assigned the template name (without the .html extension). So if you want to change the h2 heading in the category.html template, you can do this by:
Code:
#category h2 {
color: red;
font-weight: bold;
}
By making the rule more specific, it won't affect other templates. There are more examples of this in the "page specific" section at the end of core.css.

Adrian

Last edited by:

brewt: Mar 18, 2005, 4:10 PM
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Right I'll check that out.

Sounds very interesting for a recurrent template that requires a CSS mod.
I have two specific templates one which not many people will be viewing so I'll stick with the header code but I was a bit stuck for another recurrent one and this might be the perfect solution.

Thanks Adrian
Significant Media
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
But, and not only to play devil's advocate....

If someone changes their templates, and modifies them, maybe they are *counting* on that 5px change *NOT* to occur.

This is partly why I suggested the three-level .css format.

The "default", the "core" and the "custom", and adding in the _<%t%> to the end of the core and Custom templates names.

To clarify, the "default" is the one that goes with the entire site, and the _default_ configuration of the template set.
The "core_<%t%>.css" is the one that goes with the current release version of the template set the user is using.
The "custom_<%t%>.css" is the one that goes with the modifications to the site the user made.

Adding the _<%t%> is *not* redundant, since files with the same name, in different directories, are just looking to get overwritten by accident.

As you know, .css is *very* tempremental, and I would *not* automatically update or change the .css file that is being used by the site in any automated way at all. THat could take the site down, in strange ways, or completely.

This is not an easy issue, but you know .css can break browsers, so it becomes a very hairy/thorny issue.

If you really want to go this route, you need to add in that _default_ template, update that, and allow a user to see the 'diffs' between the new default template, and their current default template, and apply the changes one by one via an editor system. These can be really insidious.

The default template set is a good start, but it's not usable to set up your own site. Even just changing the logos can be a real issue.

There is a reason there are so many .css sites out there, all offering a different point of view but all cursing the implementation while trying to stay bright-eyed about the actual standard.

I hesitate to say that the _default_.css should be linked for templates loaded from the un-modified directory, and the "core_<%t%>.css" default.css loaded for all the modified files, but in actuality, it probably would save more aggrevation for people in the long run. If the files are un-modified GT files, then updating the .css probably won't break a site. If the files were modified, there might be previous-version things that shouldn't change.

( custom_<%t%>.css would be loaded in both cases)


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Yeah, it really does depend on how much you customise your css. If you're just changing things like colours and fonts, then you'll want to just make mimimal overrides. On the other hand, if you're going all out on the CSS then you'll probably want to create a new css file and not use the defaults at all. In the middle ground, if you override a fair amount of CSS, then you might want to make a backup of the original core.css before upgrading. That said, I think after the final is released, there hopefully won't be any huge changes to the CSS that would break any modified layouts.

About the third-level css - we might go with such a layout; I'm still thinking about how to lay things out so that we can easily implement different styles per template set, and whether or not to split out the actual 'core' css into a style sheet to put directly in the static directory rather than the luna directory. I'll think about it this weekend, and maybe throw out some ideas.

Adrian
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
What is the best method of overriding a style so that it is completely disappears? ie. Not used or hidden.

I do not want to display the crumb, and this works, but is probably overkill.

.crumb {
margin: 0px;
padding: 0px;
width: 0px;
height: 0px;
font-size: 0px;
background: transparent;
display: none;
visibility: hidden;
}


Also, what is best way to override the shadows if you do not want to use them at all?

I have basically duplicated the shadow styles, and "zeroed" everything out, which works, I just thought maybe there is a more general way to re-style elements to be hidden.

.shadowtop {
font-size: 1px;
background: transparent;
display: none;
height: 0
}

Thanks,
Chris
RGB World, Inc. - Software &amp; Web Development.
rgbworld.com
Quote Reply
Re: [rgbworld] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
In Reply To:
What is the best method of overriding a style so that it is completely disappears? ie. Not used or hidden.
Code:
.crumb {
display: none;
}
In Reply To:
Also, what is best way to override the shadows if you do not want to use them at all?
Code:
.shadowtop, .shadowbottom {
height: auto;
}
.shadowtop, .shadowbottom, .shadowleft, .shadowright {
background: none;
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
width: auto;
height: auto;
float: none;
background: none;
}

Adrian

Last edited by:

brewt: Mar 25, 2005, 7:04 PM
Quote Reply
Re: [rgbworld] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
RC release would call for equivalent amount of time spent on templates. I have stopped playing with beta and waiting for RC ... No point having to waste time on playing with templates only to find that same time has to be spent again

Thanks
HyTC
==================================
Mail Me If Contacting Privately Is That Necessary.
==================================
Quote Reply
Re: [HyperTherm] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
In Reply To:
RC release would call for equivalent amount of time spent on templates. I have stopped playing with beta and waiting for RC ... No point having to waste time on playing with templates only to find that same time has to be spent again

I am done with beta too. Although I spent VERY little time on the beta templates, I am tired or rewritting code. Kind of a bummer to have to sit here and just wait all weekend :-)

Chris
RGB World, Inc. - Software &amp; Web Development.
rgbworld.com
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Hi,

- I want to have my "logo.gif" being CENTERED horizontally and vertically, but not "top left". How can I achieve this in my custom "luna.css" ?
- Additionally I want to get rid of the "swirls.gif".
- Question: what is actually this and where is it used: "#logo" and "#logo h1, #logo a"


mentioned below is the "core.css" code:
*****************************

#logo {
width: 250px;
height: 80px;
background: transparent url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
}
#logo h1, #logo a {
margin: 0px;
width: 100%;
height: 100%;
}
#logo a {
text-decoration: none;
display: block;
}

*****************************


Please help.


Erich

Last edited by:

erichcyber: Jun 12, 2005, 2:25 PM
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Another question regarding the Navigation-buttons at the top of the page:

1)
actually I do not want to have the "Home"-button to be always activated (it looks activated because of the dark color).
When I click around in the navigation-bar, then I do not see in which section I am currently in, because it seems that I am always in "Home" as this button always looks dark.
So I want to have a dark button shown for the section (for example "New Links") where I am actually CURRENTLY in.


2)
what is the reason for this: "ul.secondarynav" ?


Please help.

Erich
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
please help:

how do I put my logo.gif in the center instead of left in CSS ?



Erich
Quote Reply
Re: [erichcyber] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
your questions:

re: centering,
I haven't found a reliably good way to do that. Maybe someone else has.

re: swirls

#header {
width: 100%;
background: transparent url(images/swirls.gif) bottom right no-repeat;
}

re: home button:
That's a more complicated one.
To do it properly, in addition to setting <body id="template_name"> they should have added <%set template_name = "template_name%> as well. Then, you could use the flag to set the high lights to the current category. There's no way for the HTML/template parser to read the "id" tag to act on it.

I had used a <%set HOME = 1%> in the version 2 templates, so that on the home page, I could have a different menu than on the sub pages. For instance, I wanted the "home" link to not appear on some sites, or to link to the *real* "home" page on others, while on the sub pages, I wanted the "home" link to link to the top of the Links program.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Hi Pugdog,

many thanks for your answer !

- why is it so difficult to center an image ?
- I hope that GT will change the navigation so that my users will see in which section they currently are.....


BTW: is it you who is the programmer of the "Claim Link plugin" ? I&#180;m interested in this.


Erich
Quote Reply
Re: [erichcyber] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
You can center it horizontally by using:
Code:
/* center it in ie5.5 */
#header {
text-align: center;
}
/* center it in other browsers */
#logo {
margin: 0px auto;
}

Adrian
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Hi Brewt,

many thanks for your help - the centering of the logo works great !


Another question:

I do not want to have the "right bar" on my "Home"-page (I do not want to have it on my index-page, but it should remane as it is on all other pages).

I just want to have the "left bar" (the table with the content of my categories and subcategories of my Yahoo-plugin including the shadow-images), to be horinzontally centered.
Just for information: I have changed my "wrapper"-width to 765px (if this makes any difference).


Please help.

Best regards,

Erich

Last edited by:

erichcyber: Jun 21, 2005, 11:35 AM
Quote Reply
Re: [erichcyber] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
The most current versions of the templates allow you to turn the shadow and sidebars on and off from within the luna.css file. You can specify specifically to affect either the #home page, or any other page, or just every page by not using the "id" modifier.

To have sidebars on the Home page, but not the other pages, the *best* way is to edit the home page, and change the <%include ..%>
to include_rightsidebar_home.html.

You can use the same logic for pages such as search, new/cool, and such. Leave the "default" to be include_rightsidebar.html. That way, to change the includes you edit one file for each page.

*now* if you want to use a default , just make the include_rightsidebar_new.html have one line <%include include_rightsidebar.html%> and any "custom" page that is not specifically defined will just use the default.

This works great a large number of sites I've set up so far.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Or you can just use CSS to show hide it. Since every page is id'ed, you can just use the css rules that hide the right sidebar (see the examples in luna.css), but just be more specific with the rules and do #home #ocwrapper { ... } instead of just #ocwrapper.

Adrian
Quote Reply
Re: [pugdog] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
 Pugdog,

I think it is better to use CSS in order to have no overrides on template-changes in case the GT-version changes - am I right ?

Last edited by:

erichcyber: Jun 21, 2005, 12:28 PM
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
brewt,

1)
could you please EXACTLY give me the CSS-code on how to hide the "right-side-bar" ONLY for the "home-template" and then how to horizontally center the "left-side-bar" within the page ?

2)
regarding the centering of the logo:
how do I VERTICALLY center the logo.gif in CSS ?


I know my questions are looking stupid, but this might also help others by using CSS within G-Links 3.0.2


Many thanks,

Erich
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Quote:
Each template's body id is assigned the template name (without the .html extension). So if you want to change the h2 heading in the category.html template, you can do this by:
Code:
#category h2 {
color: red;
font-weight: bold;
}
I'm running into some problems using this approach with list styling (particularly list-style-image).

For example, on the detailed pages I have list style rules for <ul> and <li> elements in the content section using the style rules as above (e.g. #detailed ul {etc.}). For some reason though the <ul> and <li> style for #leftsidebar and #navbar inherit the #detailed styles even though they have different styles set for them. This of course makes all the navigation links change on the detailed pages.

I'm not sure how the body style is inherited but I would have thought the styles set for the other ids would over-ride it? I am trying to make the custom.css file a bit more logical and I thought this would be the simple way to do it Frown.

<edit>Not sure why but I fixed this by using #detailed .class in the stylesheet - using #detailed ul.class didn't work for some reason.</edit>

Last edited by:

aus_dave: Oct 6, 2005, 11:40 PM
Quote Reply
Re: [aus_dave] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
With rules on things actual elements, you have to be careful not to make them too general - by that I mean applying to too much on the page. By putting a rule #detailed ul {}, it'll be applying to every ul on the detailed page and as you have noticed, it'll change the style on the menus as well. You'll want to localise the change more by being more specific in the rule. For example, to only style the ul elements in the content area in the detailed page, the rule should be #detailed #content ul { }.

Adrian
Quote Reply
Re: [brewt] GLinks 3.x HOWTO: Overriding styles in CSS using custom.css In reply to
Thanks Adrian, I worked that out eventually :).

Once you get your head around the best way to approach it the CSS-based template is a superior way to design IMHO.