Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Steve Fabian 21 posts 102 karma points
    May 23, 2016 @ 20:30
    Steve Fabian
    0

    I need to resize the logo in my website header. I am using a theme from Uskinned. It looks like the logo size is in some dynamically generated css...

    <!-- INTERNAL STYLES -->
            <style>
            #site {
                /*max-width: 1400px;*/
            }
    
            header #logo a {
                text-indent:-9999px;
                width: 192px;
                height: 49px;
                background-image: url('/media/1019/mosteller-associates.png?width=192&amp;height=49');
            }
    
            @media (max-width:767px) {
                header #logo a {
                    background-image: url('/media/1019/mosteller-associates.png?width=192&amp;height=49');
                }
            }
    
            @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('/media/1019/mosteller-associates.png');
                    background-size: 192px 49px;
                }
            }
        </style>
    

    That section of the master pages only shows this:

    <!-- INTERNAL STYLES -->
        @Html.Partial("USNWebsiteHeadSection/USN_InternalStyles", @Model.Content)
    
  • Paul Daly (uSkinned.net) 26 posts 135 karma points c-trib
    May 24, 2016 @ 09:16
    Paul Daly (uSkinned.net)
    0

    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

  • sam 6 posts 76 karma points
    Mar 21, 2017 @ 12:41
    sam
    0

    Hi Paul

    i am also using the updated Synergy theme.

    I don't code but I kind of understand some of it - always dangerous. I also wanted to increase the size of the logo so changed the code to 92 , however it then completely messes with the layout for the mobile version/smaller screen size as it shows it at 92px . How will I get round that?

    Also I have some weird behavour that when I go below a certain screen size (before the hamburger menu) my sub nav no longer shows....

  • Paul Daly (uSkinned.net) 26 posts 135 karma points c-trib
    Mar 21, 2017 @ 13:20
    Paul Daly (uSkinned.net)
    0

    Hi Sam

    Could you submit your support enquiry via our contact page? https://uskinned.net/contact

    Thanks Paul

  • Steve Fabian 21 posts 102 karma points
    May 24, 2016 @ 12:40
    Steve Fabian
    0

    Paul, Thanks! That worked.

  • Paul Daly (uSkinned.net) 26 posts 135 karma points c-trib
    May 24, 2016 @ 13:01
    Paul Daly (uSkinned.net)
    0

    No problem, Steve. Glad to hear :)

  • Finn Arne Hansen 12 posts 69 karma points
    Dec 13, 2016 @ 12:57
    Finn Arne Hansen
    0

    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?

  • Paul Daly (uSkinned.net) 26 posts 135 karma points c-trib
    Dec 20, 2016 @ 10:20
    Paul Daly (uSkinned.net)
    0

    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

  • Finn Arne Hansen 12 posts 69 karma points
    Dec 20, 2016 @ 12:53
    Finn Arne Hansen
    0

    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.

  • Paul Daly (uSkinned.net) 26 posts 135 karma points c-trib
    Jan 04, 2017 @ 11:40
    Paul Daly (uSkinned.net)
    0

    Hi Steve

    Would you be able to mark this as solved?

    Thanks Paul

Please Sign in or register to post replies

Write your reply to:

Draft