You can use this Widget in addition to, or in place of, the Subscribe Link in your Nav Menu. (See Customize and Style Subscribe Link for more information on adding a Subscribe Link to your Nav Menu.)

To add the widget to your sidebar, go to Appearance > Widgets, look for the widget named Subscriptions, and drag it to the desired sidebar on the right. Then, configure your options:

• Title

  This is the heading which will appear above the widget in the sidebar.

• Describe your subscription options

  If you’d like to add some introductory or explanatory text about the subscription options you offer, you can enter it here.

• RSS link text

  Thesis will automatically use the Feed URL you have entered under Site Options > Document Head > Syndication/Feed URL for this link, so the only thing you need to enter here is the text you want Thesis to use for the link.

  (See Set Your Feed URL for more information on configuring this option.)

• Email link and text

  If you offer a service where your subscribers can be notified of new posts via Email, you can use this option to display the link for this. Note that you should enter your information in the proper HTML format for creating a link.

If you’re using Thesis 1, small icons should be automatically displayed next to the RSS and Email links. To modify these styles, start with the following code in custom.css:

.custom .thesis_widget_subscriptions .sub_rss a {
  padding-left: 20px;
  background: url('../lib/images/icon-rss.gif') 0 50% no-repeat;
}

.custom .thesis_widget_subscriptions .sub_email a {
  padding-left: 20px;
  background: url('../lib/images/icon-email.gif') 0 50% no-repeat;
}

Attention! The following instructions are deprecated as of Thesis 2.1.

If you’re using Thesis 2, you’ll need to deploy your own CSS styles to display the icons. Create a new Single Element Styles CSS Package named Subscriptions (with a Reference of subscriptions and a CSS Selector of .thesis_widget_subscriptions), and then place this code in the Additional CSS tab:

.thesis_widget_subscriptions .sub_rss a {
  padding-left: 20px;
  background: url('images/icon-rss.gif') 0 50% no-repeat;
}

.thesis_widget_subscriptions .sub_email a {
  padding-left: 20px;
  background: url('images/icon-email.gif') 0 50% no-repeat;
}

Save the package; add &subscriptions to the Skin CSS; and then click SAVE CSS to compile your changes.

Standard Widgets all receive the class of .widget assigned to them, so this can be used whenever you want to apply the same styles to every widget. Here are some examples:

/* Make all widget headings red */
.custom .widget h3 {
   color: red;
}

/* Specify bottom padding on all widgets */
.custom li.widget {
   padding-bottom: 15px;
}

/* Specify bottom margin on all widgets */
.custom li.widget {
   margin-bottom: 2.769em;
}

Apply Styles to Individual Widgets ∞

To style individual widgets, first determine their unique class or ID by viewing the source code of a page on your site (or using FireBug). For example, here’s the opening code for the Categories widget on the Answers blog:

<li class="widget widget_categories" id="categories-411758441"><h3>Categories</h3>

So, to style that specific widget, we can reference it like this in custom.css:

.custom li.widget_categories h3 {
   color: green;
}

Or, we could alternatively use the unique ID:

.custom li#categories-411758441.widget h3 {
   color: green;
}

The ID method is particularly useful when you have multiple text widgets on the page, and need to distinguish between each one. Here’s an example of the opening code for a text widget:

<li class="widget widget_text" id="text-280006071"><h3>Random Text Widget</h3>

So, to style that text widget in custom.css, we’d use this:

.custom li#text-280006071.widget h3 {
   color: yellow;
}

Style Archive Drop Down Widget ∞

Place this code in custom.css, and adjust to your requirements:

.custom li.widget_archive select {
   border: 1px solid red;
   color: blue;
   font-size: 1.5em;
}

Specify Image as Heading ∞

This is an example using the ID of the Random Text Widget from above:

.custom li#text-280006071.widget h3 {
   height: 46px;
   background: url(images/twitter.png) no-repeat;
   text-indent: -9999px;
}

Note that the image is being stored in the custom/images/ folder.

Also, remember that you’ll still need to determine the unique class or ID for each widget, as noted under Apply Styles to Individual Widgets, and use it in the selector name in your CSS rule.