Duet is a minimal, sophisticated, responsive theme tailored for writers, journalists, and business bloggers. Duet has a set of meticulously crafted and refined options, providing you with the power to effortlessly customize your theme. Some of the features include: two-column layout (using CSS3), custom typography, custom color schemes, and a flexible featured slider.
Responsive design
Duet has been designed using a mobile first approach; this responsive theme looks amazing in the browser and equally as awesome on your iPad, iPhone or other mobile device.
Custom Typography
Duet provides you with a range of beautiful typography choices from the convenience of your Theme Options panel. With ten accent fonts, and five body fonts, feel free to mix-and-match until you discover the perfect typographic style for your website.
Custom color schemes
Duet offers three (blue, orange, and green) stunning color options. With the click of a button, you can easily customize your theme’s color scheme.
Images
Image posts in Duet utilize the Featured Image to showcase an individual photograph. A link is provided to the full-size image, so there is no limit to the resolution you use.
Galleries
Galleries are easy to set up. You just need to:
- Select the Gallery post format.
- Upload the images you would like to appear in your gallery.
- Insert the gallery shortcode into your content, and you’re done!
Your gallery will display as a slideshow, specially designed for Duet:
Of course, you also have the flexibility to create inline galleries using the Standard post format.
Videos
Videos also look great in Duet. Just select the Video post format, and paste your embed code or use the WordPress.com standard shortcodes – that’s it!
Theme Options
In addition to the various supported Post Formats, there are a refined set of options available throughout Duet’s Theme Options page, including:
- The choice to upload your own custom logo image.
- Customizable featured slider.
- Option to control the sidebar display.
- A range of typography choices, and theme color schemes.
- Options to hide the author, tags, and categories from posts.
- The ability to easily add handcrafted Twitter, Facebook, Google+ and Flickr icons into your footer.
Duet is crafted to look great from the moment you install it; and the options are easy to configure. This means less time setting up your theme, and more time focusing on writing quality content.
Quick Specs (
all measurements in pixels):
- Duet is a flexible-width design.
- Individual column maximum width is
410.
- Theme maximum width is
880.
Duet theme documentation
Posting overview
Duet supports 4 post formats, selectable from the Edit Post screen: standard (text), image, gallery and video.
The post format you choose determines how your post will look, and each format requires a slightly different setup to work properly.
Posting articles
Normal articles should use the Standard post format.
Using the two-column format
By default, Standard posts will use Duet's two-column layout for the content. If you'd prefer to use a single-column layout for your post, you can check the option to "Disable two column formatting on this post" from the Duet Post Options meta box (usually near the bottom right side of the Post Edit screen).
Note: Duet uses modern techniques to generate the two-column look. We've done our best to allow two-column articles to be displayed across all browsers, but with certain content on particular browsers (particularly Internet Explorer 8 and older) the two-column view does not render correctly.
Manually choosing the column breakpoint (advanced)
In some cases, Duet's default column break may not work well with your content. There is a workaround, but it's slightly technical, so you'll need to follow these steps precisely:
- Make sure you are done editing your post in Visual mode
- Change to HTML mode
- Insert
<!--duet-break--> immediately following the word you want the column break to appear on
- Save your post, and avoid switching back to Visual mode
Note: The WordPress editor likes to strip out the <!--duet-break--> code when switching between Visual and HTML mode. If you insert the <!--duet-break--> code immediately following a word, it will prevent WordPress from stripping the code out.
So, if possible:
Do this:
Don't do this:
Posting images
To publish a single highlighted image, select Image as your post format. Then, set the Featured Image of your post to the image you want to highlight.
The Featured Image will be included at the top of the post and includes a link to the full-size image.
Posting galleries
To publish a gallery of images, select Gallery as your post format. Then, upload your images to your post using the WordPress media uploader. Finally, insert your gallery into the content of your post using the [gallery] shortcode.
Here is a great article explaining how to upload images and insert a gallery.
Would you like to autostart your gallery? If yes, please read through the section of this theme's documentation about enabling gallery autostart.
Of course, you can also use the default WordPress gallery in the Standard post format.
Enable slideshow on page templates or non-gallery posts
To enable a slideshow on a page or non-gallery post, add your gallery; then, paste the following shortcode into your page content, replacing the default [gallery] shortcode:
[gallery slider="true"]
Using the regular [gallery] shortcode will remove the slider styling and return to the default WordPress gallery.
Enable gallery autostart
To autostart a slideshow within a gallery post, add your gallery; then, paste the following shortcode into your post content, replacing the default [gallery] shortcode:
[gallery autostart="true"]
To autostart a slideshow within a page template or non-gallery post, include autostart="true" into the shortcode, like so:
[gallery autostart="true" slider="true"]
Posting video
To highlight video content, select Video as your post format. Make sure you are editing in HTML mode, and paste your embed code from YouTube, Vimeo or another video hosting service directly into the post content area.
Styling overview
Duet features a number of custom styles that can make your content stand out even more. Below are instructions for adding these custom styles to your content.
Pull quotes
To style as a pull quote, you need to be in HTML mode and wrap your quote with a h2 heading with a class of "pullquote", like so:
<h2 class="pullquote">Your quote goes here</h2>
Story end
To style an asterisk at the end of a story, you need to be in HTML mode and wrap your asterisk with a span with a class of "story-end", like so:
<span class="story-end">∗</span>
Ampersand
To add a special style to an ampersand, you need to be in HTML mode and wrap your ampersand with a span with a class of "amp", like so:
<span class="amp">&</span>
Horizontal rule
Horizontal rules (hr tags) are automatically styled in Duet, and give a distinct visual break in your content
Alerts
Alerts call attention to specific sections of your content. To style an alert, you need to be in HTML mode and wrap your content with a div with a class of "alert", like so:
<div class="alert">Your content here.</div>
There is also a special green style for "success" alerts:
<div class="alert success">Your success message here.</div>
Classic captions
To style as a classic caption, you need to be in HTML mode and wrap your content with a div with a class of "classic-caption", like so:
<div class="classic-caption">
<h2>A classic caption</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Classic titles
To style as a classic title, you need to be in HTML mode and wrap your content with a div with a class of "classic-title", like so:
<div class="classic-title">
<h2>title of something</h2>
Issue number 15 Dec
</div>
Full-width and two-column page templates
Duet includes 6 different page templates, including two full-width templates: one with a single content column, and one with Duet's unique two-column layout.
Simply select one of these templates from the Template drop-down on the Edit Page screen, and your content will be formatted accordingly.
Archives and sitemap pages
The archives and sitemap pages on the demo site are also set up using page templates. Simply select "Archives" or "Sitemap" from the Template drop down (seen above) to get the special display for these page types.
Adding posts to the slider
To add a post to the featured slider you need to do 2 things:
- Set a featured image for your post, with dimensions greater than 880 x 390 pixels
- Mark the "Show in Featured Slider" option in the Post Options meta box (usually near the bottom right side of the Post Edit screen).
Configuring the slider
You can also configure some of the slider functionality through the Appearance → Theme Options page.
Under the "Logo & Featured Slider" section, you'll see options to
- Autostart the slider on page load
- Toggle the slider animation
Marking a post sticky
To add a featured banner (seen above) to a post, you need to mark the post "Sticky" under the visibility settings on the Post Edit screen:
Changing the banner text
On your Appearance → Theme Options page, under the "Post Display" section, there is an option for "Sticky post text". Whatever you enter here will be used as the text for the featured banner (seen above).
Change the color scheme
On your Appearance → Theme Options page, under the "Fonts & Colors" section, you'll see a Color Scheme selector, which allows you to toggle between Duet's 3 lovely color schemes: orange (default), green, and blue.
Typography Options
On your Appearance → Theme Options page, under the "Fonts & Colors" section, there are two options for controlling the fonts used on your site.
The accent font is used for headings, block quotes and other highlighted areas.
The body font is used for all content not covered by the accent font.
Removing the first letter style
By default, Duet features a unique drop cap style on all posts. To disable this, go to your Appearance → Theme Options page, and under the "Post Display" section check the "Remove drop cap on first letter" option.
Enabling and disabling the sidebar
By default, the sidebar appears everywhere on your site. If you'd like to have the sidebar appear only on Pages you've created, go to the Appearance → Theme Options page. Under the "Layout" section, you'll see an option to control the sidebar display:
To disable the sidebar completely simply remove all widgets from the sidebar the Appearance → Widgets page.
Sharing buttons (Twitter, Facebook, Flickr, Google+)
Your sharing buttons are controlled in the Appearance → Theme Options page, under the "Footer" section.
Simply fill in the URLs for each social site you want to include in your footer, and an icon will automatically be added for you. Leave any of the options blank, and no icon will appear.
Footer copyright notice
The option for your footer copyright notice is found below your sharing options, under the "Footer" section of your Theme Options page.
Using keyboard navigation
Duet features easy keyboard navigation on your featured slider and individual galleries. When on the homepage, using the left and right arrow keys will navigate the images in the featured slider (if it is active).
In addition, when on individual gallery posts, the left and right arrow keys can be used to navigate through the images in the gallery.
