Logo size

kirilvarbanov · Member · August 29, 2019 at 2:30 pm
Copy link

Add topic to favorites
Hello, I’d like to be able to increase the logo size. The documentation says: The site logo uses an image sized 120 x 120
but this is too small for me. Generally, there’s a space that’s not used. I won’t be using the Site name and the tagline, instead, I need to place an image, similar to Facebook cover. Please let me know how this can be achieved.
Note: I don’t want to use the header functionality – it takes a lot of space.

The blog I need help with is: (visible only to logged in users)
binarymoon · Theme Author · August 30, 2019 at 10:44 pm
Copy link
Hi there – thanks for the message.

The logo size is actually 360px square, but it’s scaled down so it doesn’t take up so much space, so you could crop the image in a landscape format and use that.

If that’s not good enough, since you have the business plan, I could make a really simple plugin that changes the allowed dimensions of the logo image. You would then need to reupload your logo image and then you can set it to be the size you want.

Both of these options may need some simple css changes. I can give you a copy and paste snippet that you can add to your site.

Do you have a logo image I can take a look at so I can see what you’re trying to do?

Thanks – Ben
kirilvarbanov · Member · September 1, 2019 at 6:05 am
Copy link
Hi, Ben, that sounds great – I’m all in for any option you could provide. The logo could be found here – https://scontent.fsof6-1.fna.fbcdn.net/v/t1.0-9/67659749_101236334569221_4561949566995267584_o.jpg?_nc_cat=106&_nc_oc=AQksSqaEsVD2QacNb37372iurny9jZifKvgpbXbM1eb9mg2Ih-1Bhp8bMsdxZ-u1lE0&_nc_ht=scontent.fsof6-1.fna&oh=0bed2afdb91681cac640f14854e07d73&oe=5DFBE5B7

binarymoon · Theme Author · September 1, 2019 at 8:06 pm

You could add the following custom css to add your logo. Hopefully that does what you want:


.masthead .branding {
    text-indent: -999em;
    background: url(https://scontent.fsof6-1.fna.fbcdn.net/v/t1.0-9/67659749_101236334569221_4561949566995267584_o.jpg?_nc_cat=106&_nc_oc=AQksSqaEsVD2QacNb37372iurny9jZifKvgpbXbM1eb9mg2Ih-1Bhp8bMsdxZ-u1lE0&_nc_ht=scontent.fsof6-1.fna&oh=0bed2afdb91681cac640f14854e07d73&oe=5DFBE5B7) no-repeat left center;
    background-size: contain;
    padding: 10px 0;
}

header.masthead {
    padding: 0;
}

kirilvarbanov · Member · September 2, 2019 at 7:33 am
Copy link
Excellent, thank you so much, exactly what I needed.
redaksijurnalgame · Member · September 2, 2019 at 5:49 pm
Copy link
Hi Ben,

I have some question regarding about it. Can we change the background color behind of logo?
I’m thinking just to put image rather than have very long white bar in the site. So the image would cover the whole masthead branding.
binarymoon · Theme Author · September 2, 2019 at 6:19 pm
Copy link
@kirilvarbanov – that’s great. Glad it worked! :)

@redaksijurnalgame – it depends on the image. If the logo has a transparent background you could change the background colour with some custom css. If not you would need to edit the image colour.

To change the white header bar colour you can use:
```
header.masthead {
    background:#f00;
}
```
This will change the bar to bright red. You can select your colour here:
https://prothemedesign.com/tools/color-picker/

The topic ‘Logo size’ is closed to new replies.

WordPress.com forums

Logo size