Now Reading
Safely modify your WordPress admin’s CSS and make it futureproof

Safely modify your WordPress admin’s CSS and make it futureproof

I’ve written a few posts in the past on Blog Herald, showing how you can make different changes for your WordPress admin by modifying the CSS file for it.

Being able to modify the CSS file to make quick design changes to your WordPress admin is very useful indeed, but the problem is when you upgrade your version of WordPress, the wp-admin.css file is replaced with the newer version because it’s not considered a file that should be modified by users.

Here’s where a new plugin that I came across comes in. It’s called the WordPress admin themer plugin, and what it does is simple. It allows you to create a separate wp-admin.css file that does not require modifying the default wp-admin.css file.

To use the plugin, you simply need to install it like any other WordPress plugin, then create a wp-admin.css file in the folder of the particular theme that you are currently using on your blog.

For example, for myself, I’ve got a wp-admin.css in the /wp-content/themes/default/ folder. The file contains the following:

textarea, input, select { font-family: "lucidamac bold","lucida grande",arial,sans-serif; }

#categorychecklist { height: 25em; }
#postdivrich { margin: 0 auto; width: 510px; }
#title { font-size: 1.5em; }

I love this, because now I can modify my own WordPress admin like never before, without overwriting anything in the existing file. Let me explain what my particular file does.

textarea, input, select { font-family: "lucidamac bold","lucida grande",arial,sans-serif; }

This changes the text in the textbox for my post’s content to the same text that I actually have on my site, so that I can better gauge just how the text will look like.

#categorychecklist { height: 25em; }

This changes the Categories box in the Write page to be twice the size that it currently is.

See Also
YouTube features for Content Creators

#postdivrich { margin: 0 auto; width: 510px; }

This makes the Write textbox to be smaller, so that it’s the same size as it actually shows on my blog. This helps me better understand where the post will wrap and where images will appear.

#title { font-size: 1.5em; }

This makes the Title of the post in the Write page to be the same size as the text size for the titles on my blog. This helps me better understand how long the title actually is.

Do you have any other changes that you’d like to do to your WordPress admin, now that you can easily modify the CSS for it? Share your changes in the comments below!

Gary King is a professional freelance web developer, primarily using Ruby on Rails and PHP to create cool new websites. When he’s not trying to take over the world one blog at a time, you can find him mulling over his thoughts at King Gary.

View Comments (3)
Scroll To Top