add logo to copyblogger theme

[dominick42]

I am needing to add a logo in header to Genesis Copyblogger theme. Can anyone help?

Site: http://www.mywebsitetraffictips.com

[TishaOehmen]

I'm sorry -- I don't have a copy of the theme readily at hand, however, it's pretty easy to manage in most Genesis themes. Just follow these steps:

 

In the Genesis settings in the admin panel, change from a "text" logo to an "image" logo.
Then about line 225 of the style sheet, add the following lines:

 

<code>#title-area {

background: url(images/xxxx.png) no-repeat center top;

min-height: 100px;

}</code>

Put your logo image in the images folder of your child theme.
If you decide you want the logo to be left-aligned, instead of centered, just use "left" instead of "center" on the css above.
If the image is more or less than 100px tall -- adjust the code above to reflect the full height of the logo. (this may cause additional styling to be necessary on the #header background.
On line 181 of the style sheet, set the area to read:

<code>#title a, #title a:hover {
color: white;

     display: none;
text-decoration: none;

}</code>

and on line 186, the style sheet should read:

<code>#description {
color: #999;

display: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 14px;
font-style: italic;
}</code>

Let me know if you have any trouble.

---

Tisha Oehmen, Paradux Media Group
Twitter: @TishaOehmen

[dominick42]

Tisha,

Thanks for the code. I do not have a line counter in the style shhet editor so am not sure where to put your code? Below is my styleshhet starting near the current title area. Where do I put your  code?

My Stylesheet

#header p {  color: #fff; }

#title-area {  float: left;  overflow: hidden;  padding: 20px 0 0;  width: 400px; }

#title {  font-size: 36px;  line-height: 42px;  margin: 0; }

#title a, #title a:hover {  color: #fff;  text-decoration: none; }

#description {  color: #999;  font-family: Georgia, Times, 'Times New

 

Thank You,

Sam Goble

[TishaOehmen]

Instead of: #title-area {  float: left;  overflow: hidden;  padding: 20px 0 0;  width: 400px; } make it say #title-area {  background: url(images/xxxx.png) no-repeat center top; float: left;  overflow: hidden;  min-height: 100px; padding: 20px 0 0;  width: 100%; }

And instead of  #title {  font-size: 36px;  line-height: 42px;  margin: 0; } put in #title {  display: none; font-size: 36px;  line-height: 42px;  margin: 0; }

And instead of #description {  color: #999;  font-family: Georgia, Times, ‘Times New.... make it say #description {  color: #999;  display: none; font-family: Georgia, Times, ‘Times New....

that should do it. You'll also really like http://notepad-plus-plus.org/ as an editor -- it's got line counts and it's free. 🙂

---

Tisha Oehmen, Paradux Media Group
Twitter: @TishaOehmen

[dominick42]

Tisha,

Ok, it's all good. Thank you for your help.

Sam

 

 

[Author]

Posts