Why is my logo not showing?

My home page is here: www.ibusinessbuzz.co.uk/

I am trying to integrate my forum header with the home page, which is built with WordPress.

The forum home page is here: www.ibusinessbuzz.co.uk/forums/

For some reason, the text is shown rather than the logo. Why is that?

Also, I added the WordPress stylesheet to the forum page and its altered a lot of the text on there too. I only want it to affect the very top part, with the WordPress style navigation. Any ideas?

Thanks,

Jon

It shows for me, on the front site and the forum, or do you mean in the white area on the forum (above the blue vBulletin bar).

If thats what you mean, the code is:


<div id="header-wrap">
<header id="header" role="banner">
<div id="header-left">
<p id="title"><a href="http://www.ibusinessbuzz.co.uk/" title="iBusinessBuzz">iBusinessBuzz</a></p><h1 id="tagline">UK Business News, Articles and Discussion</h1></div>
<div id="header-right">
</div>
</header>
</div>

That a tag would want an image inside it rather than iBusinessBuzz or some CSS that sets the image as a background image.

Like so:


.title a
{
   background-image: url('url_to_image');
   height: 30px;
   width: 100px;
}

The width and height obviously set to whatever height and width you need.

If you want a rollover effect, create an image map (normal and hover state), with the normal image and the hover state below it. Then use background-position to move it on rollover in CSS.

What I mean is that I copied the source code from the WordPress page for that logo section, but it has come out as text rather than an image. So I am trying to work out why that is.

I get that, but the logo shows on the front site and in the blue area on the forum. However on the forum, above the blue area, you have text; I gave you the answer to that.

either change the text in the A tag to an image tag OR use CSS (as per my snippet) which without looking deeper I believe is what wordpress is probably doing.

So either:


<p id="title"><a href="http://www.ibusinessbuzz.co.uk/" title="iBusinessBuzz"><img src="URL To image" alt="iBusinessBuzz"/></a></p>

or edit your css


#title a
{
   background-image: url('url_to_image');
   height: 30px;
   width: 100px;
   text-indent: -3000px
}

Thanks for your answer. My question is really why the same code is showing text on the forum page but an image on the WordPress homepage.

Ah…

Well that’s likely because Wordpress is using CSS to display the logo image and vBulletin doesn’t have the CSS class.

So Wordpress has one CSS file, which is for Wordpress and vBulletin has it’s own CSS file; so any Wordpress CSS classes won’t display as they will on Wordpress when the HTML is inserted into vBulletin templates; because the CSS classes won’t exist in vBulletin; they are application specific.

I may have worded that badly, does it make sense?

As a solution, you could bring the Wordpress classes over to vBulletn; but you’ll need to know what the CSS is doing else you could get conflicts and knackering of layouts.

Personally I would just introduce a custom CSS class to vBulletin’s CSS like I showed above.

Yes Richard, you are making perfect sense. So in an ideal world I could just use the css from WordPress on the vBulletin page. However, in reality there is likely to be conflicts. e.g. paragraph font might be size 14px on WordPress and 16px on vBulletin. Yes?

So, the solution is to create a third css stylesheet (wpvb.css), that just takes the relevant elements that you need from the WordPress css yet doesn’t conflict with the vBulletin css.

I will try that and see if I can come up with a solution! Thank you for your help.

You’re correct.

However, even if you put your css from WP into a separate file it will not prevent conflict. The conflicts you mention are correct, same class or tag existing on both WP and vBulletin but with different styles.

So you would want to tweak the HTML and CSS to resolve any conflicts if they appear. You also wouldn’t bring the entire WP CSS across, just the bits you need for your header.

I’m on it!

I’m getting close! I’ve substituted much of the css code into wpvbdynamic.css, so all the formatting looks good and doesn’t intefere with vbulletin. The last bit I am struggling on is the logo image, as before.

I notice this line of code in the Wordpress html:

<body class="home blog windows firefox ff1 home-layout child_home logo-image ez-home-1 home-top-single ez-home-sidebar">

Could just adding class=“logo-image” be enough to set the logo image or am I missing something else?

It has this relevant css if that helps:

.logo-image #header #header-left {

    background: url( http://www.ibusinessbuzz.co.uk/wp-content/themes/dynamik/css/images/buzzlogov5.gif ) left top no-repeat;

    margin: 10px 0 0 0px;

}

.logo-image #header-left, .logo-image #header-left #title, .logo-image #header-left #title a {

    width: 370px;

    height: 95px;

    padding: 0;

    float: left;

    display: block; 

    text-indent: -9999px;

    overflow: hidden;

}

All sorted now. I had to put <body class=“logo-image”>

Thanks for all the help guys.