User’s Guide

Clean Cut is a cleanly designed yet simple to use skin for Thesis and therefore the user’s guide for this skin is actually straight forward. 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.

Installation Instructions and Video

Download and unzip the skin file. You’ll see a new folder titled clean-cut-thesis-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 the custom.css, custom_funtions.php, javascript, images files and folders from the clean-cut-thesis-skin (not the folder itself) to the Thesis custom folder on your site. The dark-color-scheme folder does not need to be copied at this point, we’ll get to that later (bottom of this page).

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 check a couple settings in your Design Options panel for the skin to display properly.

  • In the Design Options panel, make sure you are using the Page framework.
  • Also in the Design Options panel, the column order should be the content on the left and 1 sidebar on the right layout seen here on the demo site. Other layouts can be used but will require some tweaking of the custom.css file.

Save your changes using the Big Ass Save Button and refresh your site and you’ll have the Clean Cut Skin installed.

See the following video for further instruction on how to install the skin.

Using the Header Widget

The skin comes with a widgetized header area that you can use to banner ads or display social media icons as seen here on the demo page. To use this widget, 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 and 5 Footer widgets that come with the skin. These additional widgets behave 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.

Adding an advertising banner to the Header Widget
To add a banner, say a 468×60 banner for an affiliate program you are participating in, you would simply add the code like the following to the Header Widget using a standard text widget:

1
2
3

<div class="adblock">
<a href="http://www.your-link.com"><img src="http://www.your-website.com/image.gif"></a>
</div>

The adblock code creates a border with a hover effect around the banner. It is optional and can be excluded if that is your preference.

Adding social media icons to the Header Widget
You can also add a series of social media icons, like those seen here on the demo site, to your header widget using the social lists styles included with the skin. To add a series of 4 icons, RSS, Twitter, Facebook, and Flickr for this example, you would use code similar to the following added via a standard text widget:

1
2
3
4
5
6

<ul id="social">
<li><a href="#"><img alt="Flickr" src=http://www.your-website.com/images/flickr.png"></a></li>
<li><a href="http://www.facebook.com/your-account"><img alt="Facebook" src="http://www.your-website.com/images/facebook.png"></a></li>
<li><a href="http://twitter.com/your-twitter-id"><img alt="Twitter" src="http://www.your-website.com/images/twitter.png"></a></li>
<li><a href="http://www.your-website.com/feed/"><img alt="RSS Feed" src="http://www.your-website.com/image/rss.png"></a></li>
</ul>

The CSS used floats the icons to the right (right side of the header) so you’ll actually want to add your icons in reverse order. In the list above, the RSS icon will appear first and the Flickr icon will be last.

Disabling the Header Widget
Maybe you don’t want to use the Header Widget at all at this point. There are a few different ways you can disable this widget.

If you want to hide the widget for the time being and save it for use at a later date, you have two different options.

  1. You can hide the widget by adding an empty text widget (no title or content) to the header widget.
  2. You can can comment out the header widget code in the custom_functions.php file by adding a /* before the beginning (before the register_sidebars) and a */ at the end of the function (after the add_action line) seen below. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*Build Header Widger*/
register_sidebars(1,
    array(
        'name' => 'Header Widget',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
 
function header_widget() { ?>
	<div id="header_widget_1" class="sidebar">
		<ul class="sidebar_list">
			<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget') ){	?>
						<li class="widget"><h3><?php _e('Header Widget', 'thesis'); ?></h3>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</li><?php } ?>
 
		</ul>
	</div>
<?php }
add_action('thesis_hook_header', 'header_widget', '1');

If you want to permanently delete the header widget from the skin, you can delete the above function in its entirety from the custom_functions.php file. Be careful not to delete any of the other functions though or the skin may no longer function properly.

Changing the Color Scheme

The skin comes with two different color schemes, light and dark. By default the skin uses the light color scheme. If you want to use the dark color scheme, you’ll simply need to upload the alternative custom.css file stored in the dark-color-scheme folder that comes with the skin to your Thesis custom folder and overwrite the default (light color scheme) custom.css.

To switch back, just go back and upload the default custom.css and re-overwrite the dark color scheme custom.css

See the installation video again where I switch the color schemes back and forth for further instruction.

Comments on this entry are closed.