Hi Steve

It looks like you're using our Synergy theme.

That's correct, the logo size is calculated dynamically after you have uploaded your logo to the media folder and then attached it to the Logo Media Picker via Content > Website Configuration > Global Settings.

There is a partial view that controls this functionality and within it we have set a default maximum height for the logo so that it fits the design of the theme. You have full access to our code so you are free to change this height. The width of the logo is based on the same ratio of the original file.

How to change the logo height:

Log in to the CMS > Go to "Settings" > Expand the folder "Partial Views" > Expand the folder "USNWebsiteHeadSection" > Open "USN_InternalStyles" > Go to lines 18-23

    if (originalHeight > 49)
    {
        //get new width
        smallWidth = (49 * originalWidth) / originalHeight;
        smallHeight = 49;
    }

Change each mention of the number 49 to the height you wish your logo to be displayed at on the frontend of the website.

For example, if you wish your logo to be 60px high change the above code to:

    if (originalHeight > 60)
    {
        //get new width
        smallWidth = (60 * originalWidth) / originalHeight;
        smallHeight = 60;
    }

Let me know how you get on.

Thanks Paul

Paul, Thanks! That worked.

No problem, Steve. Glad to hear :)

Hi Paul. I'm working on a uSkinned template/skin too: www.michael-beck.dk . How/where do I place a square logo for mobile users?

Hi Finn

The starter kits aren't set up to do this out of the box however a little customising and you can display a square logo for smaller screens.

Login to the CMS > Go to Settings > Expand Partial Views > Open USN_InternalStyles > Lines 29-47

    header #logo a {
        text-indent:-9999px;
        width: @Html.Raw(smallWidth)px;
        height: @Html.Raw(smallHeight)px;
        background-image: url('@smallLogo');
    }

    @@media (max-width:767px) {
        header #logo a {
            background-image: url('@smallLogo');
        }
    }

    @@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {
        header #logo a {
            background-image: url('@retinaLogo');
            background-size: @Html.Raw(smallWidth)px @Html.Raw(smallHeight)px;
        }
    }

We'll say that you wish the square logo to come into affect from screen size 767px and below. In this instance we will just hard code the link to your mobile sized image. You are free to make this dynamic at a later stage though so it can be managed from the content section of the CMS.

After line 47 add this code:

@@media (min-width:0) and (max-width:767px) {
    header #logo,
    header #logo a {
        width: 50px; height:50px;
    }
    header #logo a {
        background-image: url('LINK TO YOUR SQUARE IMAGE');
        background-size:50px 50px;
    }
}

@@media only screen and (min-width:0) and (max-width:767px) and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-width:0) and (max-width:767px) and (min-device-pixel-ratio : 1.5), only screen and (min-width:0) and (max-width:767px) and (-webkit-min-device-pixel-ratio : 2), only screen and (min-width:0) and (max-width:767px) and (min-device-pixel-ratio : 2) {
    header #logo a {
        background-image: url('LINK TO YOUR RETINA READY SQUARE IMAGE');
    }
}

Let me know how you get on.

Thanks Paul

Thanks a lot. It's the Minimal Corp with Bootstrap theme, not an Umbraco starter kit. I have sent your answer to my developer in India. I'll tell later if we had any success.

Hi Steve

Would you be able to mark this as solved?

Thanks Paul

is working on a reply...