Child theme custom login styling

[david-wpck]

Jason,
In your developer docs, you mention that “unfortunately our custom stylesheet gets applied everywhere except for the WordPress login page.”
You ended up using a function with the styles.

I just wanted to point out a different way I accomplished this.
Not just pertinent to JumpStart, but any theme.
I created a custom function that calls up my custom login stylesheet in my child theme assets/css directory like so:

/*--------------------------------------------------------*/
/*  Custom Login Stylesheet Override
/*--------------------------------------------------------*/
function wpck_custom_login() {
    $wpckstylesheet = get_stylesheet_directory_uri() . '/assets/css/wpck-custom-login.css';
    echo '<!-- custom login css -->
          <link rel="stylesheet" type="text/css" href="' . $wpckstylesheet . '" />
          <!-- /end custom login css -->';
}
function wpck_wp_login_url() {
    return get_home_url();
}
function wpck_wp_login_title() {
    return get_option('blogname');
}
add_filter('login_headerurl', 'wpck_wp_login_url');
add_filter('login_headertitle', 'wpck_wp_login_title');
add_action('login_head', 'wpck_custom_login');

Here’s the example: PCB custom login
(Note: the site link isn’t JS at the moment, just a placeholder theme. The JS version is being developed local, but it doesn’t matter, the login function is the same)
I also have a completely different method that incorporates the login, lost password, and registration right into the site design/pages. I am re-factoring that, but wanted to mention it.

Topic

[Danny]

Can we put the css in the main css and not call a new css file? Or is that not a good practice?
Its just should I limit the number of CSS files..I want to do this and customize the admin.

[karlo]

You can just use inline styles but I do not think CSS files are loaded else where – see filters. And codex pages about this. Is that not pretty good?

add_action( 'login_head', 'custom_login_styles' );
function custom_login_styles() {
?>
<style type="text/css">
LA, LA, LA. CSS ALL OVER.
</style>
<?php
}

But you should not limit number of CSS files if you like to have a ton. Some find that easier. Minify them instead. So you end up with 1 or 2 files. This you do for “production site”, less fiddling about sites. You can think of limiting amount of kbs of course but dont let warnings from testing tools about too many CSS files haunt you. Is modern age, use tools 🙂 Pretty much 100% automated if you use right plugin and do not mess up. That was 2 demands, heh.

http://www.icnfnt.com/ seem to work btw. 1/4 of font awesome is better than 1/1. That make sense. Just be careful about characters. If you apply fonts manually characters representing font characters change… Or did I mess up? Well classes do not so it should work as usual. Where ever used by Jump Start I mean. You can see in the CSS file it spit out, at the bottom you get list of characters. Used to work like shit, files were not much smaller than default. Now I have had success.

[karlo]

If you diagnose file load on login page you might see weird things. WordPress load more that it has to and I have at least 2 plugins that pops up, for no reason at all. One I have actually excluded 100% unless a short code is found on page/post. This is bug or less than optimal coding I assume.

I remember I looked this up on Trac where WordPress coders hang out. Some guy was angry WordPress loaded not used CSS files on login page. People in power were like “what ever” 🙂 Not sure plugins are supposed to follow up on WordPress weird actions but some do.

Anyway, means zero as nobody will notice = nobody cares.

Mistake: I did not use filter for inline CSS or what david-wpck use for loading external style sheet. Is an action hook http://codex.wordpress.org/Plugin_API/Action_Reference/login_head But targeting login page only so no issue for real site. Pretty sure you can pimp away, add Youtube video! There are also plugins for this + lots of tutorials.

[Danny]

Hey thanks I solved this after I posted.. I used the function file and inline css for a small css change I also dropped in a css file that over road the admin css very nice..I found a ton of tutorials on this..in fact so many people want custom logins and admins..I found plugins as well..some are very nice..so I may end up using a plugin..again thanks..
I should not post until I have exhausted all possible things..Sorry..Ill be carful in future .
Dan

[karlo]

Careful? Ok, good luck learning then, heh.

There are many opinions about when to use own code, plugins or even rely on theme code. The other day I saw a video on wordpress.tv where a dude showed how to customize entire log-in process. At the end someone asked “Are there not plugins for this?” like WHY bother. Presenter replied that there are advantages to controlling own code and it really is super easy. Also only 200-250 lines of code. Who says what to who? 1 line of code be confusing if you have no experience or clue. They are probably both right – if he by plugin mean good solid maintained plugin 😉 Not like they hang on trees.

[iphoenix]

You can do something like this:

<?php
/*-------------------------------------------------------*/
/* Custom Login
/*-------------------------------------------------------*/
// changing the logo link from wordpress.org to your site 
function options_login_url() { echo home_url(); }
// changing the alt text on the logo to show your site name 
function options_login_title() { echo get_option('blogname'); }

function options_login_css() { 

  $option_name = themeblvd_get_option_name();
  $options = get_option( $option_name );

  ?>
  
  <style>
          body.login {background: <?php print $options['bg_color']; ?> url('<?php print $options['bg_image']; ?>') <?php print $options['background_repeat']; ?> <?php print $options['background_align']; ?>;} 
          h1 a {background: url(<?php print get_stylesheet_directory_uri() . '/assets/images/login-logo.png'; ?>) no-repeat center !important;}
          #wp-submit {
              background-color: <?php echo $options['nav_high_color']; ?>;
              background-image: -moz-linear-gradient(top, <?php echo $options['nav_low_color']; ?>, <?php echo $options['nav_high_color']; ?>);
              background-image: -ms-linear-gradient(top, <?php echo $options['nav_low_color']; ?>, <?php echo $options['nav_high_color']; ?>);
              background-image: -webkit-gradient(linear, 0 0, 0 100%, from(<?php echo $options['nav_low_color']; ?>), to(<?php echo $options['nav_high_color']; ?>));
              background-image: -webkit-linear-gradient(top, <?php echo $options['nav_low_color']; ?>, <?php echo $options['nav_high_color']; ?>);
              background-image: -o-linear-gradient(top, <?php echo $options['nav_low_color']; ?>, <?php echo $options['nav_high_color']; ?>);
              background-image: linear-gradient(top, <?php echo $options['nav_low_color']; ?>, <?php echo $options['nav_high_color']; ?>);
              background-repeat: repeat-x;
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<?php echo $options['nav_low_color']; ?>', endColorstr='<?php echo $options['nav_high_color']; ?>', GradientType=0);
              border: 1px solid <?php echo admincolourBrightness($options['bg_color'], -1.5); ?>;
            }

</style>

<?php
}
/*-------------------------------------------------------*/
/* Admin Style
/*-------------------------------------------------------*/
add_action('login_head', 'options_login_css');
add_filter('login_headerurl', 'options_login_url');
add_filter('login_headertitle', 'options_login_title');

Just change the $options values to whatever you add in your options menu array…

$name = 'styles';
$description = 'Styles';
$options = array(
    array(
        'name'      => 'Background Color',
        'desc'      => 'Select a color for the Background.',
        'id'        => 'bg_color',
        'std'       => '#F2F2F2',
        'type'      => 'color'
    ),
    array(
        'name'      => 'Nav High Color',
        'desc'      => 'Select a color for the navigation\'s background low gradient color.',
        'id'        => 'nav_high_color',
        'std'       => '#f0f0f0',
        'type'      => 'color'
    ),
    array(
        'name'      => 'Nav Low Color',
        'desc'      => 'Select a color for the navigation\'s background low gradient color.',
        'id'        => 'nav_low_color',
        'std'       => '#ffffff',
        'type'      => 'color'
    )
);
themeblvd_add_option_section( 'options', 'styles', $name, $description, $options, true );

[Author]

Replies