By ak on

I just set some code up in my template.php to give the body tag some usefull attributes on the way to get some more styling power. It is at a realy early state of development but it kinda works quite nice so far. It allthough became quite feature rich and I thought I'd share the code so far and see what others think. Maybe someone can help me optimise it a bit and I allthogh can see it in a module in the future. Heres what I got in my template.php: 

function css_body_attributes( $arg, $is_front, $sidebar_left, $sidebar_right ) 
{
	$uid = css_uid( $arg, $is_front );
	$sec = css_section( $arg, $is_front );
	$col = css_columns( $sidebar_left, $sidebar_right );
	$usr = css_user( );
	$osb = css_useragent( );
	$lang = css_language( );
	return 'id="'.$uid.'" class="'.$sec.' '.$col.' '.$usr.' '.$osb.'"';
}

function css_uid( $arg, $is_front ) 
{
	if     ( is_string($arg(2)) ) $body_id = $arg(0).'-'.$arg(1).'-'.$arg(2);
	elseif ( is_string($arg(1)) ) $body_id = $arg(0).'-'.$arg(1);
	elseif ( is_string($arg(0)) ) $body_id = $arg(0);
	if ( $is_front ) { $body_id = 'front'; }
	return 'page-'.$body_id;
}

function css_section( $arg, $is_front ) 
{
	if ( $is_front ) { $body_class = 'front'; } else $body_class = $arg(0);
	return 'section-'. $body_class;
}

function css_columns( $sidebar_left, $sidebar_right ) 
{
	if ( $sidebar_left && $sidebar_right ) return 'column-both';
	else if ( $sidebar_left ) return 'column-left';
	else if ( $sidebar_right ) return 'column-right';
	else if ( !$sidebar_left && !$sidebar_right ) return 'column-none';
}

function css_language( )
{
        #must check if module exists
	#return i18n_get_lang();
}

function css_user( )
{
	global $user;
	if ( !$user->uid ) { $user_class = 'anonymus'; } else { $user_class = $user->uid; }
	return 'user-'.$user_class;
}

# returns (String) something like: win ie 5-5, mac sa
function css_useragent( )
{
	$ua = new userAgent( );
	return $ua->os.' '.$ua->browser.' '.$ua->version;
}

and in the page.tpl.php you must replace the <body> tag with:

<body <?php print css_body_attributes( arg, $is_front, $sidebar_left, $sidebar_right ); ?>>

Here's what you get, two body attributes sample outputs generated by the css_body_attributes function.

<body id="page-blog" class="section-blog column-both user-1 win ff 1-5-0-6 de">
<body id="page-taxonomy-term-1" class="section-taxonomy column-left user-anonymus win ie 6-0 en">

So now you can style unique pages:

#page-node-## { background:#366; } (replacing ## with youre nodes id)
#page-contact { background:#663; }

Have a unique front page style:

#page-front { background:#636; }

You can style taxonomy term lists:

#page-taxonomy-term-1 { color:#636; }

You can style the admin sections if you need:

.section-admin { width:100%; }

You can style language sensitive content:

.en .read-more { background:url(images/read-more-en.png); }

You allthogh can provide individual user styles:

.user-1 {  background:#000; color:#fff; }

Instead of using css hacks write something browser sensitive like this:

.win .ff .block { margin:4px; }
.win .ie .5-0 .block { margin:2px; }
.mac .ie .block { margin:0; }

Additional I included a colums class to build fluid div layouts. I could imagin setting this up as a module where you just checkbox the attributes you'd like for your body tag. So has anyone got some thoughts or opinion on this one?

How can I optimise my code? I realy don't like passing all those variables in to the css_body_attributes function, can this be done else some how? How can I check if the i18n module exists due to a css language support with out breaking sites that don't have that module? And very important, how could my module auto attach my attributes to the body tag so the user doesn't have to do stuff manual in the theme?