#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
They do all have print_custom_head, for the record. However, this tutorial will only work for component, as the other styles would need to make a different class (in CSS) transparent.

(Looks pretty good. Nice job.)
well, it'll work in other styles - just wont do anything until they add .compBg to their entries.
i have a quick question. .compBg makes the components transparent - .entryHolderBg makes the entries transparent...how do i do both?

tantric_lover

11 years ago

xevinx

11 years ago

Is this where I get to make all the body text on my entries and on my Friends Page into larger much more read font? If so, exactly where do I put this, and what should it read to get 14 point font?

Deleted comment

does capitalization matter in that? i think it does. just thought i would add...
nvm xevinx, to make both transparent, use:



function Page::print_custom_head() {
	"""
	<style media="screen" type="text/css">
	.entryHolderBg { filter:alpha(opacity=65); -moz-opacity:0.65; }
	</style>
        <style media="screen" type="text/css">
	.compBg { filter:alpha(opacity=65); -moz-opacity:0.65; }
	</style>

	""";
}


Deleted comment

i thought so, but last night i tried it, and it didn't work. *shrugs*

Deleted comment

Is there a way I can make the boxes completely transparent but to still have my text show up?

Deleted comment

because I like the rest of the setup.
I mean the entry boxes not the component boxes

bc

13 years ago

katelemon

13 years ago

This should do the trick.

Too bad it isn't nativly supported by the s2 system.

Deleted comment

xevinx

13 years ago

Is there a way to use .entryHolderBg without making the icons transparent?
okay, i have successfully made my journal and component boxes transparent, but i was wondering if there is a way to keep the text, icons, and pictures from being transparent as well. i have gray as a bg color for my boxes, and i don't want them to be nonexistent. is there any way to do this?
is there a way to make the title bars transparent also?
It depends on what exactly you want to do. Try asking in component_help
I thought I'd do this because the line-height was the only thing I changed. I could not remember if it was for all styles or just a couple parent ones, though.

I don't seem to be able to download the style sheet anymore, though. I may simply have forgotten something, though.
It uses the last style infromation it finds

information
I was wondering if you would help me with my codes? =( please.. I just got a paid account and the s/2/component.. and I can't get the right codes in the my theme layer for the life of me. =( I'm so discouraged. I don't understand the tutorials at all.. and the codes I put in don't seem to work.
I have endlessly fiddled with the code provided but haven't been able to set transparency or opacity to my opal style. Where can I find docs on Opal that show me that code?
I've tried several different ways to make the text boxes, etc., transparent, but nothing seems to work. You can see that the background image is on my journal, but I want everything else to be transparent to show the full background image. I've seen it done on numerous other journals; how do I do it with the component style so it'll work???
go to: manage - customise - advanced customisation - your layers

if you've fiddled with Component at all you'll have a layer already (type: user) editing this and setting all background colours to null should do the trick

set comp_bgcolor = "";
set entry_bgcolor = "";
set main_bgcolor = "";

well it worked for me anyway (=
hi, i know this is an old thread but i was wondering why the transparency doesnt work with firefox.