6 Easy WordPress CSS Tricks You Can Use in Update 4.7
Happy new year! For our first post of 2017 we’re going to get a little bit technical. With the new Additional CSS option added in WordPress update 4.7, you’ll be able to copy and paste some really cool little WordPress CSS effects to jazz up your own website in no time.
This article is for all of those ‘non-techies’ out there. I want to show you how easy it can be to change things on your own WordPress website yourself with some really simple examples of WordPress CSS.
If you’ve never done anything like this before, it’s the perfect start to get your feet wet with a little bit of website development experience.
What is CSS?
Many of you reading this may have no idea what CSS actually is – and that’s fine – unless you’re a website developer you don’t really need to know. But a little knowledge on the subject is great for all website owners to have.
To put it briefly, CSS (short for Cascading Style Sheets) is a type of coding language that allows website developers to adjust how a website looks. You can change layouts, colours, fonts and everything else that determines a websites appearance using CSS.
It takes a long time to really master CSS, but in this article I just want to provide some really simple examples even the most novice of WordPress website owners can copy and use.
The New WordPress Additional CSS Option
In the most recent WordPress 4.7 update, which we covered briefly in our previous post, a brand new option has been added to the WordPress Customiser called Additional CSS.
This option simply allows you to write your own WordPress CSS to be applied to your website in the easiest way possible. It even has a live preview feature that will automatically update to show any changes you make without having to refresh the page. Handy!
You can find this in your own WordPress site by heading to the Admin Dashboard, then navigating to Appearance > Customise. In the left-hand sidebar you’ll see the Additional CSS option right at the bottom. Open this to paste in your additions.
Remember, you’ll need to be running the latest version 4.7 update to see this option. Reach out if you’re not entirely sure if you’re running the latest version and we’ll give you some assistance.
Simple WordPress CSS Tricks You Can Use Right Now
Here I’ll list some super simple CSS examples that you can begin using on your own website. Although we always recommend seeking the services of a professional developer (like us) for proper implementation, I’ve purposely chosen the following examples due to their ease of use.
All CSS code examples below (in the black boxes) can be copied and pasted into your own Additional CSS options box on your WordPress website. Let’s begin:
1. Text Highlight Colour
Have you ever highlighted text on a website and noticed that the colour changes on your selection? By default this is a blue colour that may not necessarily match your branding.
If you try selecting the text you’re reading right now on our website you’ll notice it’s a bright orange background colour and the text changes to a pure white – that’s because we customised it using the following WordPress CSS code. And you can too!
::selection { background: #F0502D; color:#FFFFFF; } ::-moz-selection { background: #F0502D; color:#FFFFFF; }
You’ll notice there are two core colours we’re defining here: the background selection colour is #F0502D and the colour of the text itself is #FFFFFF. We’re using 6-digit hex colours here to denote orange and white, respectively.
You probably won’t want to keep this orange colour on your own website. To get the hex colour codes for your own colour choice, we recommend using a resource such as http://htmlcolorcodes.com to find a suitable 6-digit hex code. Perhaps to match your branding or a key website accent colour.
2. Form Fields Focus
Chances are you have a form somewhere on your website – probably a Contact form or a Search box, for example. By default these can be a little plain and boring, so let’s create a style that will highlight a form field when a user clicks inside it.
Here’s an image of the style that we’re going to produce, with a neutral blue effect:
And here’s the CSS to reproduce that:
input:focus { border-color: #66afe9; box-shadow: 0 0 8px #66afe9; }
Again, we’re using a 6-digit hex colour code for the border-colour and box-shadow options – #66afe9 is a subtle blue shade. More colour codes can be found from the htmlcolorcodes.com resource we used previously; so again if you’re not happy with the default blue colour we’ve used, go ahead and choose your own.
Remember, this effect will only show once a user clicks inside the form field.
3. Rounded Corners on Images
A self explanatory one this, but browsing the web you may have seen examples of images that have soft rounded corners rather than sharp, square corners. Let’s take this image of yours truly as an example:
Sharp corners (default):
Rounded corners:
You can even go to extremes and round the corners so much that you change the shape of the image entirely:
Here’s the code you’ll need for mildly rounded corners, just like the second image:
.entry-content img { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
The important variable here is the 15px declaration. You may increase the number from 15 to have a more extreme curvature, or lower the number to return to a more squared shape. The ‘px’ part just means Pixels. Make sure you keep this in.
You can even use a service like http://border-radius.com that will give you the code to change each of the corners to have a different radius. This can give some more interesting effects, like this:
Do be aware, copying the code above exactly will change the corner radius of every image you’ve added to your body content on your pages. This may not be what you’re trying to do, so do make sure you adjust the code to ensure you’re targeting only the images you want. Get in touch if you need help with this.
4. Blockquote style
Blockquotes are a built-in style accessible right from the toolbar on the standard WordPress post editor. It looks like this:
By clicking this button and typing some text, WordPress will enclose it inside a Blockquote. Blockquotes serve as a great way to include quoted text inside your page content.
Ordinarily they’re a little plain, but I like to make them stand out from the rest of the page content like so:
This is what the ProWP Blockquote style looks like. You’ll notice it has a different font style (italics), background colour and a border accent to the left-hand side.
The code to achieve this exact style is as follows:
blockquote { padding: 15px 15px 15px 25px; background-color:#F9F6F3; border-left: 5px solid; border-color: #f0502d; font-style: italic; font-weight:300; }
As with all examples here, you’re free to change the colours to better suit your website.
5. Mouse Cursor Pointer Image
Hover over a link on any web page and you’ll probably notice that your mouse cursor changes. Ordinarily an arrow, you may find it changes to a little finger-pointing hand.
You can control the mouse cursor image entirely with CSS, and there are many different built-in options to choose from. If you want to get an example of each image, have a play with this tool I’ve embedded and hover your cursor over each option:
See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen.
Now, you have to be a little reserved when using this as users have grown to become familiar with certain cursors leading to certain events. If you stray too far from the norm you could cause confusion for your website visitors.
In the code below I’ve given you a couple of examples of subtle cursor changes. The first retains the default arrow cursor across a wider variety of website elements, and the second changes the cursor to a magnifying glass when hovering over a linked image.
body { cursor: default; } a img { cursor: zoom-in; }
Hover over this image to get an idea of what this second option looks like:
Make sure to change these to select any custom elements and show any cursor you wish. Check out the website http://css-cursor.techstream.org to get a full list of cursor styles to choose from.
6. Styling the first paragraph of a post
A neat typographical effect we can create is a way of mimicking written publications by setting a style for the opening paragraph of an article.
You may have seen this effect in magazines where the first paragraph may be a different size, font or colour to the rest of the article. This serves to catch and retain a readers attention.
In this snippet we’ll change the font style to small caps, the font type to serif, plus change the text colour to a dark blue and slightly increase the size:
.entry-content > p:first-of-type { font-variant: small-caps; font-size: 1.6em; line-height: 1.8em; color:#314A83; }
This paragraph you’re reading now is a real-life example of the text this code produces. All the text is upper case, but the Capitalised letters are automatically larger.
This code has been written to only target the first paragraph of text in a blog post of a typical WordPress website. There’s a small chance it may not work correctly on your site due to changes made by a Theme – but this can be rectified by altering the target element.
Of course, feel free to change the font size values and the colour hex code (as per previous examples) to match your existing website design.
Note: The use of !important
Not a style trick itself this one, but If you find that you’re having difficulty getting any of the code snippets above working, you may want to try something called the ‘!important’ declaration as a last ditch attempt.
The !important declaration is something you can add to a line of CSS to override previous CSS rules and ensure that your new CSS rule is the most ‘important’ rule to follow. It’s added like this:
a img { cursor: zoom-in !important; }
Note the positioning. It comes just before the semicolon of the CSS rule, and the preceding exclamation mark ( ! ) is vital.
But even now there’s still a chance your WordPress CSS rules may not work. CSS is very dependant on specificity, so there may be other CSS rules elsewhere in your website that are taking precedence. Welcome to the messy world of web development! You may want to just leave it to the pros.
Disclaimer
Please be aware that website development is a minefield of compatibility issues. There may be some things here that won’t show the intended effect depending on the device you’re using to view your website (Desktop PC, Tablet, Smartphone), or the browser you’re using (Chrome, Firefox, Internet Explorer etc.)
Sometimes the Theme your website is using may have its own CSS rules that would take precedence over the styles written here. In which case, they may not all work. And without further input from a website developer there’s not much that can be done unfortunately.
But don’t be afraid to give them a try. Nothing here is going to break your website in any way – and if you’re not happy with any results produced, just delete that particular bit of CSS code.
Have fun, and please do post any thoughts or questions in the comments below!