You should have provided a mockup to precisely show where you want the logo. But generally that should easily be done. I tried that with a demo installation of Cloud.

I downsized copy of the Cloud-Logo and put that here as seen from the site's root: images/logo.png

Then I added the CSS to the file templates/yoo_cloud/css/custom.css. You might alternatively set up a new Warp6 Style for this if you want.

To put the logo inside the menu bar I used this CSS:

#menu {  
padding-left: 160px;  
background: url(../images/logo.png) no-repeat;  
}

This is a screenshot of the result:

To put the logo to the left of the menu bar, outside the main area I used this CSS:

#menu {  
margin-left:-170px;  
padding-left: 170px;  
background: url(../images/logo.png) no-repeat;  
}

This is a screenshot of the result:

The screenshots still show the default logo in the header but you might of course remove that.

Is there any way to have the logo replace the home menu item in the menubar. (like apple)?

Hi Michael,

Great news and thanks a lot for your detailed answer.
I still hesitate between having the logo in the menu bar (your example 1) or on the left but pushing the menu bar further to the right.
In this case : logo aligned on the left limit and menu bar moved to the right, would it be possible ?

Thanks

Pushing the bar (including the dark background images) to the right and having the logo to the right of it?

That would be more difficult. You will probably have to add a <div> to the template.php for your style.

Just having the menu bar begin more to the right would work with this

#menubar {  
margin-left: 160px;  
}

But the logo then cannot be done as a background image for the menubar or menu anymore. It might be "shifted" there with an absolute positioning. It would depend on your final layout ... generally that should be possible.

thanks a lot for your detailed answer.

If you feel your question was answered, please click the checkmark next to the answer that did it.

Thank you

Thanks a lot, I'll try to iterate different options.

I was able to do it by creating a new module custom html, placing the logo image into the custom html and defining the position as "logo". It appeared above the menu bar.

Hello,

my yoo_nano_wp/css/custom.css ist emty. Where can I finde the settings to reduce the logo space.