After Flynn's fabulous help with page specific header images and titles, I have one last page specific question:

Is there any way I can use a CSS insert to have a different logo on one page?

Cheers,

Drew

You could turn the logo off altogether (At A. Theme Options -> Header -> Show Logo Image?) and work with background images

td.logoarea-logo {
width: 80px;  /* setting a global width for that cell on all pages */
background: url(/wp-content/themes/atahualpa/images/defaultlogo.gif);
}
body#body-page-XXX td.logoarea-logo {
background: url(/wp-content/themes/atahualpa/images/otherlogo.gif);
}

XXX = ID of that page

The logo wouldn't be clickable though, also no ALT tag

Hi Flynn,

Thanks for this.

Where would I insert the code? In the HTML Inserts: Header section or in the CSS Inserts?

Cheers,

Drew

Just to clarify,

I've tried it in the HTML box and I get the problem you see at the site: http://wordpress.carmenview.com/

The HTML is read as text and inserted at the top of the page.

Cheers,

Drew

You'd insert it at HTML/CSS Inserts -> CSS Insert

Hi Flynn,

Did as you suggested.

I left the logo field blank and inserted the following code in the CSS insert field:

td.logoarea-logo {
width: 300px; 
background: url(/wp-content/themes/atahualpa332/images/CARMEN_Logo_Band_final.png) no-repeat left;
}
body#body-page-5 td.logoarea-logo {
width: 300px;
background: url(/wp-content/themes/atahualpa332/images/CARMENU_Logo_Band_final.png) no-repeat left;
}

The Logo area is now blank on all pages with no background.

If I leave a logo activated, obviously it appears on all pages but it also appears on page 5 sitting above the background shown in the CSS code above.

Any idea what gives?

Drew

P.S Just clearing a donation with the bosses

Hi All,

Just wanted to let you know that I have partially solved the issue of separate logos for each page using the following code:

table#logoarea {
background: url(/wp-content/themes/atahualpa332/images/XXXXXXX.jpg) no-repeat left;
}

body#body-page-5 table#logoarea {
background: url(/wp-content/themes/atahualpa332/images/XXXXXXX.jpg) no-repeat left;
}

The only problem I now have is that in Mac Firefox and IE 8, the background/logo doesn't show. In all other browsers it does.

Any ideas?

Cheers,

Drew

The table cells <TD>...</TD> get removed once their content (logo, blog title) gets disabled, I had not thought about that. Since you disabled the search box and the RSS button as well, you could just put

PHP Code:

<a id="mylogo" href="<?php echo get_option('siteurl'); ?>/">&nbsp;</a>

into header.php, right above

PHP Code:

<?php bfa_header_config($bfa_ata['configure_header']); ?>

And then use a CSS Insert

a#mylogo {
display: block;
border: 0;
width: XXX; /* width of logo */
height: YYY; /* height of logo */
background: url(/wp-content/themes/atahualpa334/images/mylogo.gif);
}

body#body-page-5 a#mylogo {
background: url(/wp-content/themes/atahualpa334/images/mylogo-5.gif);
}

body#body-page-29 a#mylogo {
 background: url(/wp-content/themes/atahualpa334/images/mylogo-29.gif);
 }

Hey Flynn,

Not wanting to sound idiotic, but where should I be inserting this? In the CSS Inserts box?

Cheers,

Drew

For your images not showing, you can always try absolute links (IE, the full image URL starting with "http://yousite.com/"

That seems to be a necessity with background images.

I noticed when I upgraded to the latest version of the theme, it did re-write all my image URLS to the new directory - very nice, Flynn!! I was dreading all the hand-coding I thought I'd be doing....

Hey mcphoto,

Thanks for the input. I changed the links to absolute but no luck.

I did, however, have luck using a validation plug-in for firefox that confirms what Flynn has mentioned about the <td> tag not being present.

When the plugin simulates the fix, the logos appear. So now I just need to work out how to insert this line of HTML into the site...

Drew

I updated post #8

Hi Flynn,

I updated header.php as follows based on your suggestion in number 8:

PHP Code:

</colgroup> 
    <tr>

        <!-- Header -->
        <td id="header" colspan="<?php echo $bfa_ata['cols']; ?>">
        <a*id="mylogo"*href="<?php*echo*get_option('siteurl');*?>/">&nbsp;</a>
        <?php bfa_header_config($bfa_ata['configure_header']); ?>

        </td>
        <!-- / Header -->

    </tr>

and now I get this error when I try to load the page:

Fatal error: Call to undefined function php echo get_option() in /home/httpd/carmen/wordpress.carmenview.com/wordpress/wp-content/themes/atahualpa333/header.php on line 859

I have no idea what I'm doing wrong here...

I also updated the CSS insert, but the PHP problem is the more serious :P

Drew

Hi Flynn,

Scrap that last post, I managed to get the PHP edit and the CSS inserts to work in everything but Internet Explorer. Any ideas why IE is being so difficult here? (I have direct links to the image files I think)

I also have a problem with the styling of the header area now: there's a lot of white space under the logo and not enough on top. Where should I be looking to edit this?

Cheers,

Drew

Answering my own questions faster than you poor fellows can respond.

The trick for removing the space was to take out the %logo code in the header configuration page. Styling was simply a case of styling the CSS insert.

Still got the IE problem tho...

Try putting a space after the closing bracket of the image url, in your CSS Insert

ARMEN-Logo-Band-final.jpg)no-repeat left