Ready to get started?Download WordPress


Equilibrium theme help please (8 posts)

  1. dancin15
    Posted 4 years ago #

    Hi all,

    I am currently using the WordPress theme Equilibrium (http://madebyon.com/equilibrium-wordpress-theme/)

    I am wanting to change the header from text, to my own image and found what I thought was the solution. Here:
    - Open “style.css”
    - Search:
    “h1.logo a{float:left; font-size:2.6em; font-weight:bold; color:#000; text-transform:uppercase; text-decoration:none}”
    - Change to:
    h1.logo a{float:left; font-size:2.6em; font-weight:bold; color:#000; text-transform:uppercase; text-decoration:none; background-image:[IMAGE-PATH]}
    Changing “[IMAGE-PATH]” to the image path.
    However, I added my image path as a test, it looked like:

    h1.logo a{float:left; font-size:2.6em; font-weight:bold; color:#000; text-transform:uppercase; text-decoration:none; background-image:http://dancingcactuar.com/index/wp-content/uploads/2009/09/Untitled-45-copy.jpg}

    I hit save, and nothing changed (www.dancingcactuar.com/index)

    So, I thought I had found a second solution here (http://shalomimages.com/2009/03/how-to-place-a-graphic-logo-at-the-top-of-your-blog/)

    I went into my header.php, and found the "<h1 class=", and after the “=”, pasted the following without deleting anything else:

    ”><img src=” http://dancingcactuar.com/index/wp-content/uploads/2009/09/Untitled-45-copy.jpg” alt=”" />

    The total line of code then looked like (I have placed in bold for emphasis on the line I added!):

    <h1 class=”><img src=” http://dancingcactuar.com/index/wp-content/uploads/2009/09/Untitled-45-copy.jpg” alt=”" />
    "logo">/"><?php bloginfo('name'); ?></h1>
                            <ul id="nav">
                            <?php wp_list_pages('title_li='); ?>

    Either way, this has still not worked and I am at a loss. Does anyone have any ideas?:(

    Thank you!

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    Try changing:

    #top {


    #top {
    background:transparent url(http://dancingcactuar.com/index/wp-content/uploads/2009/09/Untitled-45-copy.jpg) no-repeat scroll left top;

    in style.css.

    However, I'd guess that you might want to re-think the size of that image. An image that was only 125px high - instead of 231px - might work better. In which case, try changing padding-bottom:131px; to padding-bottom:70px; and padding-top:100px; to padding-top:55px;

  3. dancin15
    Posted 4 years ago #

    Hi Esmi, thank you for your help!

    As you can see http://www.dancingcactuar.com I have uploaded a temporary banner (which works) using what you said:

    #top {background:transparent url(http://dancingcactuar.com/index/wp-content/uploads/2009/09/wordpress_banner.jpg) no-repeat scroll left top;

    However, is there any way to make it so the image is 'clickable' and when you click it, it returns you back to the home page?

    The dancingcactuar.com title text is set by the wordpress theme automatically, and I would need to delete that in the general settings tab of the admin panel. But obviously then, a user has nothing to return them to the home menu (and I certainly don't want that default text).

    Can you help?

  4. esmi
    Forum Moderator
    Posted 4 years ago #

  5. dancin15
    Posted 4 years ago #

    Hi thank you esmi, but it doesn't seem that appropriate and my physical coding knowledge is very limited at best.

    I keep referring to this site http://shalomimages.com/2009/03/how-to-place-a-graphic-logo-at-the-top-of-your-blog/

    As he has done what I want, yet I cannot get working what he is proposing :(

  6. esmi
    Forum Moderator
    Posted 4 years ago #

    What's inside the h1 tags in header.php? Can you make sure that you paste the code snippet between backticks (`) or use the [code] button to that we can see the code properly?

  7. dancin15
    Posted 4 years ago #

    This is the code of 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">

    <?php if (is_home()) { echo bloginfo('name');
    } elseif (is_404()) {
    echo '404 Not Found';
    } elseif (is_category()) {
    echo 'Category:'; wp_title('');
    } elseif (is_search()) {
    echo 'Search Results';
    } elseif ( is_day() || is_month() || is_year() ) {
    echo 'Archives:'; wp_title('');
    } else {
    echo wp_title('');

    <meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
    <meta name="description" content="<?php bloginfo('description') ?>" />
    <?php if(is_search()) { ?>
    <meta name="robots" content="noindex, nofollow" />
    <?php }?>

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie6.css" media="screen" />
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie7.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 if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>


    <div id="page-wrap">
    <div id="top">
    <h1 class="logo">/"><?php bloginfo('name'); ?></h1>
    <ul id="nav">
    <?php wp_list_pages('title_li='); ?>

    <div class="clear"></div>

    Is that what your after?

  8. wilburwolf
    Posted 3 years ago #

    I have had the same issue inserting a clickable header image into this theme. My work around was to simply add the following to the header.php straight after the <body> tag:

    <img src="http://www.differentstrokes.com.au/wp-content/uploads/differentstrokes_logo_web_2.jpg" alt="DIFFERENT STROKES ADELAIDE" width="800" height="156"

    then I changed the stylesheet (CSS) to:

    {margin-top:-65px; padding-bottom:35px;}

    #nav{float:right; margin-top:8.2em}

    you can check out the result on my site http://www.differentstrokes.com.au/

    hope this helps (^_^)

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.