Customizing Themes Using Thesis

158 views
120 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
158
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Customizing Themes Using Thesis

  1. 1. Customizing your WordPress Blog using Thesis Theme Ann Zerega www.annzeregadesign.com
  2. 2. I’m creating a Greyhound Fan site using WordPress MU and Thesis for the initial design <ul><li>I laid out the clickable header graphics using the custom.css style sheet in Thesis </li></ul><ul><li>Now I can customize the rest of the blog from the Thesis Options and Design Panel </li></ul>
  3. 3. What Can I Customize? - Thesis has two dashboards that control customization <ul><li>Thesis Options dashboard and.. </li></ul><ul><li>Thesis Design Options dashboard </li></ul>
  4. 4. The Thesis Options dashboard allows you to set the following theme options <ul><li>Pages to include in the navigation with a very cool drop/drag UI to change page order </li></ul><ul><li>Default Post Image settings </li></ul><ul><li>Display Options such as showing the site name or tagline in the header or default sidebar widgets </li></ul><ul><li>Settings for Bylines, Posts, Archives, Tagging and comments </li></ul>
  5. 5. The Thesis Design Options dashboard allows you to set the following theme options <ul><li>Framework Options – specify if you want page or full-width framework </li></ul><ul><li>Site Layout – specify one, two or three column layout using pixel based measurement </li></ul><ul><li>Fonts, Colors and More – use the color picker and pull down menus to set font size, font color and rollover colors for your navigation bar and navigation sub – menus </li></ul><ul><li>Multimedia Box – either turn off or customize the media box with your images </li></ul>
  6. 6. Using the built in Tools in Thesis can save you a lot of time customizing your blog <ul><li>Start Here : </li></ul>15 minutes later :
  7. 7. Resources <ul><li>Custom CSS for initial page layout: </li></ul><ul><li>body.custom { padding: 0;margin: 0;background-color: #cccccc; </li></ul><ul><li>/*the width and height are required so the complete background renders in Firefox*/ </li></ul><ul><li>width: 100%;height: 100%; } </li></ul><ul><li>/* custom page color */ </li></ul><ul><li>.custom #page { background-color: #ffffff;} </li></ul><ul><li>/* custom header */ </li></ul><ul><li>.custom #header{ </li></ul><ul><li>background-color: #ffffff; </li></ul><ul><li>padding: 0px 0px 0px 10px; </li></ul><ul><li>height: 200px; </li></ul><ul><li>outline: none; </li></ul><ul><li>/*IE hack to fill in gap in box*/ </li></ul><ul><li>border-bottom: 1px #cccccc solid; } </li></ul><ul><li>/* clickable header logo*/ </li></ul><ul><li>.custom #logo a{ </li></ul><ul><li>display: block; padding:0px 0px 0px 50px; </li></ul><ul><li>text-indent:400px; </li></ul><ul><li>height: 200px; position:absolute; </li></ul><ul><li>background: url('images/greyhounds_logo_all.png') center left no-repeat; } </li></ul><ul><li>/*header repeating image for layout flexibility*/ </li></ul><ul><li>.custom #header #tagline { </li></ul><ul><li>display: block; height: 180px; </li></ul><ul><li>margin-left: 200px; </li></ul><ul><li>background: url('images/banner.png') repeat-x; </li></ul><ul><li>outline: none; } </li></ul><ul><li>/*footer color*/ </li></ul><ul><li>#footer{ background-color: #ffffff; } </li></ul>

×