By DarrinRich on

I installed the Garamond theme and am trying to customize it a bit. I replaced the default greenish circle logo in the upper left corner of the theme and replaced it with my own logo. I want to make the logo linkable to the homepage.
I know very little css and not sure what to change and where to change it to accomplish this. Can someone point out the steps?
Thank you.

⋅ Categories: Drupal 5.x

Comments

Peculiar_One’s picture

Peculiar_One commented

If you're using Firefox as your web browser, there's an extension available called Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) that has helped me tremendously and like you, I don't know much CSS either. Here's the homepage: http://www.getfirebug.com/

With this extension, you'll be able to not only find what to change where but you can also try your changes out right there in the Firebug window. Check it out--I don't think you'll be disappointed. :)

DarrinRich’s picture

DarrinRich commented

Thanks for the recommendation. I have tried using firefox with firebug. It is an amazing extension. I'm using CSS Edit. Just I'm afraid my problem is I need to edit something in the page.tpl.php file, but I'm not sure what it is.

The site im trying to test drupal out on is THIS SITE. I have the logo there, just cant figure out what to do in order to make it hyperlinked.

DarrinRich’s picture

DarrinRich commented

Thanks for the recommendation. I have tried using firefox with firebug. It is an amazing extension. I'm using CSS Edit. Just I'm afraid my problem is I need to edit something in the page.tpl.php file, but I'm not sure what it is.

The site im trying to test drupal out on is THIS SITE. I have the logo there, just cant figure out what to do in order to make it hyperlinked.

Peculiar_One’s picture

Peculiar_One commented

But looking at my header image (which is a functioning link to the home page) through Firebug I see the following:

<div id="header">
<a href="/" style="">
<img id="logo" alt="" src="/files/itheme_logo.png"/>
</a>

But I don't know where you'd go to edit that. It's not in the style.css or template.php file and the only thing close I could find in the page.tpl.php file was this...

<div id="page">
	<div id="wrapper">
	<div id="header">
		<a href="<?php print check_url($base_path); ?>"><?php if ($logo) { print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />'; } ?></a>	
		<h2><a href="<?php print check_url($base_path); ?>"><?php print check_plain($site_name); ?></a></h2>
		<div class="slogan"><?php print check_plain($site_slogan); ?></div>	
		<?php if ($search_box): ?><?php print $search_box ?><?php endif; ?>	
    </div><!-- /header -->

I didn't see a file called header.php anywhere either so I Googled it and came across this:

If you want your site name as a link, then you will need to add some more stuff <div class="header"><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></div>

here: www.blkmtn.org. Maybe if you go look over the whole article it will get you in the ballpark.

Good luck; sorry I couldn't be of more help.

pkoura’s picture

pkoura commented

i would go into the header.php file and find out where the logo is and use the following html:

<a href="http://yourwebsitehomepage.com"><img src="http://yourwebsitelogolocation.com" /></a>

that'll do the trick.

DarrinRich’s picture

DarrinRich commented

Where would that be? I don't see that particular file anywhere.

sepeck’s picture

sepeck commented

Someone is used to wordpress theming.

Normally, you'd look at the page.tpl.php file and find the image link there. Drupal provides the ability to change logo graphics through an upload for many themes. This theme does not have the logo tag in the page.tpl.php file. It adds the image through css positioning in the #headerimg div.

To make the image clickable, it looks like you'd need to change the theme itself some.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

DarrinRich’s picture

DarrinRich commented

Do you know what I have to add or change to make this work?
Thanks for the information

mfer’s picture

mfer commented

I'll share some working code from a site about to be released just after the new year. It's been tested in firefox, IE, and safari...

The page.tpl.php code:

<div id="logosection">
  <h1><a href="/" title="Title of Site">Title of Site</a><h1>
</div>

Then in the style.css file:

#logosection h1	{
  margin: 0;
  padding: 0;
}

#logosection h1	a {
  margin: 0;
  padding: 0;
  padding-top: 66px;
  height: 0;
  width: 360px;
  background-image: url(images/logo.gif);
  background-repeat: no-repeat;
  float: left;
  overflow: hidden;
}

The width is the width of the image, the padding-top is the height of the image, and the background-image is the image you are using.

This is semantic, plays nice in non-css compliant browsers, should be accessibility friendly.

--
Matt
www.mattfarina.com
www.innovatingtomorrow.net
www.geeksandgod.com

DarrinRich’s picture

DarrinRich commented

Matt,
You did it again! This worked beautifully. I took this down and added it in my notes. Thanks for the code.
Thank you very very much.

alextronic’s picture

alextronic commented

I'd add
<h1><span class="headerMessage "><a href="/" title="Title of Site">Title of Site</a></span><h1>
in the HTML

and in the CSS
span.headerMessage { position:absolute; top:-6000px; left:-2000px; }
to get rid of the text and leave the image alone.

all in all, good method.