• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

custom

Genesis Footer

July 25, 2020

Here’s how to display Copyright years in the footer section if you’re using the Genesis theme.

[footer_copyright first="2002"]

[footer_copyright first="2002"]

Result:

Copyright © 2002–2020

Copyright © 2002–2020

The current year is dynamic. It will display 2021 a year from now. The first year is always fixed.

Filed Under: WP Tagged With: copyright, custom, footer, genesis, wordpress, year

MacOS Custom Launchpad

February 28, 2019

Are the icons too big in MacOS Launchpad? You can customize them. Here are the commands.

# change the launchpad icon size by changing the columns and rows
defaults write com.apple.dock springboard-columns -int 10
defaults write com.apple.dock springboard-rows -int 10
killall Dock
# reset the launchpd
defaults write com.apple.dock ResetLaunchPad -bool TRUE
killall Dock
# reset to defaults
defaults delete com.apple.dock springboard-columns 
defaults delete com.apple.dock springboard-rows
killall Dock

# change the launchpad icon size by changing the columns and rows defaults write com.apple.dock springboard-columns -int 10 defaults write com.apple.dock springboard-rows -int 10 killall Dock # reset the launchpd defaults write com.apple.dock ResetLaunchPad -bool TRUE killall Dock # reset to defaults defaults delete com.apple.dock springboard-columns defaults delete com.apple.dock springboard-rows killall Dock

Filed Under: Mac Tagged With: custom, icon, lauchpad, size

WordPress Custom Login Page

February 4, 2014

We’ve all seen the default WordPress login page. It’s dull, bland, and boring. Typically, the login page is not part of the WordPress theme setup. Most theme designers don’t bother to change the login screen because it’s not really necessary. The cool thing is, it’s entirely feasible to customize the login page. This article will show you how to change your WordPress login page to something like below.

wp-login

Changing the WordPress Logo

We can replace the WordPress logo located on top of the login form by calling a WordPress hook called ‘login_enqueue_scripts.’ This hook is responsible for enqueuing items to the login page. In this example, we are assigning an image to ‘body.login div#login h1 a.’

Place the following code in your theme’s ‘functions.php’ file.

function urr_login_logo() { 
}

function urr_login_logo() { }

The ‘logo.png’ file is located in your theme’s ‘images’ folder. Why can’t I see the logo image? Believe me, it’s there. You can’t see it because I made it transparent. It would be visible if it were non-transparent. So, it’s possible to replace the WordPress logo or display nothing at all, like I just did just now, using a transparent image.

By the way, the image needs to be 80×80 pixels in size.

Adding a Background Image

How do we add a background image to the login page? Well, one thing worth noting, WordPress does not load your theme’s stylesheet when the login page is loaded. To style to the login page, we need to add our own custom stylesheet. It will be loaded when the login page is displayed.

Now, place the following code in your theme’s ‘functions.php’ file.

function urr_custom_login_css() {
echo '';
}
add_action('login_head', 'urr_custom_login_css');

function urr_custom_login_css() { echo ''; } add_action('login_head', 'urr_custom_login_css');

This code above loads a stylesheet when the login page is loaded. It’s using the ‘login_head’ hook.

Our Stylesheet

Create a file called login-style.css and place it inside our theme’s directory under the ‘css’ folder. We can now style our login page. The code below will apply a background image ‘darkwood.jpg’ to the login page. The form and its inputs are darkened, except for the submit button which remains unchanged. In addition, we also rounded the corners of the form.

body.login {
  background: #000 url('http://uly.me/wp-content/themes/minimum/images/darkwood.jpg') no-repeat fixed center;
}
 
div#login form { 
  background-color:#111;
  border-radius: 10px;
}
 
div#login form input#user_pass, div#login form input#user_login, div#login form input#rememberme {
  color: #aaa;
  background-color:#333;
  border: 1px solid #000;
  border-radius: 3px;
}
 
div#login form input#user_pass, div#login form input#user_login, div#login form input#rememberme {
  color: #aaa;
  background-color:#333;
}

body.login { background: #000 url('https://cdn.uly.me/wp-content/themes/minimum/images/darkwood.jpg') no-repeat fixed center; } div#login form { background-color:#111; border-radius: 10px; } div#login form input#user_pass, div#login form input#user_login, div#login form input#rememberme { color: #aaa; background-color:#333; border: 1px solid #000; border-radius: 3px; } div#login form input#user_pass, div#login form input#user_login, div#login form input#rememberme { color: #aaa; background-color:#333; }

Finally, upload your functions.php, login-styles.css and images files to your server. Enjoy your custom login page.

Filed Under: WP Tagged With: custom, login

  • Home
  • About
  • Archives

Copyright © 2023