#2 Dad (xevinx) wrote in s2component,
#2 Dad
xevinx
s2component

Example of using print_custom_head() - Adding transparency.

Until recently, if you wanted to customize any elements in the stylesheet in Component, you had to recreate the print_stylesheet() function, paste the contents of the entire stylesheet into it, and make the few minor changes you wanted to. However, with the addition of print_custom_head to S2 styles (I think they all have it now), you can now modify the behavior of the stylesheet without having to recreate the entire thing.


When you make changes through the wizard or theme/user layers, it often changes values in your external stylesheet. The external stylesheet is then loaded into the top of the page so that as the rest of the page loads your browser knows how to format it. Now the contents of print_custom_head() are loaded right below the external stylesheet. The browser loads the external first, then sees any style information that you have entered using print_custom_head. It uses the last style infromation it finds to format the page. So if, for example, you want to change the font size from px to em, you can use:
body, td { font-size: 1em; }

and it will use this value, even though the external stylesheet states the font size in px. Its important to note though that just because we have a body here, we're not going to lose the rest of the body style from the external stylesheet. We're simply modifying or appending.

Now, on to the fun stuff.

The print_custom_head() function is a little different than other functions we've dealt with in my tutorials. Unlike print_stylesheet, this function is not a global function. For practical purposes, this means that the code will look a little different. However, its a lot cooler because we can change its behavior depending on what page you're on. Initially we'll take a look at Page. All pages within the style inherit from Page. That means that if we don't specify a print_custom_head() for the page you're on, it'll use the values found in Page.

For example, lets say we want to make our component backgrounds slightly transparent. First we find that each component uses the class of .compBg:
<td class="compBg" 

So, using Page and print_custom_head() together, we get:
function Page::print_custom_head() {

Then we use the familiar triple quotes and enter what we want printed in the head. In this case, we want to print style stuff, so we use the style tag:
	"""
	<style media="screen" type="text/css">

Then, searching around the many many helpful communities we can find the CSS needed to make things transparent. We add that to our .compBg class and end up with:
	.compBg { filter:alpha(opacity=65); -moz-opacity:0.65; }

And finally, close our style tag, triple quotes, and curly bracket.
	</style>
	""";
}

Put that all together and we get:
function Page::print_custom_head() {
	"""
	<style media="screen" type="text/css">
	.compBg { filter:alpha(opacity=65); -moz-opacity:0.65; }
	</style>
	""";
}

Now, for some reason, you want the opacity to be 50% on your Friends Page. Easy, enough, instead of using Page, use the FriendsPage class.
function FriendsPage::print_custom_head() {
	"""
	<style media="screen" type="text/css">
	.compBg { filter:alpha(opacity=50); -moz-opacity:0.5; }
	</style>
	""";
}

Other pages you may be interested in using are found in the S2 documentation, but I've also listed them here:

Note that when looking at those, some have Derived (Child) and Parent classes. For example, FriendsPage is a child of RecentPage. That means that if you specify a print_custom_head for RecentPage that FriendsPage will use it too, unless you specify something else for FriendsPage. However, just like I don't inherit anything from my child, RecentPage doesn't get anything from FriendsPage.

I don't feel like I've explained this all very well, not really in the writing mindset, but I wanted to get this info out to you all. So let me know if this makes sense to you, or how I can reword anything that might help explain things. Thanks.
  • Post a new comment

    Error

    default userpic
  • 27 comments