add logo to header (booklite theme)

  • Author
    Posts
  • #2545070

    I would like to add a logo to my header, preferably in the lower right hand corner. Is it possible to modify the CSS to do so? I am using the booklite theme, and have the ability to make css mods.

    The blog I need help with is psmsblog.com.

    #2545136

    Hi there, although this could be done, you would need to have a header image that is the correct size so that it goes from border to border on the browser window, otherwise when someone has their browser window set wider than your image, the logo would end up being off the side of the image. The image should be at least 1440px wide and 500px tall.

    Another thing, at around 800px, your image would start to overlay your title and tagline, so it would either have to be hidden at that point, or moved above the title.

    Personally with the way the titles are centered, I would suggest centering the logo above the title.

    #2545141

    Sure, if a centered logo would be easiest, I can start by trying that. You bring up some good considerations. How would you add a centered logo? Once I know what that code looks like, I can play around with it to find what ultimately works best. New to CSS, but have other programming experience, just not sure where to start!

    #2545158

    This would be the basics. You would upload your logo to your media library and get the URL and replace URL_OF_IMAGE between the quote marks with that URL. I’ve arbitrarily set a top padding of 80px to make room for the logo above the site title, but that value will depend on the size of your logo. I would suggest something 100px tall or less or there may be some issues on smaller screens (small tablets and phones) and then adjust the 80px value as desired to get the spacing you want.

    hgroup {
    background: url"URL_OF_IMAGE") no-repeat scroll center top transparent;
    padding-top: 80px;
    }

    #2545169

    I can’t seem to figure out how to get to the media library screen to upload any media. The left bar when in the blog editing screen doesn’t have anything like a media option?

    #2545180

    Hi, here is a direct link to your Media Library in your admin dashboard: http://psmsblog.com/wp-admin/upload.php .

    For your reference, here is out support document on Uploading Images, which covers both the admin dashboard and the new Calypso interface.

    #2545189

    Hello,

    I was able to upload the image into my media library, and resize it as need be. However, when I entered the code you gave me into the custom CSS window, and replaced URL_OF_IMAGE with the appropriate url, and then saved and published my results, nothing happened. Here is what I have written in the custom CSS window:

    hgroup {
    background: url”https://psmsblogdotcom.files.wordpress.com/2016/01/psmslogo_color.png”) no-repeat scroll center top transparent;
    padding-top: 80px;

    That was with the original image, not resized, which has dimensions 618 x 611. I can change those dimensions to 101 x 100, but still see nothing.

    Any idea what’s wrong? Thanks!

    #2545193

    Add this to your custom CSS. It uses the larger image and sizes it accordingly and places it centered above your site title.

    hgroup {
        background: url("https://psmsblogdotcom.files.wordpress.com/2016/01/psmslogo_color.png") no-repeat scroll center top / 100px auto;
        padding-top: 110px;
    }

    See what you think.

    #2545195

    ah, i see, i was missing a parentheses. Thank you, you’ve been a big help!

    #2545196

    You are welcome, and we all miss a parentheses once in a while. :)

The topic ‘add logo to header (booklite theme)’ is closed to new replies.