Quantcast
Channel: LiveJournal Tutorials and Lessons
Viewing all articles
Browse latest Browse all 50

[generator] Additional Navigation Banner customizations

$
0
0

This tutorial explains how customize the header in any way CSS allows to via overrides. You should use it only in the Generator layout; otherwise this code may cause undesired behavior.

If you copy and paste all the code provided below to your overrides, it will turn the font color of your entire navigation bar to red; however, you can replace the code in orange to any other CSS, which will enable you to achieve other effects . For information on CSS rules, you can refer to another tutorial.

All codes you will get as a result should be added to your GLOBAL_HEAD override.

The following code will change behavior of the title of your journal, which is by default placed right below your Control Strip, to the left of the [entries|friends|calendar] links bar:

<style type="text/css">
<!--
tr.caption td.caption{
 color: red;
}
-->
</style>

The following code will change appearance of regular text in the [entries|friends|calendar] links bar, except for links. That is, if you are viewing your Recent Entries page, if will affect square brackets ([ and ]), the "entries" text, and the pipe symbol (|).

<style type="text/css">
<!--
tr.caption td.index{
 color: red;
}
-->
</style>

The following one will change appearance of the text which symbolizes the page current viewed (if you view your own Recent Entries page, this is the "entries" text). By default it is bold, and this code will remove boldness from it. If you wish it to stay bold, you can remove the purple line from this code.

<style type="text/css">
<!--
tr.caption td.index b{
font-weight: normal;color: red;
}
-->
</style>

And the following piece, the last one, will change appearance of links in the same bar:

<style type="text/css">
<!--
tr.caption td.index a{
 color: red;
}
-->
</style>

Only one override is permitted for each specific override block.If you are currently using a GLOBAL_HEAD override, then that override would need to be revised to reflect changes presented here or otherwise merged.

Variable References:
  • GLOBAL_HEAD
  • Additional References:
  • What are overrides? How do they work?
  • Merging your GLOBAL_HEAD overrides
  • CSS text and link alteration
  • Original tutorial by alkalynex and kamara. Later, rewritten by jemmix.


    Viewing all articles
    Browse latest Browse all 50

    Trending Articles