[John]

When I have other things in my header besides the logo, I add those with text and/or other widgets and make adjustments with CSS. But I still use the logo method as described in the tutorial that Susan mentioned to properly add a logo to the header area.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Do you have a link to the actual site you're working on?

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Interesting. Are you using version 1 of that theme?

Regardless of what version it is, you can add the line anywhere before the final ?>

To be more specific, add it after this line in your code:

add_theme_support( 'genesis-connect-woocommerce' );

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Richard,

W3 Total Cache isn't my plugin - I just use and recommend it. That's a strange request from your host...normally a caching plugin will or should greatly reduce using resources on a server. Perhaps the caching plugin you were using had some problems.

Anyhow, the summary of my blog post was that you need to edit your functions.php file to properly add a new version number to your style.css. In fact, the way Genesis works, I'm pretty sure that's the only way you'd be able to do it without doing some serious hacking.

It looks like you're using the original Lifestyle theme and not Lifestyle Pro, so you'd need to look in your functions.php file for this code:

/** Child theme (do not remove) */
define( 'CHILD_THEME_NAME', 'Lifestyle Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/lifestyle' );

and add this line after that:

define( 'CHILD_THEME_VERSION', '2.0.20131011' );

I added the date to the version number, which is what I recommended in my blog post, but it could be anything as long as it's different than 2.0.1, which is what Genesis is currently adding to your style.css file name.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hey Richard,

Ironically I was just dealing with this issue myself on some of my client sites, and worked out a solution earlier this week that I explain in this blog post (published today): Force browser cache to reload CSS: Genesis, WordPress, W3 Total Cache

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Protospace,

I'm using that logo replacement method on several sites that are running the Executive theme and it works great. What isn't working for you?

RE theme updates, those are few and very far between, and a theme isn't like WordPress - you don't have to update if you don't want to.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

notfarnow,

It's a CSS issue, which I wasn't able to completely address in that tutorial without it becoming book-length.

Your #title-area is switching to width: 100%; when your browser hits 1023px and below, which pushes the widget area underneath the logo. So if you remove #title-area, from line 2123 in your style.css you'll be moving in the right direction, though you may need to make some further tweaks to get it just right.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

handig,

What happened when you tried that tutorial?

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Lee,

How to replace the StudioPress background header image with a real image logo

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

The plugin is really very lightweight, but if you're truly against using a plugin you could just download it, extract the appropriate code, and add it to your functions.php file or wherever you put your custom code in your website.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hey Bill,

I would make the following changes to your style.css:

Delete or comment out line 222 completely:
.header-image #title-area, .header-image #title, .header-image #title a {float: left;}

Same with line 187:
#title {...}

And in line 178, #title-area, I would comment out the following:

min-height: 100px;
width: 350 px;

and I would probably change the padding in line 178 to:

padding: 15px 0 0 15px;

to add some padding to the left of your logo image. That one's my personal opinion, as it looks like it could use some room on the left side of the logo...

Otherwise, nice job!

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Gretchen,

I just left a comment on your post in the WordPress forums, but I'll add one here too for anyone else with this issue.

Earlier this year I wrote a blog post about fixing the Metro theme widget titles, and created a plugin that makes it an easy fix: Metro Theme Widget Titles.

As a bonus, the latest version of the plugin restores the new Metro Pro widget titles to the original Metro look.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

This plugin should restore the Metro Pro widget titles, comment title, and comment reply title to the original Metro look: Metro Theme Widget Titles

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Nice work, John!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

I still think that following the image logo tutorial is your best choice here. I personally don't use the default StudioPress background header image stuff because I think there's a better way to do it.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

I would say that the SEO concerns have been addressed. I've run several sites through SEO "checkers" and they all passed.

After adding your logo image following the tutorial, you should be able to add the background style you now have in .site-title a to .site-header, for example, and your logo image should then appear on top of that, and independent from the header background.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

This should help: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo

If you follow this method you can still add a header background image with CSS that would be independent of your logo image.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hey Olivier,

Glad it all worked out for you, and thanks for adding the tips and suggestions for switching up the code. I agree, there is a lot of power and extensability in the Genesis framework. Once you get through the learning curve, nearly anything is possible!

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Olivier,

I originally played around with placing the menu below the footer, like you have it now, but I thought it was more user-friendly to have it just after the content. Plus, for menus that are shorter than the device screen they appear at the top of the screen when you click the Menu link, instead of somewhere lower on the screen.

For change #1, the menu link is behind your slider, and you'll need to play with that CSS a bit to bring it out. A better solution might be to leave the action hook as it was, but change the priority from 6 to something else, like 20. That way, I think, it would show up after your search widget and you could float it to the right of that.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts