Upload
quentin-brown
View
30.099
Download
0
Embed Size (px)
DESCRIPTION
How to edit your wordpress themes using style sheets for a much improved look and customization.
Citation preview
WordPress Working with CSS
• How to change your worpress themes using wordpress and CSS style sheets
Wordpress and CSS
Don’t Get Scared
1. Set up a test blog2. Load a theme3. Get Ready to be amazed
Get A Color Picker
A color picker will help you a lot in finding just the right color for your themes text etc.www.tucows.com/preview/240092
How to Find your CSS Stylesheet
1. Log into your Wordpress2. Go to Presentation3. Navigate to Theme Editor4. Click on Stylesheet
What does it look Likebody {
background: #E0E0E0;color: #000000;font-size: 13px;font-family: Arial, Verdana, Sans-Serif;margin: 0px 0px 0px 0px;}
Change and check
• Use the color checker to find the color you want then substitute in your css and you have change the color.
• If you want your default text a little bigger change the font-size: 13px to maybe 14px
Change and check
• Save and open up a new tab in your browser and see what the changes have done to your blog
• When you make changes just hit the refresh in your browser to see the changes.
Header Graphic#header {
width: 860px;height: 190px;background: #2397E9 url(images/header.jpg) top center no-repeat;padding: 0px;margin: 0px;text-align: left;border: 1px solid #E0E0E0;border-bottom: none;.
Content pane can be easily changed.#content {
display: block;background: #ffffff;width: 540px; margin-top: 20px;margin-bottom: 20px;margin-left: 30px;margin-right: 30px;float: left; position:relative;padding: 0px;}
Change the size of the content main window but be sure to also change the size of your side bar width if you make the main content window bigger.
Sidebar pane can be easily changed.#sidebar {
display: block;color: #000000;width: 200px;float: right; position:relative;margin: 10px 10px 10px 0px;padding: 10px 10px 10px10px;text-align: left;border: 1px solid #cccccc;}
Change the size of the sidebar and you can also adjust the padding, margins etc.
As you can see it is just a bit of testing to see what they all do.
Opps I made a BOO BOO.
Don’t get distraught
Just upload your CSS.php file from your template files and it will all go back to the original settings.
When you happy with your changes create a new folder and download all your theme changes for you next install.
Play and Learn
As you get more used to changing the different facets you will find it a lot of fun.
You can always use CTRL + F to find anything you want.
Have Fun
Come Visit us at www.bloggingempires.com
For more great tutorials