WordPress.org

Ready to get started?Download WordPress

Forums

theme aav1: replace blogtitle with logo/picture (5 posts)

  1. hussi
    Member
    Posted 4 years 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!

  2. Peter Boosten
    Member
    Posted 4 years 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

  3. hussi
    Member
    Posted 4 years 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" "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'); ?>" />
    <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: http://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:
    http://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;
    }

  4. Peter Boosten
    Member
    Posted 4 years 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="http://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

  5. hussi
    Member
    Posted 4 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic