Is it possible to add a logo to Skylark?

chryseis66 · Member · May 15, 2014 at 5:13 pm
Copy link

Add topic to favorites
Hi there. I’m trying to add a logo to the header in my premium Skylark theme. However the only option I can find is to add a long image under the header… I just want to have my small logo to the left of the menu, not a big long image.

Can anyone help?

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 15, 2014 at 10:26 pm
Copy link
Give that Skylark is a responsive width theme, may I suggest adding the image into the site-title/description hgroup, and we can place it to the right, which will put if nearly at the left end of the menu. That way it will flow with the other theme elements. I used one of the logo images you have in your media library. The final logo should be about 66px square although we could make it larger. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to see it on the right of the title/description.
```
.site-header hgroup {
    background: url("http://chryseis66.files.wordpress.com/2014/05/chris-logo1.jpg") no-repeat scroll right top / auto 100% rgba(0, 0, 0, 0);
}
```
Another option would be to put it to the left of the title/description. The following CSS will do that.
```
.site-header hgroup {
    background: url("http://chryseis66.files.wordpress.com/2014/05/chris-logo1.jpg") no-repeat scroll left top / auto 100% rgba(0, 0, 0, 0);
}
.site-title, .site-description {
    margin-left: 80px;
}
```
The second alternative above seems to look better to me, but try them both and see what you think. Make sure and narrow your browser window way down so that you can see how the two different solutions act at different widths.

No items found.