It's the little things...

Submitted by Rijidij on Sun, 30/06/2013 - 23:30

Have a look at the header of this site. By default, the whole slogan appears in italics.
But what if I want say, my name in bold, normal; and the rest in italics?
Sometime CSS alone doesn't quite get the job done.

Did you know that you can jazz up your site slogan with HTML tags? I can use something like:
<strong>Craig Wood</strong> : Freelance Software Engineer and Web Developer
Which takes care of the bold part... But what about changing the font-style to normal?

I changed the <strong> tags to <span> and added an id like so:
<span id='myname'>Craig Wood</span> : Freelance Software Engineer and Web Developer
Then added this CSS to my Sub_Bartik template (you sub-class your templates too, right?)
#site-slogan span#myname {
font-weight: bold;
font-style: normal;
}

Job done!
But wait... Drupal uses the site slogan to build the window title in the HTML header, so now your browser window bar and tab heading is probably full of HTML.
Fortunately this is easy to fix.
In Drupal 7 the outer HTML (outside the <body> tags) is in the html.tpl.php file.
Just copy this file (from modules/system) to your template folder and change the line inside the <title> tags from:
<?php print $head_title; ?>
to:
<?php
/* strip formatting tags from site slogan (which otherwise end up in title) */
print strip_tags($head_title);
?>

Now the job's done!