WordPress Working with CSS

• How to change your worpress themes
  using wordpress and CSS style sheets




   Wordpress a...
Don’t Get Scared

1. Set up a test blog
2. Load a theme
3. 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.tucow...
How to Find your CSS Stylesheet

1.   Log into your Wordpress
2.   Go to Presentation
3.   Navigate to Theme Editor
4.   C...
What does it look Like
body {
   background: #E0E0E0;
   color: #000000;
   font-size: 13px;
   font-family: Arial, Verdan...
Change and check
•   Use the color checker to find the color you
    want then substitute in your css and you
    have cha...
Change and check
•   Save and open up a new tab in your
    browser and see what the changes have
    done to your blog

•...
Header Graphic
#header {
    width: 860px;
    height: 190px;
    background: #2397E9 url(images/header.jpg) top center no...
Content pane can be easily changed.
#content {
                            Change the size of the
     display: block;
   ...
Sidebar pane can be easily changed.
#sidebar {
                                    Change the size of the
      display: b...
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...
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 CT...
Have Fun

    Come Visit us at
www.bloggingempires.com
 For more great tutorials
Upcoming SlideShare
Loading in …5
×

Wordpress CSS Editing

31,608 views

Published on

How to edit your wordpress themes using style sheets for a much improved look and customization.

Published in: Technology, Business
5 Comments
41 Likes
Statistics
Notes
No Downloads
Views
Total views
31,608
On SlideShare
0
From Embeds
0
Number of Embeds
3,229
Actions
Shares
0
Downloads
913
Comments
5
Likes
41
Embeds 0
No embeds

No notes for slide

Wordpress CSS Editing

  1. WordPress Working with CSS • How to change your worpress themes using wordpress and CSS style sheets Wordpress and CSS
  2. Don’t Get Scared 1. Set up a test blog 2. Load a theme 3. Get Ready to be amazed
  3. 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
  4. How to Find your CSS Stylesheet 1. Log into your Wordpress 2. Go to Presentation 3. Navigate to Theme Editor 4. Click on Stylesheet
  5. What does it look Like body { background: #E0E0E0; color: #000000; font-size: 13px; font-family: Arial, Verdana, Sans-Serif; margin: 0px 0px 0px 0px; }
  6. 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
  7. 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.
  8. 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;.
  9. Content pane can be easily changed. #content { Change the size of the display: block; content main window background: #ffffff; width: 540px; but be sure to also margin-top: 20px; change the size of your margin-bottom: 20px; margin-left: 30px; side bar width if you margin-right: 30px; float: left; make the main content position:relative; window bigger. padding: 0px; }
  10. Sidebar pane can be easily changed. #sidebar { Change the size of the display: block; sidebar and you can color: #000000; width: 200px; also adjust the padding, float: right; margins etc. position:relative; margin: 10px 10px 10px 0px; padding: 10px 10px 10px As you can see it is just 10px; text-align: left; a bit of testing to see border: 1px solid #cccccc; what they all do. }
  11. 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.
  12. 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.
  13. Have Fun Come Visit us at www.bloggingempires.com For more great tutorials

×