Wufoo Skin User’s Guide
We’ve put together a great user’s guide for Wufoo so you can see exactly how to customize the skin for your site. I’ve broken the guide out into sections and each guide contains explanations and code snippets for illustration.
The information provided should address most of the skin related questions, but I’m sure additional questions will come up and I’ll update the guide periodically when they do. If you have some feedback on the guide or need some help with a certain area, please feel free to shoot me a message via the contact form or on twitter.
The user guide is specific to the skin and is not intended to be a substitute for the Thesis support channels. The official Thesis user’s guide and support forums are still the place to get support for Thesis related issues outside of our skin.
Getting Started
- Installing the Skin
- Switching Color Schemes
- Using the Header Widget
- Changing the dimensions of the Header Widget
- Removing the Header Widget
Extra styles for extra customization
References
Installing the Skin
Download and unzip the skin file. You’ll see a new folder titled Thesis Wufoo Skin.
Next you’ll need to upload the skin files to your site using the same method you used when you originally uploaded Thesis. I use a free FTP Client called FileZilla but any FTP client will do the trick. Copy all the contents from the Thesis Wufoo Skin folder (not the folder itself) to the Thesis custom folder on your site. If you have already added customizations to your existing custom.css and custom_functions.php files that you don’t want to lose, remember to make a backup before overwriting them with the skin’s custom files.
After you’ve uploaded the skin’s files, you may need to make two small changes in your Design Options panel for the skin to display properly. In the Design Options panel, select Page framework and then change the Outer Page Padding to 1 (zero). Save your changes using the Big Ass Save Button and refresh your site and you’ll have the Thesis Wufoo Skin installed.
Back to the User’s Guide Table of Contents
Switching Color Schemes
On the bottom of the left hand side of the WordPress Dashboard, you’ll see a Thesis Options box and at the bottom of this box will be a link for Wufoo Options. Click on that link and you’ll see the skin’s option panel where you can select one of the 7 color schemes from a drop down box. Choose the color scheme you want to try and hit the big green save button. Refresh your site and check out your new color scheme!
Back to the User’s Guide Table of Contents
Using the Header Widgets
Go to the widgets panel from your WordPress Dashboard and in addition to the regular Sidebar 1 and Sidebar 2 widgets, you’ll see the Header Widget that comes with the skin. The Header widget behaves in the same manner as the sidebar widgets so you can drag and drop any of the WordPress widgets in there to add content to these areas.
If you’re wanting to add a banner or social media icons to the Header widget, I recommend using the standard text widget and adding the relevant html code. On the demo site, I’ve added a 468px (width) by 60px (height) banner using the following code into a text widget:
<div> <a href="http://www.yourlink.com"><img src="http://www.yoursite.com/banner.gif"></a> </div>
In the example code above, you’ll notice that in addition to the html for the link and the image, there is a special div class title header-adblock. This div class which is included with the skin adds a border to the banner which switches to a lighter color when the link is hoovered over. You can use this added CSS effect if you like or exclude the div class to create a link without the borders.
Changing The Dimensions of the Header Widget
By default, the Header Widget is set up to accommodate 468×60 banners and position them to the right of the header. If you’re using a different banner size, you may need to adjust one line of code in the custom.css file to position the banner the way you want it to be displayed.
To do this, locate the Custom File Editor at bottom of the left hand side of the WordPress Dashboard and then choose to edit the custom.css file. Under the header section of the custom.css file, look for the following line of code:
.custom #header_widget_1 ul.sidebar_list li.widget {position:absolute; display: block; top:0px; right:10px; width:468px; }
The top, right, and width attributes at the end of the CSS declaration are the one’s you may need to adjust.
The top value of zero means that the header widget is placed 0 pixels below the header (the title of your site). To move the widget positioning down, replace 0px with a value, i.e. 10px which would push the widget down 10 pixels. To raise the widget, enter a negative value, i.e. -10px.
Changing the right attribute is a similar manner would move the position further right or left.
The width attribute should also be changed from 468px to match the width banner you are using in the header widget.
Removing the Header Widget
If you aren’t planning on using these extra widgetized areas of the skin, you can remove them by commenting out or deleting their respective functions in the custom_functions.php file. To do this, open up the Custom File editor and choose to edit the custom_functions.php file. Add a /* before the function and a */ at the end of the function to disable these widgets.
Back to the User’s Guide Table of Contents
Paragraph Style Options
Out of the box, Thesis comes with two paragraph styles that you can use to make text stand out, the note class and the alert class. The skin has added some additional paragraph styles to go with the different color schemes.
The new paragraph styles can be called using the following code in your posts. The example code is for the note class. To use one of the other styles, replace the word note with the paragraph style you want to use.
<p class="note">Your note text goes here!</p>
This is the note class.
This is the alert class. Use alert instead of note
This is the blue paragraph style. Use bluep instead of note
This is the purple paragraph style. Use purplep instead of note
This is the green paragraph style. Use greenp instead of note
This is the red paragraph style. Use redp instead of note
This is the orange paragraph style. Use orangep instead of note
This is the brown paragraph style. Use brownp instead of note
This is the aqua paragraph style. Use aquap instead of note
Back to the User’s Guide Table of Contents
Button Style Options
Included in the skin are 7 different colored button styles with rollover effects. In the demo, I’m using them to switch between the different skin color schemes.
Gray Blue Aqua Purple Green Red Brown
You can use them for any link that you want to draw special attention to. To use the button styles, use the following code:
<span class="graypreview"><a href="http://yourlink.com">Title of your button</a></span>
The above code is for the gray button class. To use the other colors, replace graypreview in the above code with one of the following:
- aquapreview
- bluepreview
- purplepreview
- greenpreview
- redpreview
- orangepreview
- brownpreview
Back to the User’s Guide Table of Contents
Adblock Style Options
The adblock styles included with the skin are used for creating a border hover affect over image links. For example, take a look at the following banner link while hovering your mouse over it.
You’ll see a light gray border around the image that becomes a darker gray when the image is hovered over. If you’d like to use this effect in your blog, you can do so by enclosing the image link in the adblock div class like so:
<div class="adblock"><a href="http://www.thesistheme.net/thesis-wufoo"><img src="http://www.thesistheme.net/thesis-wufoo/images/wufoo-premium-260x125.gif"></a></div>
If you’d like to change the border colors from gray to a different color, you can do so by going into the custom file editor and editing the custom.css file. Look for the following section of code under the Other Customizations section:
.custom #adblock img {margin:1px;}
.custom div.adblock a:hover img {border:3px solid #bebebe;}
.custom div.adblock a img {border:3px solid #ddd;}
.custom div.adblock img {padding: 1px; }
To change the border colors, modify the color codes to whatever color you would like to use.
Back to the User’s Guide Table of Contents
Changing Headline Fonts
Traditionally you can control every font displayed throughout your theme using the Thesis Design panel. However in this skin, I wanted to use a font (Myriad Pro) that wasn’t available in the Design panel for the headline areas (post titles, page titles, widget titles) and so its been coded into the custom.css which will override any font selection you choose for the Headlines in the design panel.
If you want to change this font setting, you can either delete the font settings set in the custom.css file, returning control of the font settings to the design panel, or change them to a different font that you want to use.
Either way, you’ll need to access the custom.css file from the custom file editor. Once there, look for the following code which will appear in several places:
font-family: "Myriad Pro",Helvetica,Arial,sans-serif;
If you want to return control of the font settings to the design panel, delete this line of code ending with a semi-colon. If you want to simply change the font settings, type your new fonts over the old ones using the same format. The reason that there are several fonts listed is that I’ve provided alternative fonts in case the user’s browser cannot display the primary one. So in the above example, Myriad Pro is the font. If the user’s browser cannot display that one, it moves on to Helvetica, and so on.
Back to the User’s Guide Table of Contents
or 
