Opti logo cropping square

  • tmsuser · Member ·

    I am looking to change the logo on the Opti theme to a rectangular one (essentially cutting out the site header text and replacing it with an image that has the text and a logo behind it.

    I have got the CSS sorted to get the logo the right size – but the image is still the same square, cropped logo, just stretched.

    here is my code (I just fumbled around to make this, so probably wrong!)

    .site-logo-link {
    padding-right: 350px;
    }

    .site-logo.attachment-thumbnail {
    max-width: 1000px;
    max-height: 100px;
    width: 400px;
    height: 100px;
    object-fit: scale-down;
    margin-top: -10px;
    float: left;
    }

    The logo itself shows as the same rectangular image in the WP console.

    Many thanks

    Dave

    The blog I need help with is: (visible only to logged in users)

  • binarymoon · Theme Author ·

    Hi Dave – thanks for the message. Hopefully I can help you solve this however I am struggling to understand what you want to do. Could you post a link to your new logo? Perhaps that would help me understand what you want the css to do. A mockup of what you’re trying to do would also help if at all possible.

    Ben

  • tmsuser · Member ·

    Hi Ben, thanks :)

    Essentially, the current logo is a square – as in, that is what the logo will always crop to. 150x150px i think. so the current logo is a footprint, which takes up the available square space.

    underneath he current logo is some text saying “Total Market Solutions”

    What I want to do is completely remove the text underneath the logo and replace the current logo with a rectangular shaped logo image that is a PNG of the text with the footprint logo behind it.

    Basically, trying to minimise the amount of space that the header takes up by merging both together.

    When I upload the new, rectangular logo, into WP it shows fine in the “site title, tagline and logo” section – but when it shows on the actual site, it is cropped as a 150×150 square.

    I had a mess about with the CSS (as above) and resized the logo to a rectangle, but the image is still the cropped square version… it just stretches to the new rectangular shape defined by the updated CSS. Changing the “object-fit” changes whether it stretches or not, but I can only ever get the central (cropped) part of my new logo to show.

    so basically the new logo is the text:

    Total Market Solutions

    with a footprint behind the word market.

    but all that shows is:

    l Market S

    (the central part of the rectangular logo/text)

    Hope this is clear!

    many thanks

  • tmsuser · Member ·

    Current logo is 150×150… I would need to replace it with a logo that is about 600×150

  • tmsuser · Member ·

    currently:

    I would like:

  • tmsuser · Member ·

    When I change the logo this is what I see:

    And when I add the CSS to resize the image this is what I see:

  • binarymoon · Theme Author ·

    Hi Dave – thanks for all the extra info. Totally clear now!

    There’s a few ways this could be tackled. One would be to take a slightly different approach and put the square logo behind the site title (you would want to change the foot to the green version in your mockups).

    You could do that with:

    .site-logo-link img.site-logo {
margin-bottom: -66px;
}

    Alternatively if we remove the site logo as it stands then we could add the wider one to the site title and hide the text. It’s a bit more code but would work fine. If you have a link to a copy of the wider logo then I could give you the css to do this as well.

  • tmsuser · Member ·

    Perfect, thanks.

    I had considered the option of moving the text up, but wasn’t sure it would work – your CSS works perfectly and does the job nicely.

    Many thanks

    Dave

  • The topic ‘Opti logo cropping square’ is closed to new replies.