Rearrange site name / slogan: Garland

Have a look at the page source in your browser, then you'll know what classes/ids are already there for you.

The name and slogan are contained in structures you can target with css to style how you'd like. Use Firebug (if you're browsing with Firefox) to easily see the HTML structure around those items, then edit the css for Garland to style them how you'd like. Note, since Garland is a core theme any edits you do will be erased on an upgrade - you could make a copy of the theme and give it a different name, then house it under sites/all/themes.

Is often useful for organizing placement issues, esp if, like me, you don't do enough CSS to solve it that way.

Ian Dickson

Likal.com

My challenge with this is the slogan is wrapped inside the header h1 a:link with the logo and i only want to style the slogan, actually i want to relocate it but since its part of the logo can't do one with out the other. Would be nice if there were a way to separate them

I have the same problem. I think the Slogan is taking too much space and it should be beneath the Site name much smaller font/Italic. May be if we put this forward as a new feature so the developer would consider this customization for next update. It is not worth it play around with Theme and then loose all work with next update. Even if you give it another name and use it separately you may loose the chance for new features which come in future updates.

I have added this please consider to support it
http://drupal.org/node/226943

Thanks

There are obviously many ways to do it, but here was my solution:
First, remember to copy the garland theme to sites/all/themes/myThemeName, and change the name of the theme in garland.info. This isn't necessary, but as someone pointed out, this prevents your changes from being overwritten when the theme updates.

Second, in page.tpl.php, change this:

$site_fields = array();
if ($site_name) {
  $site_fields[] = check_plain($site_name);
}
if ($site_slogan) {
  $site_fields[] = check_plain($site_slogan);
}
$site_title = implode(' ', $site_fields);
if ($site_fields) {
  $site_fields[0] = '<span>'. $site_fields[0] .'</span>';
}
$site_html = implode(' ', $site_fields);

to this*:

$site_fields = array();
$site_title = '';
if ($site_name) {
  $site_title = check_plain($site_name);
  $site_fields[] = '<div id="sitename">'.$site_title.'</div>';
}
if ($site_slogan) {
  $site_fields[] = '<div id="slogan">'.check_plain($site_slogan).'</div>';
}
$site_html = implode(' ', $site_fields);

*This also changes the title of the link (ie. what you see when you hover the mouse over the link) from "sitename slogan" to just "sitename."

Then in style.css, change this:

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

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

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

to this:

#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
  top: 13px;
  line-height: 22px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

#wrapper #container #header #sitename {
  font-weight: bold;
}

#wrapper #container #header #slogan {
  /*Put whatever CSS you want for the slogan here*/
}

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

You may need to adjust the line-height/top properties to your liking.

Now edit CSS for the slogan however you want. For instance, mine looks like this:

#wrapper #container #header #slogan {
  font-style: italic;
  font-size: 0.6em;
}

And finally, of course, make sure to apply the new theme (you need to do this even if you didn't create a new directory, in order to refresh the css file).

Hope that helps!

http://drupal.org/node/253067

-=-=-=-
http://www.jdarx.info/

I can't get it to work either. The slogan doesn't show up at all.