WP help
- Started
- Last post
- 21 Responses
- forcetwelve
http://www.stugibson.net/blog/
how can i make the top header image be clickable to take the user back to home page?
- jamble0
HTML
<div id="logo"><a href="index.php"><span>My homepage</span></a></div>CSS
#logo a { float:left; width: 200px; height:200px; }
#logo a span { float:left; text-indent:-9999px; }Should get you started, it's off the top of my head so hopefully it will work.
- what file do i do thart in? index.php in the theme folder?forcetwelve
- In wordpress it'll be the header.php file.jamble
- in the theme folder
jamble
- shitehawke0
Is that Poplar in the header? I love that font!
- Sorry, I realise this doesn't help, but i was excited when I saw poplar. Its pretty sad I know.shitehawke
- yep- poplar.forcetwelve
- forcetwelve0
hmmm, not sure i understand the css code? what's the text indent etc?
- jamble0
It allows you to put in a text description of the link - eg, Stu Gibson Homepage and then hides the text from displaying in the browser so only your logo shows up as a graphic.
- Shaney0
Find the logo div in the CSS file and remove the background image reference.
In the WP header include file find the logo div and add your logo image and link:
<div id="logo">
<a href="http://www.whatever.com"><img src="logo.jpg" alt="Home Page" title="Home Page" class="img" /></a></div>
- forcetwelve0
i get this now after doing the above:
- Shaney0
sorry I meannt to post the correct path to your log, which I did ...and it of course posts the image
- Shaney0
before the change was the logo image in a div called "logo"? or can you show the original code from the header?
- forcetwelve0
header code:
-------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />
<title>
<?php bloginfo('name'); ?>
<?php wp_title(); ?>
</title>
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
<style type="text/css" media="screen">
<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
</style>
</head>
<body>
<div id="pages">
<!--<h1><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a></h1>-->
</div>
<div id="wrap">
<div id="logo">
</div>
- Shaney0
Sorry was my original code had a "img" class in it, screwing the logo div up. This Bit: class="img
take that out and you should be cool, corrected logo div below:
<div id="logo">
<a href="http://www.stugibson.net/blog"><img src="http://www.stugibson.net/blog/wp-content/themes/force12/images/top.jpg" alt="Home Page" title="Home Page"" /></a></div>
- Shaney0
F** typo use the below:
<div id="logo">
<a href="http://www.stugibson.net/blog"><img src="http://www.stugibson.net/blog/wp-content/themes/force12/images/top.jpg" alt="Home Page" title="Home Page" /></a></div>
- forcetwelve0
it's still screws it up for some reason. i'm lost
- Shaney0
Make sure their is only one closing div ( </div> ) after the logo div closes.
Earlier when you had the error it looked like the wrap div (which keeps the page center aligned) was closing straight after the logo div....
Example:
<div id="wrap">
<a href="http://www.stugibson.net/blog"><img src="http://www.stugibson.net/blog/wp-content/themes/force12/images/top.jpg" alt="Home Page" title="Home Page" /></a>
</div><div id="content"> ............ etc
- Shaney0
example should be..
<div id="wrap">
<div id="logo">
<a href="http://www.stugibson.net/blog"><img src="http://www.stugibson.net/blog/wp-content/themes/force12/images/top.jpg" alt="Home Page" title="Home Page" /></a>
</div>
<div id="content"> ............ etc
- acescence0
i would suggest not making the logo a div bg and using the code they already had there. make the h1 anchor block level, give it a width and height and background of your logo image and text-indent of like -9000 to hide the anchor text. better SEO method.
- forcetwelve0
that worked. thanks. was the extra div in there.
thx guys