How can I add logo to Ideation and Intent Theme?

mexicoretold · Member · Aug 30, 2013 at 3:24 am
Copy link

Add topic to favorites
HI, I would like to add a logo to my theme but when I add it as the header the menu goes above it. Is there anyway to change that and have the logo sit where the title text is?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 30, 2013 at 3:33 am
Copy link
Hi there, you can replace the existing textual site title with an image using the following CSS. Upload an image to your media library, get the URL of that image and then go to Appearance > Custom Design > CSS tab in your dashboard and add the following to your custom CSS below any existing CSS you have. Replace URL OF IMAGE between the double quote marks with the URL of your logo image. I’ve initially set an area of 100px x 300px for the image, but it can be larger, or smaller. Some adjustments to the code will probably need to be made once you get your image in. The existing text site title will be moved way off to the left out of site, but still be there for the search engines to find.
```
.site-title {
    background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
    height: 100px;
    margin-right: 20px;
    width: 300px;
}
.site-title a {
    display: block;
    text-indent: -9999px;
    line-height: 100px;
}
```
mexicoretold · Member · Aug 30, 2013 at 3:42 am
Copy link
Hi , thanks for such a quick response. I have added that CSS and successful removed the title but the logo hasn’t appeared in its place. Do you have any thoughts on what I might be doing wrong?

Thanks again
mexicoretold · Member · Aug 30, 2013 at 3:43 am
Copy link
Oops ignore that. I have removed the “‘s and I have fixed it. Thank you so so much. You have saved me so much time and frustration! :)
thesacredpath · Member · Aug 30, 2013 at 3:53 am
Copy link
@mexicoretold, you are very welcome, and your site is looking awesome!
mexicoretold · Member · Aug 30, 2013 at 3:54 am
Copy link
Is there a way now that I can make the menu come down a little, it seems rather high and I can’t seem to change it. Thanks again
mexicoretold · Member · Aug 30, 2013 at 4:01 am
Copy link
oh gosh and one more thing. How can I make the menu text white whilst I am at it? Thank you so much for the compliment on the site :)
thesacredpath · Member · Aug 30, 2013 at 4:05 am
Copy link
Certainly. With the code below, I have floated the menu to the right and brought it down. You can move it up or down to your liking by adjusting the 110px top margin. The second and third bits of code move the content area up a little closer to the logo.
```
.main-navigation {
float: right;
margin-right: 40px;
margin-top: 110px;
}

.site-header hgroup {
margin-bottom: 0;
}

.site-description {
display: none;
}
```
You can also reduce the height in .site-title to bring it up even more. It looks pretty good at 175px with the above changes.
mexicoretold · Member · Aug 30, 2013 at 4:29 am
Copy link
Worked an absolute treat. Now I would just love to change the menu items to white and I tried to add in some code and failed. Is it possible? I promise that is my last question. Thank you!!
thesacredpath · Member · Aug 30, 2013 at 4:34 am
Copy link
Here you go. I also remove the white text shadow which made the white text a little fuzzy looking.
```
.main-navigation a {
color: #FFFFFF;
text-shadow: none;
}
```
You are welcome, and no problem on the questions.
mexicoretold · Member · Aug 30, 2013 at 4:38 am
Copy link
I really can’t thank you enough! I thought this was going to be really tricky but with your help it was so quick. I hope the karma returns! Many thanks! :)
thesacredpath · Member · Aug 30, 2013 at 4:42 am
Copy link
You are very welcome.
ldauner · Member · Sep 10, 2013 at 8:17 pm
Copy link
I am attempting a similar thing on my blog, trampsintransition.com, and am wondering if it is possible to get the site title to appear to the right of the background image (they are currently superimposed). I used the code you first responded with, but line 2 of the title text is still pasted into the image. Thanks for any help in advance.
timethief · Member · Sep 10, 2013 at 8:28 pm
Copy link
@ldauner
The blog linked to your username is a free hosted wordpress.com blog that’s devoid of any blogger created content. Your other thread re: http://trampsintransition.com/ is already tagged and will be moved to the CSS Forum for you. Please post only into that thread https://en.forums.wordpress.com/topic/tagline-missing-in-ideation-and-intent?replies=2#post-1428164

No items found.