Login Page Theming

[michaellindahl]

Is there anyway to modify the login page so it fits better with my site's theme? My site has a dark theme and the login page is light, so they don't fit well with each other. I have tried to changed the background color of the body however it seems like there are a lot of unnecessary divs with background colors that is preventing me from changing it.

[sal]

I recommend using the Custom Admin CSS plugin to customise the login page rather than edit the style.php file directly because you'll probably lose your changes in a GetSimple update down the track that way.

You will however need to add an extra hook to the plugin file as it doesn't have access to the login pages by default. Once you've downloaded the plugin and before you upload it to your server, open the PHP file "custom-admin-css.php" in your text editor of choice and jump down to line 25 and add a new line after it with the following:

Code:

add_action('index-login', 'gscacss_showcss');

Save and upload that file to your plugins folder. Now you will have a new "Custom Admin CSS" page under themes that you can use to tweak the "Login" and "Reset Password" pages.

[michaellindahl]

Good call. Just installed it and it works well, however I am only interested in modifying the login page at this point. I want to change the background to one color (actually an image) and cannot do this using html, body, or even div. Even trying to change all of these to the same color is not working. I would of thought that I could of just stylized body but I am found wrong, are there other elements that I can give a transparent color to make this work?

[sal]

I use the following to customise the login page for GetSimple and it works quite well:

Code:

/* Login/Password Reset Pages:
   Requires the following to be added to "plugins/custom-admin-css.php" after line 25:
   add_action('index-login', 'gscacss_showcss');
*/
body#index, body#resetpassword { background-color:#D24726; }
#index h3, #resetpassword h3 { text-align:center; }
body#index .wrapper a:link, body#index .wrapper a:visited,
body#resetpassword .wrapper a:link, body#resetpassword .wrapper a:visited { color:#888; }
body#index #maincontent .main, body#resetpassword #maincontent .main { border:0; background:#fff none; text-align:center; border-radius:0; box-shadow:rgba(0, 0, 0, 0.2) 0 5px 10px 2px; }
body#index #maincontent form b, body#resetpassword form b { color:#888; float:left; font-weight:400; }
body#index #footer, body#resetpassword #footer { display:none; }

[michaellindahl]

Awesome! Thanks that helped a lot. However in order for my radial gradient to work I need the body height to be 100%, however the body is constricted because of the html height. This has made me add

Code:

html { height: 100%; }

to the CSS. I believe this is no way for me to apply this to only the login pages. Is this going to cause a problem or is there a better way for me to solve this?
I also want to center the login field more vertically so I added this:

Code:

body#index .wrapper, body#resetpassword .wrapper { position: relative; top: 220px; width: auto; }

The problem with this is when windows are shorter than usual the login window is not visible until you scroll down. When I make my desktop window the width of my iPhone the login window is centered and big. However, when I go to the login page on my iPhone I have to zoom in. This doesn't make sense to me. Any way to make the login window be more zoomed up on my iPhone? Any better way to vertically center the login body?

[sal]

I also use html { height:100% } and haven't noticed anything odd happen due to that. Just keep it in mind if you notice anything weird happens down the road. To make your admin login page more friendlier for mobile, I'm pretty sure you'll need to edit a core file, adding the following to the /admin/header.php file around line 16:

Code:

<meta name="viewport" content="width=device-width">

With that set you'll be able to use media queries to style according to viewport dimensions. However doing this is opening up a huge can of worms which I'm pretty sure makes the backend a little more difficult to use without a lot more work on optimising the CSS for mobile.