252
edits
FireBrick Custom CSS: Difference between revisions
m
→layout of figure
m (Layout of figure) |
|||
|
}
</syntaxhighlight>
[[File:Firebrick-css.png|frame|Custom colour header by using css]]
<hr style="clear:both;color:inherit;background-color:inherit;margin:0 0 -2em" />▼
Image of the resulting header, showing colour change:
▲<hr style="clear:both;color:inherit;background-color:inherit;margin:0 0 -2em" />
== Example - changing font size ==
The following example fragment of CSS greatly reduces the font sizes in use in the Firebrick's web pages:
<syntaxhighlight lang=css>
</syntaxhighlight>
At the time of writing, the shipping CSS in the Firebrick FB2500 was v1.45.001 Ximenes, and the standard <code>font-size:</code> value in use was keyword <code>small</code>.
This simple example has certain defects: The vertical layout of the text within the footer is slightly off, for one. The layout of the ‘Graphs’ page is quite a mess, so further work is needed.▼
To ''increase'' the text size, this example would require a rewrite and lots of testing trial and error. Unfortunately changing text sizes can have a lot of nasty knock-on effects on layout, which cascade out of control in ways that are hard to predict. Hacks such as the above are likely to fall apart if the base CSS changes or if other aspects of the design cause the layout to change. This is in part because this is an override on parts of the base CSS, so effectively a patch, and so has intimate dependencies on its precise content. Also there are dependencies between the (X)HTML and the CSS, so changes to the pages’ content or structure can possibly cause problems.
▲This simple example has certain defects: The vertical layout of the text within the footer is slightly off
Note that there is no space after the dot in <code>div.main</code> etc. This is essential; adding white space at this point would alter the meaning - see [https://www.w3.org/TR/CSS22/selector.html CSS selectors].▼
=== CSS debugging tips ===
▲Note that there is no space after the dot in <code>div.main</code> etc. This is essential; adding white space at this point would alter the meaning - see CSS selectors.
There are many powerful tools available for debugging CSS. When developing an ''override'' such as this, problems with the CSS [https://www.w3.org/TR/CSS22/cascade.html#specificity specificity rules] may mean that your property overrides do not take effect, as they do not ‘win’ over the specificity of the corresponding rules in the base CSS. Try copying a relevant base CSS selectors exactly, even if parts of the selector seem unnecessary. While this example was being put together, liberal use was initially made of the CSS <code>!important</code> qualifier and removed later on. Also, as a probe to see if changes were taking effect, text was temporarily set to an odd <code>color</code>, or borders were enabled with distinctive odd properties. This latter basic technique can be a used if advanced tools are not available.
=== Using CSS @media ===
| |||