Page Specific Logos

drewpasmith · #1 Apr 8, 2009, 01:50 AM

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

Flynn · #2 Apr 8, 2009, 05:50 PM

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

HTML Code:

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

drewpasmith · #3 Apr 9, 2009, 06:16 AM

Hi Flynn,

Thanks for this.

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

Cheers,

Drew

drewpasmith · #4 Apr 9, 2009, 06:30 AM

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

Flynn · #5 Apr 9, 2009, 01:57 PM

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

drewpasmith · #6 Apr 15, 2009, 02:47 AM

Hi Flynn,

Did as you suggested.

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

Code:

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

drewpasmith · #7 May 4, 2009, 01:01 AM

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:

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