Need Help Adding Logo To Metro Theme

[mezzers]

Hi there,

I have checked all of the other Metro themes regarding this problem, but I still cannot get a logo showing properly.

I am not technical in any way, so I would be really grateful if all replies would as detailed and as clear as possible.

I want to add a logo to my new site which I am building using the Metro theme. And I just want the logo to show on the left hand side of the header, I don't want it to be the whole header.

When I go to Appearance -> Header and try to upload an image, it goes the whole width of the header but only showing a really small piece of it.

Even if I re-size the image, I still get the exact same problem, and when I resize, the cropping tool seems to get really small and will only allow me to crop and publish a tiny piece of the logo, but again putting it across the whole header which is not what I want to go. I want it as a logo.

You can see what is happening here at my site which is still getting built: http://www.thereviewsquad.com

I would appreciate any help anyone can provide. I cannot believe that uploading a logo is this difficult for a theme.

Thanks a million in advance!

Mary

[wp guy]

Have you tried using this: http://wordpress.org/extend/plugins/genesis-simple-headers/

[mezzers]

Thank you for your quick reply - I appreciate it.

I had not tried that, but I installed it and tried it, and it did not help at all. I still get the exact same problem.

It is really frustrating not being able to doing something as simple as add a logo and I would prefer not to have to get another theme, as I like this theme, plus I have spent money on it. There should be instructions in the tutorials explaining how to upload a logo.

Any other thoughts on how I can get the logo to work? Also, does anyone know what size the logo should be for it to work with the Metro theme?

Appreciate any help that anyone can give as this is really holding me back. I don't want to move on with the theme unless I can get this working.

Mary

[wp guy]

How 'bout a cheat. Just put your logo on a transparent background that's the entire length of the header, then upload that. And since your header is white, you could just put your logo in a white background that's the same size as your header and upload that.

[mezzers]

I really want to have the logo in the left hand side of the header. I don't want the logo to go the entire length of the header as it would look really tacky. I want the website to look professional.

Mary

[wp guy]

Ok, follow me here:

Open your photo editing program and create a white background that's the length and height of your header. Then place the logo on that background wherever you want it. Save - upload.

[Charlie]

Mary, no need to buy another theme!

Try following the steps in this tutorial: http://www.wpmayor.com/code/how-to-set-your-own-logo-in-a-genesis-child-theme/

If you get stuck, come back here and I'll be happy to help.

[mezzers]

Hi Charlie,

Thank you for the steps.

The only thing is that I don't have access to Cpanel or anything like that, because my site is hosted by Web Synthesis. Before signing up for that, I explained I would be using Genesis and the Metro Theme and was assured that they wouldn't be any problems.

I have commented out the lines you suggested. I uploaded the logo as an image in WordPress so it is in the media library, edited the header line you mentioned but nothing at all is showing, I just get a blank white space.

I can go through support in Web Synthesis and ask if they can upload the logo, but first I need to know what size the Metro theme expects the logo to be? Of course that is assuming they will upload the file for me.

If there any other workaround that I could try?

Thanks Charlie for your help. I appreciate it.

Mary

[Charlie]

Let's try another tack.

1. Uncomment out the lines I suggested.

2. How big is your image? Let's say your logo was 140 (high) x 100 (wide), you'd substitute these values into the code, like below:

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
 'flex-height' => true,
 'height' => 100,
 'width' => 140
) );

3. Then, go to Appearance > Header and upload your file.

That should do it.

But, you shouldn't really be editing your functions.php directly through your WordPress dashboard if you don't have FTP access setup because if you make a coding mistake and take your site down, you won't be able to re-upload a working functions.php

On the Synthesis FAQ page, it explains how to get your FTP access details: http://websynthesis.com/faqs/

[mezzers]

Hi Charlie,

Thank you so much for all the help.

1. Will do.

2. The logo size seems to be 734 x 345 which I am assuming is way too big. I have sent an email to the designer and asked for it to be resized. I told them the size of the header and where I want to put it in the header so hopefully I will get that back fairly quickly.

Thank you for the code Charlie. I will try that with the logo as it and can edit it when I get the resized image, just to make sure that it works ok.

And thank you for finding the details on FTP access on Synthesis.

If I make those coding changes, if the theme or Genesis is ever updated, would I lose those changes and always have to keep implementing them?

Thanks again Charlie for your wonderful patience and help! It is greatly appreciated! 🙂

Mary

[Charlie]

That's ok.

Sounds like the right thing to do re the logo.

No you won't lose these changes when you update. You're making them to a child theme (metro). It's changes to the parent theme (genesis) which won't survive the update process (but you're not making changes there, so you're good!).

[mezzers]

Thanks Charlie!

My site has gone down so I have put a support call into Synthesis. I was saving the functions.php file at the time so I don't know if it was that or something else.

Will try your suggestions again when the site is back up and really appreciate all of your help.

all the best,

Mary

[mezzers]

Hi Charlie,

Got the site back up and tried those changes. Only a small part of the logo still shows, so still not working. At a loss to understand why the logo cannot be added to the Metro theme easily. It is very frustrating.

Is there anyone who has successfully managed to install a logo for the Metro theme? Would you mind please explaining how you did it?

I would really appreciate it.

Mary

[mezzers]

Just wanted to say that this has now been resolved. Thank you to everyone who helped and offered advice and guidance.

And a massive thank you to the Studiopress Support team and the Web Synthesis Support team who responded quickly and explained what

I needed to do.

So glad I was able to stay with the Metro theme as I really love it!

 

Mary

[triggers]

I have had a similar problem with the Metro theme. By playing with the size I was able to get the logo in and it didn't cut it off. However, i want to change the background behind the Logo/Header, Posts, Sidebars back to white. I'll have to change the logo's background to white as well and have to reupload it.  Here is a link to my blog to see what I'm talking about: http://blog.contenttriggers.com

Questions:

1. What is the best way to bring this logo back in after i change the background to white so its repeatable?
Currently the size is 600x96(H)P.

2. The system doesn't resize the logo for responsive. Should i follow the instruction here http://www.wpmayor.com/code/how-to-set-your-own-logo-in-a-genesis-child-theme/   and upload a new size -See below

Genesis child themes include breakpoints in their CSS which change the way things are displayed at certain sizes. So lets say that we wanted our logo centered on any screen size below 768px.

We need to find the styles pertaining to this breakpoint, and add our new header style, as follows:

1
2
3

@media only screen and (max-width: 767px) {
    #header { background: url("images/logo.png") center no-repeat; }
}

You can see that I’ve centered the logo instead of left aligned it. You can also use a different logo for lower resolutions, as follows:

1
2
3

@media only screen and (max-width: 767px) {
    #header { background: url("images/logo-mobile.png") center no-repeat; }
}

3. How do I change the color of the outer background (outside the content area ) to the cream #F5F1E5?

4. One more thing while Im there, Can move the titles of the posts Above the Images on the Front Pages?

Thanks

[Author]

Posts