How to Turn Header Graphic into a Link?

  • Hello. I’ve seen websites that use WP and have their header graphic as a link to the blog’s main page. I am using the Corporateid theme by Makequick on my website CWF GameCast and want to turn my header graphic into a link.

    I looked in my theme’s files and the header graphic is setup in the stylesheet. I’m not sure how to turn the header graphic into a link in the CSS.

    Here’s the code for my header in the stylesheet:

    /* Header style */
#header {
	float: left;
	clear: both;
	width: 950px;
	background: url(images/christmas.jpg);
	color: #3c3d40;
	border-bottom: 6px solid #3E7093;
	height: 485px;
}

#header #site-title {
	float: left;
	margin-right: 8px;
	padding: 8px 0;
	position: relative;
	left: 18px;
}

#header h1 {
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-size: 30px;
	font-weight: normal;
	letter-spacing: -1px;
	margin: 0;
	position: relative;
	top: 10px;
	c
}

#header h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	font-weight: normal;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
}

    Here’s the code for my header page (not the stylesheet):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php wp_title(); ?></title>

	<meta name="generator" content="WordPress" />
	<meta name="description" content="Gadget and technology news." /><meta name="keywords" content="gadgets, handphone, pda, computers, music, laptop, review, news" />

	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

	<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'); ?>" />
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/css-form.js"></script>

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>

	<?php wp_head(); ?>
</head>

<body>
<div id="mainbox">
	<div id="header">
		<div id="site-title">
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1><br /><h2><?php bloginfo('description'); ?></h2>
		</div>

	</div>
<!-- end header -->
Viewing 5 replies - 1 through 5 (of 5 total)

  • Add this code your Style.css file.

    #header #site-title a{
    display:block;
    width: 950px;
    height: 485px;
    }

    As you understand, we set the size of “site-title a” div to the same size with “header” div. Now they are the same size.
    If you have a problem, decrease the width and height.
    (sorry for poor English)

    I am sorry, i try this your theme and i see that is wrong.

    Thread Starter arickrol

    (@arickrol)

    Yakuphan: Do you mean you tried your recommendation on the Corporateid theme and it didn’t work? I know it is an odd theme (I’m looking for something better but it is difficult to find a better one like it that comes with blue colors and a header graphic locations).

    Also, I’m not sure how your suggestion will make the header graphic into a link. I know in HTML I can just do <A HREF="URL GOES HERE"><IMG SRC="URL OF IMAGE GOES HERE"></A> and the image becomes a hyperlink.

    I want to create the same effect with my header image. But, I’m not sure how to do it since the image is setup in the Stylesheet.

    Here is the complete code for the Header page in the theme:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php wp_title(); ?></title>

	<meta name="generator" content="WordPress" />
	<meta name="description" content="Gadget and technology news." /><meta name="keywords" content="gadgets, handphone, pda, computers, music, laptop, review, news" />
<script src="https://feeds.feedburner.com/~s/CwfGameCast?i=<?php the_permalink() ?>" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

	<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'); ?>" />
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/css-form.js"></script>

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>

	<?php wp_head(); ?>
</head>

<body>
<div id="mainbox">
	<div id="header">
		<div id="site-title">
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1><br /><h2><?php bloginfo('description'); ?></h2>
		</div>

	</div>
<!-- end header -->

    I don’t see how that will turn the header image into a link to the main page either. Please help.

    It is overcompliacted here.
    Just search for “clickable header” and you will find some one-line solutions.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to Turn Header Graphic into a Link?’ is closed to new replies.