Adding a logo to the left of the Title/Tagline

[mordecai98]

I am trying to help someone with their site, jerusalemsummercamp.com  I have installed Weaver Xtreme.  I want to have the logo appear in the upper left corner of all pages, next to the Title and tagline.  I think the best option would be to move the title and tag line over a bit, and then place the logo to the left.  I don’t have the Pro version. Would that make a difference?  If I need to change any code, please tell me where to find it.  Thanks!

[scrambler]

the easiest way to do that would be to get the Weaver Xtreme “Plus” plugin which offesr two built in options to do that. The Site logo HTML in the Title / tagline options meant to do exactly what you want. Or eventually use the header widget Area with two widgets of different sizes, one for the logo and one for the Title Tagline.

The benefit of the header widget area is that you can define a different layout on phones where you may want the logo and the Title / tagline to stack instead of being besides each other.

Without the “Plus” plugin the best would probably be to hide the default Title; and tagline with the hide option found in Main options > Header > Title / Tagline section.

Then use a single widget in the header widget area, and insert the logo there floated left, with the title tagline using the title tagline shortcode (found in the Add-Ons page)

It would look something like

<img src=”LogoImageUrl” style=”float:left;”>[site_title matchtheme=true] [site_tagline matchtheme=true]

[mordecai98]

Thanks so much!  I bought Xtreme Plus and have added the logo.  I’d like it moved to the left of the title/tagline text, and I’d like to be smaller and clickable. What is the correct way to do that?

[scrambler]

Are you wanting to keep the logo that big. If so, you need to elaborate on what behavior you want for mobile.

Are you going to want to keep the logo that big on mobile, if so you would need to stack the logo and the site title tagline, so which one should be on top.

Or do you want to have the logo shrink on mobile to keep it side by side with the title tagline?

[mordecai98]

I’d like it to be the same height as the title and tagline.  I have now made it smaller.

[scrambler]

For side by side all the time with shrinking logo you would

Decide on a %width for the logo, like 15%

Put the rule below in the Title / tagline Area BG CSS+ box to reflect it
#site-logo {width:15%;}

put that value plus some in the X position box of the title and tagline, like 17 in Title X pos and 19 in Tagline X pos

put a value like 4 in the tagline Y pos box

Add the rule below in both the Site title BG CSS+ box AND the tagline BG CSS+ box
{position:absolute;}

[Author]

Posts