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!
Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding WordPress tips & tricks. If you are looking for hire wordpress expert then just get in touch with her.
|
|
| By Deepa Ranganathan On 06 May, 15 Viewed: 410 |
In the past, posting links to your Twitter meant your user needed to click on the link to know more about it. It never showed a synopsis. But, things have changed with Twitter cards. You can attach the title, and a brief preview of the content along with the link. This is almost similar to pasting... By Deepa Ranganathan On 12 May 2015 Viewed: 1,322
What do you see when you click on Admin post list in your Wordpress website? A list of all the posts created by you is displayed with their titles and dates. But, that's about it which is displayed! You won't be able to see any other details related to your post. So, if you want to display some... By Deepa Ranganathan On 08 May 2015 Viewed: 536
If you go through the list of default page types in Wordpress, you will realize that you hardly use the archive page. It is not popular as it does not offer user friendliness. Did you know you could customize the archive page programmatically? Let's see how it's done. But, before getting started... By Deepa Ranganathan On 22 May 2015 Viewed: 639
There are many instances when you want to speed-up the theme development process, and look out for ways to do it. One of the easiest methods to speed-up theme development is including bootstrap components to your wordpress theme. Here you will learn how to integrate bootstrap navbar in your... By Deepa Ranganathan On 20 May 2015 Viewed: 329
If you want to modify the Wordpress theme, you will need to offer customization in the function.php file within the theme. Within this file, all the relevant data related to the theme is present, and accepts unlimited number of modifications. You can get this file within the themes folder of your... By Deepa Ranganathan On 18 May 2015 Viewed: 318