Jackpot Wins free Coins Hack.Enjoy Free 888+200 Daily Legal Bonus

hussi
(@hussi)

15 years, 6 months ago

hallo,
i try to replace the title in the header with a logo / picture.
The new header should link to the startpage.
It would be very nice, if anybody could show me which things i have to chance in header.php and style.css

Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

Peter Boosten
(@pboosten)

15 years, 6 months ago

It would be nice to see how the current header.php and style.css look like. What’s the url to your site?

Peter

Thread Starter hussi
(@hussi)

15 years, 6 months ago

Hallo Peter,
my site is running on my localhost.

But here you see the current header.php:

<!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 profile=”https://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats please –>
<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’); ?>” />
<link rel=”Shortcut Icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>/favicon.ico” type=”image/x-icon” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?>

</head>

<body>

<div id=”rap”>
<div id=”headwrap”>
<div id=”header”>
/”><?php bloginfo(‘name’); ?>
</div>
<div id=”desc”>
<?php bloginfo(‘description’); ?>
</div>
</div>

<div id=”content”>
<!– end header –>

current style.css:
/*
Theme Name: aav1
Theme URI: https://aaron.collectedvisuals.com/
Description: Very minimal grid-style theme
Version: 1.1
Tags: black, white, green,two-columns, right-sidebar, fixed-width
Author: Aaron Adams
Date: April 2009

The CSS, XHTML and design is released under GPL:
https://www.gnu.org/copyleft/gpl.html

*/
a {
text-decoration: none;
color: #000;

}

a:active {
text-decoration: none;
color: #000;
}

a:visited {
text-decoration: none;
color: #000;
}

a:hover {
text-decoration: none;
color: #6fec98;
}

a img {
border: none;
}

acronym, abbr {

}

acronym, abbr, span.caps {
font-size: 11px;

}

acronym, abbr {
cursor: help;
border:none;
}

blockquote {
border-left: 5px solid #ccc;
margin-left: 18px
padding-left: 5px;
}

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

body {
background-color: #ffffff;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 12px;
}

#rap {
background-color: #FFFFFF;
width: 800px;
height: 100%;
padding: 5px;
margin: 0 auto 0 auto;
}

cite {
font-size: 11px;
font-style: normal;
color:#666;
}

#small {
font-size: 10px;
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #fff;
font-background-color: #000;
width:600px;
border-bottom: 1px solid #000;
}

smallbg {
color: #fff;
background-color: #000;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 15px 0 2px 0;
padding-bottom: 2px;
}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 0;
font-size: 13px;
}

ol#comments li p {
}

#commentlist li{
margin-left:-22px;
}

p, li, .feedback {
font: 11px Verdana, Arial, Helvetica, sans-serif;

}

/* classes used by the_meta() */
ul.post-meta {
list-style: none;
}

ul.post-meta span.post-meta-key {
font-weight: bold;
}

.credit {
clear:both;
color: #666;
font-size: 10px;
padding: 50px 0 0 0;
margin: 0 0 20px 0;
text-align: left;
}

.credit a:link, .credit a:hover {
color: #666;
}

.feedback {
color: #666;
text-align: right;
font-size:11px;
clear: both;
}

.meta {
font-size: 10px;
}

.meta2 {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-weight: normal;
letter-spacing: -1.5px;
}

.meta2 a {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-weight: normal;
letter-spacing: -1.5px;
}

.meta li, ul.post-meta li {
display: inline;
}

.meta ul {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}

.entry img {
max-width:600px;
}

#comments{

padding-top:18px;

}

.commentby {
padding-bottom:8px;
}

#postcomment{
margin-top:24px;

}

.meta, .meta a {
color: #808080;
font-weight: normal;
letter-spacing: 0;
}

.meta2, .meta2 a {
color: #ffffff;
font-weight: normal;
letter-spacing: 0;
}

.storytitle {
margin: 0;
}

.storytitle a {
text-decoration: none;
}

.storycontent a {
text-decoration: none;
color: #ffffff;
font-background: #626262;
background: #626262;
}

.storycontent a:hover {
text-decoration: none;

}

.storycontent {
margin-bottom:10px;
margin-top:0px;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background: #fff;
border: 1px solid #ccc;
padding: 3px;
}

#commentform textarea {
width: 98%;
}

#commentlist li ul {
font-size: 11px;
list-style-type: none;
color: #666;
}

#content {
float: left;
width:600px;

}

.columntitles {
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -1.5px;
font-weight: bold;
font-size: 14px;
}

#headwrap {
width:900px;
height: 150px;
padding: 0px;
}

#header {
font-family: helvetica, arial;
font-size: 50px;
color: black;
font-weight: bold;
max-width: 250px;
line-height: 80%;
}

#simpost {
font-family: helvetica, arial;
font-size: 12px;
color: black;
font-weight: normal;
float: left;
background: #fff;
padding:5px 0 5px 0;
margin:0px 0 5px 0;

}

#simpost a {
font-family: helvetica, arial;
font-size: 9px;
color: #ffffff;
font-weight: normal;
font-background: #F48282;
background: #F48282;
}

#header a {
color: #000000;
text-decoration: none;
}

#header a:hover {
text-decoration: none;
}

#header input#s {
width: 60%;
background: #eee;
border: 1px solid #999;
color: #000;

}

#header ul {
color: #ccc;
list-style-type: none;
margin: 0;
padding-left: 3px;
text-transform: lowercase;
weight: bold;
}

#header h2 {
font-weight: normal;
margin:0;
padding:0;
font-size: 11px;

}

#header ul li {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 10px;
}

#header ul ul {
font-variant: normal;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}

#header ul ul li {
border: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 0;
padding: 0;
padding-left: 3px;
}

#header ul ul li a {
color: #000;
text-decoration: none;
}

#header ul ul li a:hover {
border-bottom: 1px solid #809080;
}

#header ul ul ul.children {
font-size: 16px;
padding-left: 3px;
}

#sidebar {
background: #fff;
padding: 10px 5px 5px 5px;
float: right;
width: 170px;
}

#sidebar a {
text-decoration: none;
color: #000000;
font-weight: normal;
font-size: 11px;
}

#sidebar a:hover {
text-decoration: none;
color: #6fec98;
}

#sidebar form {
margin: 0 0 0 0px;
text-decoration: none;
color: #000000;
font-weight: bold;
font-size: 11px;
}

#sidebar input#s {
width: 60%;
background: #fff;
border: 1px solid #000;
color: #000;

}

#sidebar ul {
color: #000000;
font-weight: bold;
font-size:12px;
list-style-type: none;
margin: 0;
padding-left: 3px;

}

#sidebar h2 {
font-weight: bold;
margin:0;
padding:0;
font-size: 12px;
color: #000000;

}

#sidebar ul li {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 8px;
padding-bottom: 10px;
font-weight: normal;
font-size: 11px;
width: 160px;
list-style-type: none;
}

#sidebar ul ul li {
border: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 40%;
padding: 0;
font-size: 12px;
font-weight: normal;
list-style-type: none;
}

#wp-calendar {
empty-cells: show;
font-size: 11px;
margin: 0;
width: 90%;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
text-decoration: none;
}

#wp-calendar a:hover {
background: #ccc;
color: #333;
}

#wp-calendar caption {
color: #000;
text-align: left;
font-weight: normal;

}

#wp-calendar td {
color: #999;
padding: 2px 0;
text-align: center;
}

#wp-calendar td.pad:hover {
background: #fff;
}

#wp-calendar td:hover, #wp-calendar #today {
background: #eee;
color: #666;
}

#wp-calendar th {
font-weight: normal;
text-transform: capitalize;
color: #999;

}

#desc {
font-family: georgia, sans-serif;
font-style: italic;
float: left;
font-size: 12px;
margin-top:20px;

}
#desc a:link, #desc a:visited {
display: inline;
background-color: #fff;
color: #666;
text-decoration: none;
}
#desc a:hover {
background-color: #eee;
color: #666;
text-decoration: none;
}
#desc a:active {
background-color: #fff;
}

ib {
font-family: georgia, sans-serif;
font-style: italic;
font-size: 12px;
}
Peter Boosten
(@pboosten)

15 years, 6 months ago
Oke, I’ve copied the relevant stuff:
```
<div id="headwrap">
  <div id="header">
    <?php bloginfo('name'); ?>
  </div>
  <div id="desc">
    <?php bloginfo('description'); ?>
  </div>
</div>
```
This is where your header text is. In the source above seems to be something missing (second line below):
```
<div id="header">
/"><?php bloginfo('name'); ?>
</div>
```
So next time please use pastebin for showing code.

What you could do is attach a background image to #headwrap or #header, and move the text out of the way (not delete it, but just make it not visible).

There’s one strange thing I noted about your css (well, actually more than one): your all enclosing #rap div has a width of 800px, while the header (in the #rap div) is 900px.

Change this:
```
#headwrap {
  ?width:900px;
  ?height: 150px;
  ?padding: 0px;
?}
```
to this
```
#headwrap {
  background: transparent url(images/yourimage.jpg) no-repeat scroll 0 0;
?}
```
and add text-indent: -9999px; to both #desc and #header

Then add the link:
```
<div id="headwrap">
  <div id="header">
    <a href="https://your-site.goed.here"><?php bloginfo('name'); ?></a>
  </div>
  <div id="desc">
    <?php bloginfo('description'); ?>
  </div>
</div>
```
And change this:
```
#header a {
color: #000000;
text-decoration: none;
}
```
to this
```
#header a {
color: #000000;
text-decoration: none;
display: block
}
```
It’s already late, and maybe I missed something, so apologies in advance, but I think this should get you going.

Peter
Thread Starter hussi
(@hussi)

15 years, 6 months ago

Dear Peter,
thank you very much for your help!
Unfortunally I go on hollyday today, so I have no time for outworking.
After the break i will change the code and send you information about success.

Stefan

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘theme aav1: replace blogtitle with logo/picture’ is closed to new replies.

theme aav1: replace blogtitle with logo/picture

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics