How can I add logo to Ideation and Intent Theme?

Author

Posts
August 30, 2013 at 3:24 am #1413539

mexicoretold
Member

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 mexicoretold.com.

August 30, 2013 at 3:33 am #1413605
thesacredpath
Staff
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;
}
```
August 30, 2013 at 3:42 am #1413607

mexicoretold
Member

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

August 30, 2013 at 3:43 am #1413608

mexicoretold
Member

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! :)

August 30, 2013 at 3:53 am #1413609

thesacredpath
Staff

@mexicoretold, you are very welcome, and your site is looking awesome!

August 30, 2013 at 3:54 am #1413610

mexicoretold
Member

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

August 30, 2013 at 4:01 am #1413612

mexicoretold
Member

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 :)

August 30, 2013 at 4:05 am #1413614
thesacredpath
Staff
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.
August 30, 2013 at 4:29 am #1413620

mexicoretold
Member

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!!

August 30, 2013 at 4:34 am #1413625
thesacredpath
Staff
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.
August 30, 2013 at 4:38 am #1413626

mexicoretold
Member

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! :)

August 30, 2013 at 4:42 am #1413627

thesacredpath
Staff

You are very welcome.

September 10, 2013 at 8:17 pm #1413813

ldauner
Member

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.

September 10, 2013 at 8:28 pm #1413814

timethief
Member

@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
Author

Posts