InsaneJournal HowTo - Merging GLOBAL_HEAD Overrides [entries|archive|friends|userinfo]
InsaneJournal Tutorials

[ website | Tutorials ]
[ userinfo | insanejournal userinfo ]
[ archive | journal archive ]

Merging GLOBAL_HEAD Overrides [Jul. 23rd, 2003|10:26 am]
Previous Entry Add to Memories Tell a Friend Next Entry
howto
[ex_v722]
A vast majority of the customization now possible via free accounts is accomplished through the use of a GLOBAL_HEAD override. However, only one GLOBAL_HEAD block is allowed at a time in your Style Overrides box (http://www.insanejournal.com/modify.bml). (If you would like to learn more about overrides and how they work, you may wish to read FAQ #100.)

You must merge them if you want to combine effects that both use a GLOBAL_HEAD. This can be easy if you are using HTML tags such as <title>, <base>, <style>, <link>, or <meta>: you would need to move everything between a single set of GLOBAL_HEAD markers as shown below.

Example: If you would like to use both a <title> change and a favicon override in your journal you would need to merge both overrides into a single GLOBAL_HEAD override:


GLOBAL_HEAD<=
<title>My Customized InsaneJournal!</title>
<LINK REL="SHORTCUT ICON" HREF="http://www.some_host_site.com/my_cool_icon.ico" />
<=GLOBAL_HEAD


Merging overrides that make use of CSS is slightly more complicated and requires more detailed merging techniques. When dealing with overrides containing CSS (such as the background and font overrides), you have to merge the content inside the GLOBAL_HEAD block as well as the content inside the style tags. An example is shown below:


Background Override:

GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(http://www.your-website.com/image.jpg) !important;
}
-->
</style>
<=GLOBAL_HEAD

Font Override:

GLOBAL_HEAD<=
<style type="text/css">
<!--
body, td, font, div, p {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
-->
</style>
<=GLOBAL_HEAD

Combined Background and Font Override:

GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(http://www.your-website.com/image.jpg) !important;
}
body, td, font, div, p {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
-->
</style>
<=GLOBAL_HEAD


A basic CSS statement contains an element (such as body, table, a:hover, etc.), an opening bracket ("{"), the declarations that define the effects being added to the element (which includes a semi-colon on the end of each declaration), and a closing bracket ("}"). Note the composition of this basic link effect:

a:hover {
cursor: crosshair;
}

It begins with the a:hover element, followed by a bracket on the same line. Then on a new line, the first (and in this case, only) declaration is followed by a semi-colon; on the last line, the closing bracket is added. This is an example of a CSS effect with the correct syntax.

When merging CSS, the entire statement needs to be copied over, from the element's name to the closing bracket. Without those two items, the effect will not work and may distort or disable the effect of other CSS in the same override.

Note that the new, combined GLOBAL_HEAD in the previous example only uses one <style></style> tag set. It also has only one set of comment markers ("<!-- / -->"). The above is an example of a correctly merged GLOBAL_HEAD override. Having duplicate style tags and comment markers can lead to incorrect editing of future overrides and may cause unexpected results if the tags are missing or misplaced. It is best to have only one set of opening and closing style tags for your merged override.

Important: If you open a comment marker ("<!--") and do not close it with the ending "-->", then your entire journal may not display properly in your browser. Making sure that you open and close these markers properly so that your journal displays correctly. This not only applies to background and font overrides but to any GLOBAL_HEAD override that uses CSS: cursors, borders, link color and decoration, opacity, scrollbars (IE specific), and transparency, to name a few.

This tutorial has already covered how to merge GLOBAL_HEADs that contain only HTML and CSS. Below is an example of how to merge a GLOBAL_HEAD that adds a title change with a GLOBAL_HEAD that adds a background image.


Title Change:

GLOBAL_HEAD<=
<title>My Customized InsaneJournal!</title>
<=GLOBAL_HEAD

Background Override:

GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(http://www.your-website.com/image.jpg) !important;
}
-->
</style>
<=GLOBAL_HEAD

Combined Title Change and Background Override:

GLOBAL_HEAD<=
<title>My Customized InsaneJournal!</title>
<style type="text/css">
<!--
body {
background-image: url(http://www.your-website.com/image.jpg) !important;
}
-->
</style>
<=GLOBAL_HEAD


Note that the title tag goes outside of the style tag. It could go either above or below it; in this case, it has been placed above. (Please note that title changes may not work for some system styles, as mentioned in the original tutorial. In those cases, it wouldn't be merging that disabled the title change, simply a restriction in the system.)

The title tag was used as an example, it could be any one of the tags listed in FAQ #100. Regardless, they would need to be placed outside of the style tag, not inside. Placing HTML tags inside a stylesheet disables them and can also interfere with the intended CSS effects.


[contributed by </a></b></a>[info]braindrain in </a></b></a>
LinkReply