Retina display for Login logo

Oops… correction:

.login h1 a {
display: all;
background: url(https://shorelineaviation.com/wp-content/uploads/2017/03/[email protected]) no-repeat bottom center !important;
margin-bottom: 10px;
background-size: contain !important;
}

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/[email protected]) 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 7 years, 11 months ago by Jer Turowetz.
• This reply was modified 7 years, 11 months ago by Jer Turowetz.

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/[email protected]) 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');
    }
}

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/[email protected]) 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 7 years, 11 months ago by Jer Turowetz. Reason: i suck at the editor

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).