Wordpress CSS Editing

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

5 comments

Comments 1 - 5 of 5 previous next Post a comment

  • + haaaajs haaaajs 8 months ago
    بنات سبيشل
  • + guest69e55c guest69e55c 11 months ago
    You can download a plugin which allows you edit CSS without touching the original theme files - great if you sometimes upgrade your theme, or have problems with file permissions. Even better, you can test CSS without the changes being visible to other users!
  • + guest89a51a guest89a51a 3 years ago
    Great video, You answered a question I had about sizing and couldn’t find by pouring over the pages at wordpress. It’s easier to watch on video..... Please keep up the good work...



    Gary

    www.NfoNut.com
  • + msincome Quentin Brown 3 years ago
    Maybe you need to change your computer settings. If you see a bar on the top of your browser you need to enable it.

    Q
  • + guestb62b7a guestb62b7a 3 years ago
    slideshow does not seem to play!
Post a comment
Embed Video
Edit your comment Cancel

31 Favorites & 3 Groups

Wordpress CSS Editing - Presentation Transcript

  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

+ Quentin BrownQuentin Brown, 3 years ago

custom

13356 views, 31 favs, 21 embeds more stats

How to edit your wordpress themes using style sheet more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 13356
    • 13180 on SlideShare
    • 176 from embeds
  • Comments 5
  • Favorites 31
  • Downloads 526
Most viewed embeds
  • 75 views on http://avancesinformaticos.wordpress.com
  • 24 views on http://www.warriorforum.com
  • 22 views on http://bloggingempires.com
  • 15 views on http://blogs.osweb2design.com
  • 8 views on http://www.jltdigital.org

more

All embeds
  • 75 views on http://avancesinformaticos.wordpress.com
  • 24 views on http://www.warriorforum.com
  • 22 views on http://bloggingempires.com
  • 15 views on http://blogs.osweb2design.com
  • 8 views on http://www.jltdigital.org
  • 6 views on http://www.adii.co.za
  • 5 views on http://apprentieweb.blogspot.com
  • 4 views on http://rotces.blogspot.com
  • 3 views on http://gisystems.blogspot.com
  • 2 views on http://www.espacioblog.com
  • 2 views on http://localhost
  • 1 views on http://ocupemlestic.net
  • 1 views on http://www.createwebsite.info
  • 1 views on file://
  • 1 views on http://www.wahrweb.org
  • 1 views on http://yoan
  • 1 views on http://rezka.wordpress.com
  • 1 views on http://127.0.0.1
  • 1 views on http://toolsweb20.blogspot.com
  • 1 views on http://s3.amazonaws.com
  • 1 views on http://www.cms.rk.edu.pl

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Groups / Events