WordPress › Support » How to Turn Header Graphic into a Link?

arickrol
Member
Posted 1 year ago #

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 -->

yakuphan
Member
Posted 1 year ago #

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)
yakuphan
Member
Posted 1 year ago #

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

arickrol
Member
Posted 1 year ago #

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="http://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 -->

Amapola
Member
Posted 1 year ago #

I don't see how that will turn the header image into a link to the main page either. Please help.
moshu
Member
Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

How to Turn Header Graphic into a Link? (6 posts)

Topic Closed

About this Topic

Tags

Code is Poetry