Tutorials and Lessons' Blurty

Properly Merging Multiple CSS Style Definitions
A vast majority of the customization available for both free and paid members can be accomplished through the use of a GLOBAL_HEAD override. However, only ONE GLOBAL_HEAD override block can be used at any one time within the Style Override box found near the bottom of the 'Modify Journal' webpage (http://www.blurty.com/modify.bml). With that, you must combined multiple GLOBAL_HEAD override block into a single override block, to merge multiple CSS Style Definitions into a single override block.

You must merge them if you want to combine effects that both use a GLOBAL_HEAD ( if you're looking to apply specific CSS style definition to a particluar journal view, you will need to use the appropriate *_HEAD override )

Example 1.1a contains the CSS style definition needed to alter the font characteristics of your entire journal display (see FAQ: How do I change the font in my journal):

Example 1.1a:
GLOBAL_HEAD<=


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

Example 1.1b contains the CSS style definition needed to customize your scrollbar colors:

Example 1.1b:
GLOBAL_HEAD<=


<style type="text/css">
<!--
body {
scrollbar-base-color: color;
scrollbar-track-color: color;
scrollbar-face-color: color;
scrollbar-highlight-color: color;
scrollbar-3dlight-color: color;
scrollbar-darkshadow-color: color;
scrollbar-shadow-color: color;
scrollbar-arrow-color: color;
}
-->
</style>
<=GLOBAL_HEAD

Where color would be the hexademical value of a color (see Hex Color Code Chart)

The combination of the two CSS style definitions into a SINGLE GLOBAL_HEAD override would look like Example 1.1c:

Example 1.1b:
GLOBAL_HEAD<=


<style type="text/css">
<!--
body {
scrollbar-base-color: color;
scrollbar-track-color: color;
scrollbar-face-color: color;
scrollbar-highlight-color: color;
scrollbar-3dlight-color: color;
scrollbar-darkshadow-color: color;
scrollbar-shadow-color: color;
scrollbar-arrow-color: color;
}
body, td, font, div, p {
font-family: "Century Gothic", "Arial", "Helvetica", sans-serif;
font-size: 8pt;
color: #90ee90;
}
-->
</style>
<=GLOBAL_HEAD

A basic CSS style definition 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 ("", 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.

In additional to CSS Style Definitions, you can have LIMITED HTML tags within your GLOBAL_HEAD override. HTML tags must sit outside the denoted CSS style markers <style></style>.

Example 1.2a contains the GLOBAL_HEAD override block needed to alter the browser's title display from the standard '______'s Blurty'

Example 1.2a:
GLOBAL_HEAD<=


<title>The Journal of Basic Blurty Customization</title>
<=GLOBAL_HEAD

Example 1.2b contains the GLOBAL_HEAD override block needed to add a background image to the journal style (see FAQ: How do I add a background image)

Example 1.1b:
GLOBAL_HEAD<=


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

Example 1.2c is the combination of the two overrides, this where the <title> tag sits before the <style> tag

Example 1.2c:
GLOBAL_HEAD<=


<title>The Journal of Basic Blurty Customization</title>
<style type="text/css">
<!--
body {
background-image: url(http://www.your-website.com/image.jpg) !important;
background-attachment: fixed;
}
-->
</style>
<=GLOBAL_HEAD

or

Example 1.2d is the combination of the two overrides, this where the <title> tag sits after the <style> tag

Example 1.2d:
GLOBAL_HEAD<=


<style type="text/css">
<!--
body {
background-image: url(http://www.your-website.com/image.jpg) !important;
background-attachment: fixed;
}
-->
</style>
<title>The Journal of Basic Blurty Customization</title>
<=GLOBAL_HEAD

IMPORTANT

The only HTML elements that can be used in the *_HEAD overrides are those elements that are valid in the head of a HTML document. This is limited to <base>, <title>, <style>, <link> and <meta>. Any other HTML elements will be stripped and filtered.