5 CSS Customizations for Your Wordpress Website
Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look appealing and interactive. Here are a few hacks that will help you redesign CSS stylesheets for your Wordpress website. Pre-requisites Before moving on to the different customizations, you need to know what all is required for you to get started with it You need a theme with CSS options OR a custom CSS plugin OR a child theme to get started. In case you are using a theme with CSS options, go to appearance>theme options>Edit CSS as a headline You can install the simple custom CSS and edit the CSS along the path appearance>customCSS
Finally, you have the option of using a child theme. Either install a plugin or duplicate a particular theme and create a child theme out of the duplicate. Create a folder, give it a name, create the CSS stylesheet for this new theme, and import the stylesheet from the main theme using the below mentioned code @import url("../THEMENAME/style.css"); Now, let's get started with the customizations that you can make with your CSS stylesheet. Customizing the Background Color Before you begin with customizing the background theme, you may want to understand is the background color available in the body or does it own a separate frame. In case, your background color is available within the body, changing or customizing it requires only a simple edit. body { background-color: #477C67; } You can even use plug-ins to change the background color. W3Schools HTML color picker is one of the plug-in that you can use to customize the stylesheet. What if you want to set an image along your background? Here is a code that you might want to use to make the necessary customization body { background: url(location/img.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
} The background image will remain static throughout the scrolling period. Legible Theme There will be themes which might be really appealing and attractive but offer grey or white fonts that don't look good with the background. Here's a simple trick that may improve the readability of the fonts. body { font-size: 16px; color:#000 } You can change the color code to give the fonts your choice of color. You can change the font type using the code below body { font-family: Arial, Helvetica, sans-serif; } Customizing Link Appearance Let's say you want to customize the color of the link appearing in your post. Use this code to make the necessary changes a{ color: #BA2323; } Want to customize link behavior on mouse hover? Here's the code that you can use. This will help you change either the primary or background color (it
depends on you what you want to change). You can even generate an underline on mouse hover. a:hover { color: #222; background-color:#BA2323; } Customizing the Headlines In case of Wordpress, the headlines lie in h1 and sub headline lies in h2. The styling of headlines is very theme specific. Let's say your theme changes the color of the headlines, then you may want to make changes in the "some style" code within the h1 code "<h1 style="some-style"></h1>" In case you want to make few more customizations, other than the standard color based customization, you might want to install the browser extension that will show you the CSS style being used for the text you have selected. Go to Appearance>Editor and then search for "some style". This style is generally the "entry-title". Now read through the style and figure out what changes you want to make here. In case you want to edit the size and color of the headline, here's your code .entry-title { color: #WANTEDCOLOR; font-size: WANTEDSIZEpx; } .entry-title a { color: #WANTEDCOLOR; }
Customizing Color Schemes in Widgets If you want to customize the color scheme of the widget, then the ideal way would be to keep the background color of the widget different from the color of its text. Identify the style class of the widget; you are planning to customize, in order to make the necessary changes. You can identify widget-title, and change the title if you want. If you want to change the color, here's your code that you will need to use within the .widget class. .widget { background: #COLOR; } .widget-title { background-color: #COLOR; }
Note: Backup of your default theme appearance is a must before you begin customizing.
Conclusion These hacks are pretty simple, and can be attempted at the beginner level. With these customizations, you will give your website or blog a delightful and interactive appearance that will make users want to visit and stay on your website. You don't need coding knowledge to make these changes!
Original Source: https://medium.com/@semaphoresoftware/5-css-customizationsfor-your-wordpress-website-d25e7dc984b