Not everyone can afford to have a custom designed theme for their WordPress website. Often we have to resort to the themes that are available for free or cheap. But how do we avoid having the website look the same as everyone else’s who used the same theme?
I will show you how to take the most common WordPress.org themes and turn them into the unique look you want. Google Chrome or Firefox recommended. No coding knowledge is required, but you will learn some basic CSS.
7. CSS Basics
• HTML can be defined using CSS by ID, CLASS, TAG, or inline style.
• CSS uses {curly brackets}
• CSS code is a supplement to HTML, not a replacement.
10. Syntax of CSS – in stylesheet
input[type="submit"] {
border: 1px solid #ccc;
border-color: #ccc #ccc #bbb #ccc;
background: #e6e6e6;
color: #262626;
cursor: pointer; /* Improves usability and consistency of cursor style */
-webkit-appearance: button; /* Corrects style of 'input' types in iOS */
font-size: 12px;
font-size: 1.4rem;
line-height: 1;
padding: 5px 2%;
}
11. Selectors
• Tag (h1, h2, div, a, img, body...)
-Affects all elements of a tag
• ID ( #elementid )
-Used for unique items on a page
• Class ( .elementclass )
-Affects all elements that have been assigned the class
• Inline CSS (<element style="style_definitions">)
-Written into HTML, takes top priority. Can be added in the HTML tab
12. Grouping Selectors
• Comma “,” allows multiple selectors for 1 declaration. “h1, h2, h3 {color: blue;}”
• Space “ ” searches first for all instances of second “.postbody img {border: 1px;}
• Right Chevron “>” searches for direct children “td > a {font-variant: small-caps;}”
• More information about selectors: http://www.w3schools.com/cssref/css_selectors.asp
20. Resources
• Great list of CSS properties with examples
http://www.w3schools.com/cssref/default.asp
• Enter any CSS or URL to have it explained to you
http://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
• Great resource for anything code related on your website
http://www.w3schools.com/
• WordPress Forums where people like me are able to help you.
https://wordpress.org/support/