Top 7 CSS Design Tips for WordPress

Objavljeno - Zadnjič spremenjeno

WordPress is the world's most popular tool for developing websites, but there will come a time when you would want to perform a customization that is not easily done through your theme settings. If you use a high quality premium theme, you will have loads of options, including changing font sizes and turning various style functions on and off. However, you can also do this manually.

Here are seven CSS design tips for WordPress. Remember, if you are making any of these changes to your stylesheet, make sure you back it up beforehand so that you can reverse anything that does not work as you want it to.

1. Fonts

This is one of the most basic design changes you can make to a WordPress website. Here are your options with some common values:

font-size: 14px;
font-family: "Times New Roman", Times;
font-style: italic;
font-weight: bold;
line-height: 1.6em;

In addition, you can write them in shorthand:

font: italic small-caps bold 14px/1.6em "Times New Roman", Times;

2. Images

There are a few things you can do to your images with CSS to make them look better and stand out more on your page. The first is to create a border:

img {
    border: 5px solid #000000;
}

This will put a solid, five pixel black border around your image.

You can pick any color you want, and any width. Your style options include dashed, hidden, double and ridge as well as solid.

You can also create a drop shadow effect. Here is how:

img {
    -webkit-box-shadow: 5px 5px 3px #888;
    box-shadow: 5px 5px 3px #888;
}

This will create a five pixel grey shadow under and to the right of the image. You can move where the shadow falls by changing the first two attributes (x-offset and y-offset - both 5px in this example). The third attribute determines the blur of the shadow, which in this example is 3px. The final attribute is the color, which in this example is #888 which is grey.

3. Backgrounds

To change the color of your website's background you need to change the background-color attribute. Yours will probably look like this:

background-color: #ffffff;

That means you have a white background. You can change it to any color you want using HEX color codes.

You can also add a background image to your website. The best way to do this is to have a fixed image so that your content scrolls over the top of the background. The code should look something like this:

body {
    background-image:url('YourBackgroundImage.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

4. Links

You can change the way the links are displayed on your WordPress website. You have four options that you can alter:

·         link - the style of a link that has not been visited

·         visited - the style of a link that the user has already visited

·         hover - the style of a link when the user hovers their mouse cursor over it

·         active - the style of a link the moment it is clicked

Here is an example of a link that will display as blue:

a:link {
    color:#0000FF;
}

To change this link to red when a user hovers their mouse over it, use:

a:hover {
    color:#FF0000;
}

To change it to grey for a link that has already been visited, you could use:

a:visited {
    color: #888;
}

5. Margins

Margins are a simple way to give you space around an element on the page, such as an image or widget area. The code is simple:

margin: 20px 3px 10px 6px;

This will give a 20px margin at the top, 3px to the right, 10px to the bottom, and 6px to the left.

If you use:

margin: 10px;

You will get a 10px margin on all four sides.

6. Grids

Grids, using divs, are a great way to display content on your page. If you had a five-column grid, your HMTL would look something like this:

<div class="grid">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
</div>

You could then add this styling to your CSS stylesheet:

.grid {
    float: left;
    margin: 0 2% 1em 0;
    width: 18%;
}

.grid:nth-child(5n) {
    margin-right: 0;
}

.grid:nth-child(5n+1) {
    clear: left;
}

7. Developer Tools

Finally, if you don't use developer tools in your browser, you should start using some now. That way, you can test all of these changes on your website without altering the actual code. Both Chrome and IE have developer tools built in, and you can install the popular Firebug app if you use Firefox.

Objavljeno 21 december, 2014

Happymarli

Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical documents, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, or articles? Do you want to make sure that your marketing material content is flawless and appealing to readers? I can do any of that! I am a professional editor (academic, copy, line/su...

Naslednji članek

Find Your Niche Before You Pitch