Support » Plugin: White Label CMS » Retina display for Login logo

  • Hello, I make my websites retina display ready using a WordPress plugin called WP Retina 2x. I also use your plugin to customize my clients’ dashboard and login area with my own logo. I wanted my logo in the log-in area to look great on retina displays. But when I upload two images – one at 320px x 70px and one at 640px x 140px with “@2x” at the end of the name of the file – per the instrux for the Retina plugin, my logo is too big. I am calling up the version called – for example, “logo.png” – not “logo@2x.png” but the logo is displayed is huge and cut off. I tried adding the following CSS:

    .login h1 a {
    display: all;
    background: url(https://shorelineaviation.com/wp-content/uploads/2017/03/margarets-folly-branding-blue@2x.png) no-repeat bottom center !important;
    margin-bottom: 10px;
    background-size: contain;
    }

    But it didn’t help.

    I’d like to show you what it looks like but… I’m reluctant to send you – publicly – the URL to log into my sites. How can I show you what’s happening? Is there a way to write to you privately? Thanks so much.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter pagan11460

    (@pagan11460)

    Oops… correction:

    .login h1 a {
    display: all;
    background: url(https://shorelineaviation.com/wp-content/uploads/2017/03/margarets-folly-branding-blue@2x.png) no-repeat bottom center !important;
    margin-bottom: 10px;
    background-size: contain !important;
    }

    Jer Turowetz

    (@jturowetzgmailcom)

    Hey there!

    First off, it’s pretty easy to guess your login url from the url in the ‘background: url’ you posted above. If you’re concerned about this url being exposed, I’d change it to relative (at least for this thread).

    As far as retina logos go, I totally remember seeing some kind of retina setup built in to core for the default wordpress logo, but this was a long way back . Looking at the core code now, it seems the default logo uses SVG (with a png fallback) to handle scaling seamlessly.

    This is what load-styles.php spits out for the default login screen:

    .login h1 a {
        background-image: url(images/w-logo-blue.png?ver=20131202);
        background-image: none, url(images/wordpress-logo.svg?ver=20131107);
        -webkit-background-size: 84px;
        background-size: 84px;
        background-position: center top;
        background-repeat: no-repeat;
        color: #444;
        height: 84px;
        font-size: 20px;
        line-height: 1.3em;
        margin: 0 auto 25px;
        padding: 0;
        width: 84px;
        text-indent: -9999px;
        outline: 0;
        display: block
    }

    I’d recommend going following core’s good example and going SVGh your logo (with a png fallback). If you don’t wanna do that, you can try using a media query to target specific devices:

    .login h1 a {
        // non retina code here
        display: all;
        background: url(/wp-content/uploads/2017/03/margarets-folly-branding-blue@2x.png) no-repeat bottom center !important;
        margin-bottom: 10px;
        background-size: contain !important;
    }
    
    // a bunch of media queries to try and target devices with a little more density
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        .login h1 a {
        // retina code here
            background-image: url('../../custom-logo-2x.png');
        }
    }
    • This reply was modified 4 years, 6 months ago by Jer Turowetz.
    • This reply was modified 4 years, 6 months ago by Jer Turowetz.
    Jer Turowetz

    (@jturowetzgmailcom)

    Hey there!

    First off, it’s pretty easy to guess your login url from the url in the ‘background: url’ you posted above. If you’re concerned about this url being exposed, I’d change it to relative (at least for this thread).

    As far as retina logos go, I totally remember seeing some kind of retina setup built in to core for the default wordpress logo, but this was a long way back . Looking at the core code now, it seems the default logo uses SVG (with a png fallback) to handle scaling seamlessly.

    This is what load-styles.php spits out for the default login screen:

    .login h1 a {
        background-image: url(images/w-logo-blue.png?ver=20131202);
        background-image: none, url(images/wordpress-logo.svg?ver=20131107);
        -webkit-background-size: 84px;
        background-size: 84px;
        background-position: center top;
        background-repeat: no-repeat;
        color: #444;
        height: 84px;
        font-size: 20px;
        line-height: 1.3em;
        margin: 0 auto 25px;
        padding: 0;
        width: 84px;
        text-indent: -9999px;
        outline: 0;
        display: block
    }

    I’d recommend going following core’s good example and going SVGh your logo (with a png fallback). If you don’t wanna do that, you can try using a media query to target specific devices:

    .login h1 a {
        // non retina code here
        display: all;
        background: url(/wp-content/uploads/2017/03/margarets-folly-branding-blue@2x.png) no-repeat bottom center !important;
        margin-bottom: 10px;
        background-size: contain !important;
    }
    
    // a bunch of media queries to try and target devices with a little more density
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        .login h1 a {
        // retina code here
            background-image: url('../../custom-logo-2x.png');
        }
    }
    Jer Turowetz

    (@jturowetzgmailcom)

    Hey there!

    First off, it’s pretty easy to guess your login url from the url in the ‘background: url’ you posted above. If you’re concerned about this url being exposed, I’d change it to relative (at least for this thread).

    As far as retina logos go, I totally remember seeing some kind of retina setup built in to core for the default wordpress logo, but this was a long way back . Looking at the core code now, it seems the default logo uses SVG (with a png fallback) to handle scaling seamlessly.

    This is what load-styles.php spits out for the default login screen:

    .login h1 a {
        background-image: url(images/w-logo-blue.png?ver=20131202);
        background-image: none, url(images/wordpress-logo.svg?ver=20131107);
        -webkit-background-size: 84px;
        background-size: 84px;
        background-position: center top;
        background-repeat: no-repeat;
        color: #444;
        height: 84px;
        font-size: 20px;
        line-height: 1.3em;
        margin: 0 auto 25px;
        padding: 0;
        width: 84px;
        text-indent: -9999px;
        outline: 0;
        display: block
    }

    I’d recommend following core’s good example and going SVG with your logo (with a png fallback). If you don’t wanna do that, you can try using a media query to target specific devices.

    To do the latter, just start with the same css you were going to use:

    .login h1 a {
        display: all;
        background: url(/wp-content/uploads/2017/03/margarets-folly-branding-blue@2x.png) no-repeat bottom center !important;
        margin-bottom: 10px;
        background-size: contain !important;
    }

    Then add a bunch of media queries to try and flip out to the high resolution logo on devices with a little more density:

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        .login h1 a {
        // retina code here
            background-image: url('../../custom-logo-2x.png');
        }
    }

    You might need to mess around with width and height (a 2x image should still be set to the same width as the 1x image) but this should give you the basic idea.

    • This reply was modified 4 years, 6 months ago by Jer Turowetz. Reason: i suck at the editor
    Jer Turowetz

    (@jturowetzgmailcom)

    Oh man, I just realized I’m answering a question for a plugin… I thought we were in the general support forums haha.

    I imagine this would still work for you @pagan11460. Heck, if you’re capable of modifying the files in this way you might not even need this plugin (no offense team white-label-cms).

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Retina display for Login logo’ is closed to new replies.