css Archives - Denial Design

If you want to take your site to a new level and add a touch of personalisation to your WordPress install, you can replace the default WordPress logo on the login page with your site’s logo. This following snippet changes the default logo to your site icon (as defined in Settings > General > Site Icon). Simply place the following code in your site’s functions.php file (make sure you are using a child theme to protect against theme updates).


/** change the WordPress logo on the login page to the site icon */
function denial_login_logo() {
	/** Get the site icon and store it in a variable
	 *  first parameter is size, change this to match your desired dimensions, 
	 * second parameter is a fallback url, set to the default WordPress icon, if the site icon is not set, 
	 * the third is the blog_id, used for multisites, 0 for default or single sites */
	$fallback_logo = get_site_url() .'/wp-admin/images/wordpress-logo.svg';
        $site_logo = get_site_icon_url(84, $fallback_logo, 0);
        
	/** change the login stylesheet to use the site icon */
	?>
		<style>
			#login h1 a {
				background-image: url(<?php echo $site_logo ?>);
				background-repeat: no-repeat;
				background-size: 84px; /* change this to match your desired dimensions */
				height: 84px; /* change this to match your desired dimensions */
				width: 84px;  /* change this to match your desired dimensions */
			}
	</style>
	<?php
}
add_action('login_enqueue_scripts', 'denial_login_logo');

The default WordPress logo on the login page is loaded as a background image so in order to replace the image we need to set our own background image which is done by inserting our own css stylesheet in to the login_enqueue_scripts hook. Using the get_site_icon_url function we can get our site icon url and add that to our new stylesheet. You can adjust the icon size and the padding / margins around the icon here as well.

Ever wanted to swap the order of column’s contents on a mobile device so it displays in a different order to the desktop site? For example you may have a desktop layout like this:

However on a mobile device you’d want the image to display first, then the text. In the example above the image would normally render after the text on a standard responsive layout but with a little css we can change the order of the elements to display how we want them to. Add the class “swap-on-mobile” to the parent element and then use the following code to reverse the columns using flexbox.

@media screen and (max-width: 767px) {
    .swap-on-mobile {
	display: flex !important;
	flex-direction: column-reverse;
    }
}

When viewed on a mobile device the layout now looks like the example below:

Tag Archives: css

How to change the WordPress login logo to match your site branding.

Code Snippet: Swap Column Order On Mobile Devices