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:
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:
background: black;
}rather than:
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
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;
}
Code:
body { margin: 0px;
padding: 0px;
color: #33332e;
background: black;
font: normal 11px tahoma, geneva, verdana, sans-serif;
text-align: center;
}
Adrian