The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[all]Merging print_custom_head functions
howto_user wrote in s2howto
Many of the customizations to look and layout of your journal in S2 achived using a custom theme layer are accomplished by overriding the print_custom_head() function. However, it is only possible to have one print_custom_head() function in your theme layer so if you wish to use more than one such customization you will need to merge them together.

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

function Page::print_custom_head () {
"""
<title>The Journal of basic LiveJournal (©) tutorials</title>
<LINK REL="SHORTCUT ICON" HREF="http://www.example.com/my_cool_icon.ico" />
""";
}


Merging customizations 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 print_custom_head function as well as the content inside the style tags. An example is shown below:

Background Override:

function Page::print_custom_head () {
"""
<style type="text/css">
body {
background-image: url(http://www.example.com/image.jpg) !important;
}
</style>
""";
}

Font Override:

function Page::print_custom_head () {
"""
<style type="text/css">
body, td, font, div, p {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
</style>
""";
}

Combined Background and Font Override:

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


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 print_custom_head() in the previous example only uses one <style></style> tag set. The above is an example of a correctly merged print_custom_head() function. 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.

This tutorial has already covered how to merge print_custom_head() functions that contain only HTML and CSS. Below is an example of how to merge a print_custom_head() function that adds a title change with a print_custom_head() function that adds a background image.

Title Change:

function Page::print_custom_head () {
"""
<title>The Journal of basic LiveJournal (©) tutorials</title>
""";
}

Background Override:

function Page::print_custom_head() {
"""
<style type="text/css">
body {
background-image: url(http://www.example.com/image.jpg) !important;
}
</style>
""";
}

Combined Title Change and Background Override:

function Page::print_custom_head() {
"""
<title>The Journal of basic LiveJournal (©) tutorials</title>
<style type="text/css">
body {
background-image: url(http://www.example.com/image.jpg) !important;
}
</style>
""";
}


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 this 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 you can include in a print_custom_head() function. 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.

Originally written for S1 by braindrain. Adapted for S2 by tinyjo.

Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account