Your SlideShare is downloading. ×
0
Customizing Themes Using Thesis
Customizing Themes Using Thesis
Customizing Themes Using Thesis
Customizing Themes Using Thesis
Customizing Themes Using Thesis
Customizing Themes Using Thesis
Customizing Themes Using Thesis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Customizing Themes Using Thesis

84

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
84
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Customizing your WordPress Blog using Thesis Theme Ann Zerega www.annzeregadesign.com
  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. 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. 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. 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. 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. 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>

×