Community Forums › Forums › Archived Forums › Design Tips and Tricks › add logo to copyblogger theme
Tagged: copyblogger, css styling, header
- This topic has 4 replies, 2 voices, and was last updated 11 years, 2 months ago by dominick42.
-
AuthorPosts
-
December 31, 2012 at 12:13 pm #8612dominick42Member
I am needing to add a logo in header to Genesis Copyblogger theme. Can anyone help?
December 31, 2012 at 11:46 pm #8682TishaOehmenParticipantI'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: @TishaOehmenJanuary 1, 2013 at 12:53 pm #8768dominick42MemberTisha,
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
January 1, 2013 at 8:58 pm #8880TishaOehmenParticipantInstead 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: @TishaOehmenJanuary 2, 2013 at 1:05 pm #8994dominick42MemberTisha,
Ok, it's all good. Thank you for your help.
Sam
-
AuthorPosts
- The topic ‘add logo to copyblogger theme’ is closed to new replies.