Help with adding logo to wordpress header

Hens00 Active Member

Messages:: 177

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 53

#1

I'm pretty clueless when it comes to coding and am struggling to replace a logo in a wordpress theme. Is it possible, some one can help?

This is the header section from the style sheet:

/* Header
-----------------------------------------------------------------------------*/
#header {
height: 117px;
border-bottom: 3px solid #EAEAEA;
margin-bottom: 28px;
}
#top{
float: right;
text-align: right;
}
#top li {
display: inline;
}
#top a {
color: #808080;
margin: 0 0 0 13px;
background: url(i/toparrow.gif) center left no-repeat;
padding: 0 0 0 12px;
font-size: 1.2em;
}
#top .current_page_item a {
background-image: url(i/toparrow2.gif);
}
#searchform {
margin: 20px 0 0;

This is from the Header php:

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (function_exists('seo_title_tag')) { seo_title_tag(); } else { bloginfo('name'); wp_title();} ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>

<body>

<div id="wrapper">

<div id="header">
<div id="top">
<ul>
<li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" name="s" id="s" value="Search Keywords" onfocus="document.forms['searchform'].s.value='';" onblur="if (document.forms['searchform'].s.value == '') document.forms['searchform'].s.value='Search Keywords';" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>
<h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <span><?php bloginfo('description'); ?></span></h1>
<ul id="menu">
<li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
<?php wp_list_pages('title_li='); ?><li><a href="http://carphone.at/245437?CTY=3&CID=136">Compare Mobile Phone Offers</a></li>
</ul>
</div>

<div id="container">
<div id="content">

I want to replace the current logo with an image, and would like to have the logo clickable to the homepage.

The site is here
Can someone help?

Hens00, Sep 7, 2008 IP

gameOn Member

Messages:: 624

Likes Received:: 8

Best Answers:: 0

Trophy Points:: 35

#2

The css file you have put is incomplete, plz put the complete stylesheet inside [ code ] & [ / Code ] tags

gameOn, Sep 7, 2008 IP

Hens00 Active Member

Messages:: 177

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 53

#3

Ok, like this?


*
Theme Name: ADSimple
Theme URI:
Description: Simple theme based on <a href="http://articlesss.com/article-directory-wordpress-theme/">Article Directory</a> theme.
Version: 1.0.1
Author: Dimox
Author URI: http://dimox.name/
Tags: white, fixed width, three columns, widgets, right sidebar, simple
*/

* { margin: 0; padding: 0; }
html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
body {
	font: 62.5% "Trebuchet MS", Tahoma, Arial, sans-serif;
	line-height: 1.6em;
	color: #444;
}
a {
	color: #E60000;
	text-decoration: none;
}
a:hover {
	color: #AA0001;
	text-decoration: underline;
}
p {margin: 0; padding: 10px 0;}
h1 {margin: 20px 0 0}
img {border: 0}
input {vertical-align: middle}
h2 {
	font: normal 1.6em "Trebuchet MS", Arial, Sans-Serif;
	margin: 0 0 12px;
}
blockquote {
	margin: 10px 0 10px 30px;
	border-left: 3px solid #E60000;
	background: #EEE;
	padding: 5px 15px;
	font-size: 1.3em;
}
* html blockquote {height: 1%;}
blockquote p {
	font-size: 1em !important;
	margin: 0;
}
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.aligncenter {margin: 7px margin}
.alignleft {float: left}
img.alignleft {margin: 5px 10px 3px 0}
.alignright {float: right}
img.alignright {margin: 5px 0 3px 10px}
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	/* optional rounded corners for browsers that support it */
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}


#wrapper {
	width: 990px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	border-top: 5px solid #EEE;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
	height: 117px;
	border-bottom: 3px solid #EAEAEA;
	margin-bottom: 28px;
}
#top{
	float: right;
	text-align: right;
}
#top li {
	display: inline;
}
#top a {
	color: #808080;
	margin: 0 0 0 13px;
	background: url(i/toparrow.gif) center left no-repeat;
	padding: 0 0 0 12px;
	font-size: 1.2em;
}
#top .current_page_item a {
	background-image: url(i/toparrow2.gif);
}
#searchform {
	margin: 20px 0 0;
}
#searchform input {
	font: 1.1em "Trebuchet MS", Arial, Sans-Serif;
	float: left;
}
#s {
	width: 175px;
	padding: 2px 6px;
	border: 2px solid #ccc;
	margin-right: 5px;
}
#searchsubmit {
	background: #E60000;
	border: 0;
	padding: 2px 7px;
	color: #fff;
	font-weight: bold !important;
	overflow: visible;
	height: 24px;
	cursor: pointer;
}

#logo {
	float: left;
	color: #808080;
	line-height: 0.85em;
	font-size: 3.3em;
	margin: 14px 0 15px;
}
#logo span {
	display: block;
	font-size: 0.38em;
	font-weight: normal;
	text-transform: uppercase;
}

#menu {
	height: 24px;
	padding: 7px 0 0 0;
	clear: both;
	background: url(i/smalldot.gif) repeat-x;
	border-bottom: 1px solid #CCC;
	position: relative;
}
#menu li {
	font-size: 1.1em;
	display: inline;
	text-transform: uppercase;
}
#menu li a {
	margin: 0 25px 0 10px;
	color: #808080;
	font-size: 1.2em;
}
#menu li a:hover {color: #444;}
#menu li.current_page_item {
	background: url(i/arrow.gif) no-repeat center left;
}
#masthead img { }{ float:left; padding-bottom: 0.4em; }

/* Content
-----------------------------------------------------------------------------*/
#container {
	width: 100%;
	background: url(i/dots.gif) 550px 0 repeat-y;
	margin-bottom: 10px;
}
* html #container {height: 1%;}
#container:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#content {
	width: 540px;
	float: left;
	padding: 0 10px 20px 0;
	overflow: hidden;
}

#content h2 {
	font: normal 1.9em "Trebuchet MS", Arial, Sans-Serif;
	padding: 0 0 3px;
	border-bottom: 1px solid #EEE;
	margin-bottom: 1.2em;
}
#content h2.pagetitle {
	padding-left: 3px;
	padding: 1px 0 4px;
}
#content h3 {
	font: normal 1.7em "Trebuchet MS", Arial, Sans-Serif;
	padding: 1px 0 4px;
	margin-bottom: 0.2em;
	border-bottom: 1px solid #EEE;
}

#content p,
#content li {
	font-size: 1.3em;
	line-height: 1.4em;
}

#content .post {
	margin: 0 0 2.2em;
}
#content .post h2,
#content .post h3 {
	font-size: 2em;
	margin: 0 0 2px;
}
.post ul,
.post ol {
	margin: 7px 0 7px 35px;
}
.post li {
	padding: 2px 0;
}
.post .postmetadata {
	font-size: 1.1em;
	padding: 0 0 7px;
	color: #AAA;
}
.postmetadata a {
	color: #AAA;
	text-decoration: underline;
}
.postmetadata a:hover {
	text-decoration: none;
}

.entry {
  text-align: justify;
}

.entry h1 {
	font-size: 1.8em;
	margin: 15px 0 10px;
}
.entry h2 {
	font-size: 1.65em !important;
	font-weight: bold !important;
	margin: 15px 0 10px !important;
	padding: 0 !important;
	border: none !important;
}
.entry h3 {
	font-size: 1.45em !important;
	font-weight: bold !important;
	margin: 15px 0 10px !important;
	padding: 0 !important;
}
.entry h4 {
	font-size: 1.3em;
	margin: 15px 0 10px;
	font-weight: bold !important;
}

.line {
	clear: both;
	padding: 3px;
	margin: 0 0 15px;
	background: url(i/smalldot.gif) repeat-x;
}

.nav {
	font-size: 1.3em;
	padding: 0 0 22px;
}
.navigation {
	font-size: 1.3em;
	margin: 20px 0;
	height: 1.3em;
}
.alignleft {float: left;}
.alignright {float: right;}

h3#comments,
h3#respond {
	padding: 1px 0 4px;
	border-bottom: 1px solid #EEE;
}

.commentlist {
	margin: 20px 0 30px 25px;
}
.commentlist li {
	padding: 8px 0 2px;
}
.cdata {
	background: #F5F5F5;
	border-bottom: 1px solid #DDD;
	padding: 3px 3px 3px 7px;
	height: 1%;
}
.cdata strong {
  display: block;
}
#content img.avatar {
  float: right;
	display: inline;
	border: 0;
	margin: 1px 1px 0;
}
.ctext {
  padding: 0 7px;
}

.commentlist li p {
	font-size: 1em !important;
}
.commentmetadata {
	font-size: 0.85em;
}
.commentmetadata a {
  color: #A5A5A5;
}

#author, #email, #url, #comment, #submit {
	font: 1em "Trebuchet MS", Arial, Sans-Serif;
	padding: 2px 4px;
	width: 200px;
	border: 1px solid #CCC;
}
#comment {
	width: 470px;
	height: 170px;
}
#submit {
	width: 115px;
	height: 22px;
	padding: 0;
	background: #F4F4F4;
	cursor: pointer;
	overflow: visible;
}


/* Sidebars
-----------------------------------------------------------------------------*/
#sidebars {
	float: left;
	width: 440px;
	font-size: 1.2em;
	line-height: 1.4em;
}
* html #sidebars {height: 1%;}
#sidebars:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

#l-sidebar {
	float: left;
	width: 230px;
	padding: 0 10px;
}
#r-sidebar {
	float: left;
	width: 180px;
	padding: 0 0 0 10px;
}

#sidebars ul {
	margin: 0 0 15px;
}
#sidebars li {
	list-style: none;
	border-bottom: 1px solid #EEE;
	padding: 3px 4px;
	margin: 0;
}
#sidebars li ul {
  margin: 0 0 3px 12px;
}
#sidebars li li {
  padding: 3px 0 0;
	border: none;
}
#sidebars li a {
	background: url(i/arrow.gif) no-repeat center left;
	padding: 0 0 0 12px;
	color: #808080;
}
#sidebars h2 {
	font: normal 1.7em "Trebuchet MS", Arial, Sans-Serif;
	padding: 0 0 3px 3px;
	border-bottom: 1px solid #EEE;
}
#sidebars h3 {
	font: normal 1.4em/1.1em "Trebuchet MS", Arial, Sans-Serif;
	padding: 0 0 3px;
}

.tags,
#tag_cloud {
	margin: 0 0 15px;
}
.tags {
  text-align: center;
}
.tags a,
#tag_cloud a {
	color: #808080;
	margin: 0 2px;
}

#wp-calendar {
  width: 100%;
	margin: 0 0 12px;
}
#wp-calendar td {
  text-align: center;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
	clear: both;
	padding: 7px 10px;
	margin: 0 0 15px;
	font-size: 1.1em;
	color: #808080;
	background: #EEE;
}

Code (markup):

Hens00, Sep 7, 2008 IP

wd_2k6 Peon

Messages:: 1,740

Likes Received:: 54

Best Answers:: 0

Trophy Points:: 0

#4

OK this is a guess as I can't actually see the page but the logo is defined inside header.php here:

<h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <span><?php bloginfo('description'); ?></span></h1>

And the image is actually set inside the CSS sheet if you just want to change that. Just search for:

#logo

and it's set there.

wd_2k6, Sep 7, 2008 IP

Hens00 Active Member

Messages:: 177

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 53

#5

Ok I have removed the

<h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <span><?php bloginfo('description'); ?></span></h1>

and then what code do I replace it with in the CSS style sheet?

page is here

Hens00, Sep 7, 2008 IP

Log in or Sign up

Help with adding logo to wordpress header

Hens00 Active Member

gameOn Member

Hens00 Active Member

wd_2k6 Peon

Hens00 Active Member

Useful Searches