Reply to comment

Garland: replace page title <h1> with span class

I've been looking around for a lazy man's fix for this issue in the garland theme for Drupal 6 and well.... i couldn't find one so i went ahead and did it.

To replace the tag that drupal ads to the site title, i decided to make my own class called .myTitle and replace the heading1 tag with .

It does the job well, though i haven't checked to see if h1 is used in content headings by default...

To replace it in the header, make a copy of the garland theme and paste it in sites>all>[make new folder called 'themese']>[make new folder called 'MyGarland']. next, rename 'garland.info' to 'myGarland.info.' open that file and change the name to myGarland and save it.

Enable your new theme through the admin pannel (administer>sitebuilding>themes) and set it as default. Open up the page sites>all>themes>myGarland>page.tpl.php and...

REPLACE:
if ($logo || $site_title) {
print '
';
if ($logo) {
print '';
}
print $site_html .'
';

WITH:
if ($logo || $site_title) {
print '
';
if ($logo) {
print '';
}
print $site_html .'
';

now we need to edit our .css files to accommodate the new class. Start by opening sites>all>themes>myGarland>style.css and add the following to the bottom:

/* -- @start MyClasses -- */
.myTitle {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
font-size:170%;
}

#wrapper #container #header .myTitle, #wrapper #container #header .myTitle
a:link, #wrapper #container #header .myTitle a:visited {
line-height: 120px;
position: relative;
z-index: 2;
white-space: nowrap;
}

#wrapper #container #header .myTitle span {
font-weight: bold;
}

#wrapper #container #header .myTitle img {
padding-top: 14px;
padding-right: 20px; /* LTR */
float: left; /* LTR */
}

#wrapper #container #header .myTitle, #wrapper #container #header .myTitle
a:link, #wrapper #container #header .myTitle a:visited {
color: #fff;
font-weight: normal;
text-shadow: #1659ac 0px 1px 3px;
font-size: 1.5em;
}

#wrapper #container #header .myTitle a:hover {
text-decoration: none;
}

/* -- @end My Classes -- */

Next, open style-rtl.css and add this:
/* -- @Start My Classes -- */
#wrapper #container #header .myTitle img {
padding-right: 0;
padding-left: 20px;
float: right;
}

And finally, open print.css and add:
/* -- @Start My Classes -- */

#wrapper #container #header .myTitle, #wrapper #container #header .myTitle
a:link, #wrapper #container #header .myTitle a:visited {
text-shadow: none;
color: #000;
}
/* -- @end My Classes -- */

that should do it.

I'm a complete newb to Drupal, but this is pretty much just css stuffs. hope this makes it easy on a few of you out there! please critique, correct exeterra - i have a lot to learn about drupal!!

Reply

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for clevery testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.