Video Tutorial

1. Theme Installation

After the successful theme purchase you will receive an email including your individual theme download link. With this link you can download your Tatami theme folder (.zip file).

1.1. Installation via the WordPress admin panel

After downloading the tatami.zip folder to your computer just go to “Appearance / Themes” in your WordPress admin panel and choose the “Install themes” tab menu. At the top of the page you find the smaller navigation link “Upload”. Via this link you an choose to upload your the tatami.zip file and click the “Install now” button. The Tatami theme will now be your active theme.

1.2. Installation via FTP

Alternatively you can also install the theme directly to your server with a FTP client (e.g. Filezilla). Just drop the un-ziped Tatami theme folder into your …/wp-content/themes/ folder. Now you can see the Tatami theme in your WordPress admin panel under “Appearance / Themes / Available Themes”. From there you can activate the Tatami theme.
Back to Top ↑

2. Theme-Optionen

On the theme options page at “Appearance / Theme Options” you can find several easy-to-use options to customize the Tatami theme (see a screenshot of the theme options).

2.1. Custom Colors

First you can choose your own link color, link hover color and the footer background color by typing in a hex color value (like #dcdcdc) or by just clicking into the color field and using the color picker to choose your own colors.

2.2. Thumbnail Options

The Tatami theme offers options for displaying post thumbnails. You can choose to show full width thumbnails above the post title, big thumbnails below the title or small thumbnails below the title.

2.3. Custom Logo, Post Excerpts, Custom Texts

Next you can upload your own logo image via the media uploader and include the image file URL into the custom logo theme option. It’s best to use a transparent PNG as a logo image. The logo image size is not fixed, but a 500 x 75px logo image (or close) is recommended.

In case you don’t want to include the more-tag into your posts you can check the Posts Excerpts box and show automatic post excerpts on your blog. Excerpts will only be used for standard posts, not on your post format posts.

If you want to customize the themes header or footer text you can include your own texts in the theme option “Custom Header Intro Text” and “Custom Footer Text”. Standard HTML (e.g. links) is allowed.

You can also link to your social profiles like Twitter or Facebook at the author info box (on single posts) by adding custom links in the “Custom Author Links” option like:

[css]
<a href=”https://twitter.com/yourtwittername”>Twitter</a>, <a href=”http://www.facebook.com/yourfacebookID”>Facebook</a> and <a href=”http://pinterest.com/yourpinterestname/”>Pinterest</a>
[/css]

2.4. Favicon and Apple Touch Icon

To include your own favicon you need to create a 16×16 pixel jpg image and generate a .ico favicon file using and online favicon generator (like faviconr.com). Now you have to upload the favicon.ico file into your Tatami theme folder via an FTP client and paste the favicon URL into the “Custom Favicon” text field on your theme options page.

The Tatami theme also supports an Apple touch icon, so your blog can be saved with a nice App-like icon on iOS devices. Just create an 128×128 png image and upload your image using the media uploader. Copy and paste the file URL into the Custom Apple Touch Icon text field. You don’t need to create rounded corners or any glossy effects for your icon since Apple renders your icon automatically with these effects.

2.5. Share Buttons (Twitter, Google+, Facebook, Pinterest)

In the next theme option you can activate share buttons for Twitter, Google+, Facebook and Pinterest. Optional you can choose to show the buttons on your blogs front page and on single post pages, only on single post pages and/or on your blogs pages.

2.6. Custom CSS

You can also add custom CSS if you need to overwrite a style of the Tatami theme or include additional CSS styles (e.g. to support a plugin). If you have the Jetpack WordPress plugin already installed you can also use Jetpacks Custom CSS feature instead.

2.7. Custom Background

You can also customize the background by choosing your own background color or by uploading a custom background image. You can find this option in the admin panel under “Appearance / Background”. You can either choose a background image (e.g. a pattern image) or a color as your background. If you choose a background image you should make sure that the file size of your image is not very large in file size so that it won’t take too long to load your website into the browser.

It’s a good idea to use a smaller image like 100×100 px and repeat the image using the display options (choose “tile” below the background image preview). A great website offering free, beautiful background patterns is subtlepatterns.com.
Back to Top ↑

3. Custom Menus

In the admin panel under “Appearance / Menus” you can set up your 2 custom menus for the Primary Navigation (at the top of the left sidebar) and the optional Footer Navigation (at the bottom of the footer). The optional footer navigation does not support sub menus.

You can create custom menus by adding any number of custom links, pages, categories, tags, post formats or posts and save them to your created menus. If you drag’n’drop the included menu items to the right you can create sub menus. Now you can choose your saved menus to be used in your theme via the “Theme Locations” box (see left top box in Custom Menus).
Back to Top ↑

4. Widgets

Tatami offers two widget areas, the Main Sidebar widget area (to includue widgets in the left or right sidebar) and the Footer widget area with the widget areas “Footer Column 1 to 4” (to include widgets in the 4 column footer widget area).

Next to the WordPress standard widgets and the supported Jetpack plugin widgets (e.g. Twitter widget, Image Widget or Email subscription widget) you can use the following custom widgets in the Tatami theme:

4.1. Tatami Social Links

With the Social Links widget you have the option to link to your different social profile sites like Twitter, Facebook, Google+, YouTube, Flickr and many more with nice looking social icons. Just paste the URLs of your profiles into the provided URL field and save your settings. At the bottom of the widget you can also choose to open all links in a new or in the same browser window.

4.2. Tatami Flickr

The Flickr widget gives you the option to include a preview of your latest or a random collection of your Flickr images. You can choose the number of images to show and add an additional link to your Flickr profile.

4.3. Tatami Featured Video

The Featured Video widget is a very easy to use widget to show your favourite YouTube or Vimeo video in your sidebar or footer. Just include the embed code into the text area and choose a widget title if you want to use one. The video will skale automatically on different screen sizes.

4.4. Tatami About

The Tatami About widget offers you an easy option to tell your readers more about you and to include a profile picture in the widget. You can include your picture URL, the width and height value of the image (without px) and an about text (you can include HTML code in the text).
Back to Top ↑

5. Post Formats

Tatami supports the WordPress post formats:

Aside, Status, Link, Quote, Image, Gallery, Video, Audio, Chat

You can choose a post format in the field “Format” while writing or editing your posts. With post formats you can create a more exciting reading and fun experience for your blog readers by including single videos, quotes or images as blog posts.

5.1. Quote

To create a quote you can use the “blockquote” symbol in the Visual text editor or the b-quote button in the HTML editor. Then your code in the HTML editor should look like this:

[code]

<blockquote>Your quote text here…</blockquote>

[/code]

If you want to include the quote author (maybe with a link) you can add the cite-tag in the following format:

[code]

<blockquote>Your quote text here…

<cite><a href=”http://linktoquoteauthor.com”>Quote Author</a></cite></blockquote>

[/code]

5.2. Video

To post a video just select the video post format and paste the embed iframe code from a YouTube or Vimeo video (with the width of 840px) into your post. If you have trouble embedding the iframe code (in some cases the iframe code gets deleted after saving or editing a video post) you can install the Iframe WordPress plugin.

5.3. Link

To use the link post format your can include your link into the post and add a CSS class of “link” in the HTML editor:

[code]

<a class=”link” href=”http://linkurl.de/”>Das ist der Linktext</a>

[/code]

5.4. Gallery

To create a gallery post you can upload some images to your post using the WordPresss “Add Media” uploader button. Inside the media upload lightbox window you can choose “Create a gallery” and select your images. The WordPress gallery shortcode “gallery” will be included automatically into your post:

Your image thumbnails should be at least 760px in width. You can change the thumbnail size via “Settings / Media” in the WordPress admin panel. If you need to resize older thumbnail images you can use the WordPress plugin “Regenerate Thumbnails”.

For further options using the WordPress image gallery please have a look at the official WordPress codex.

5.5. Image

To use the Image post format include an image in your post as usual using the “Add Media” uploader button. Images should have a width of 840 pixel.

5.6. Audio

For audio posts you can use the Soundcloud iframe widget from soundcloud.com (of course you can also choose any other audio player). The Soundcloud widget is easy to use and also has a WordPress plugin for Soundcloud shortcodes.

5.7. Chat

To style the chat post content you can create a ul list element with the class of “chat” and give the li list elements classes of odd” and “even”:

[code]
<ul class=”chat”>
<li class=”odd”>Text 1…</li>
<li class=”even”>Text 2…</li>
<li class=”odd”>Text 3…</li>
<li class=”even”>Text 4…</li>
</ul>
[/code]

Back to Top ↑

6. Page Templates

On pages you can choose the Tatami page templates “Archive Page Template” and “Left Sidebar Only” at “Page Attributes / Temptlate”.

With the “Archive Page Template” option it’s easy to create an Archive page for your blog content. If you choose the template the page will show a list of popular tags, your 30 recent posts and a monthly archive.
Back to Top ↑

7. Author Box on Single Posts

If you want to show an author description text at the end of each standard post you only need to fill out the “Biographical Info” in the WordPres user profile. You can also insert links or other standard HTML.
Back to Top ↑

8. Shortcodes

Tatami offers shortcodes for for multicolumn content, info boxes and buttons. You can find all shortcode codes ready to copy/paste on the Shortcode example page at the Tatami live demo.
Back to Top ↑

9. Theme Translations

Tatami is ready for theme trans­la­tions. You can add your own trans­la­tion or cust­o­mize an exis­ting trans­la­tion easily using the WordPress plugin Codestyling Localization. You can also find a detailed plugin description on the plugin homepage.
Back to Top ↑

10. Child Theme for Customizations

If you want to cust­o­mize the Tatami theme a little further and you the­re­fore want to change the code in the styleeheet (style.css) or in any of the theme tem­plate files please con­sider crea­ting a child theme for your changes.

Using a child theme is actually quite easy and it saves all your indi­vi­dual changes from being over­written by a future update of the Tatami parent theme. You can find more infor­ma­tion on crea­ting a child theme in the article “WordPress Child Theme Basics” on the Themeshaper blog.

To get started you can download the sample child theme folder at the Tatami theme page (Download: Tatami Child-Theme).
Back to Top ↑

11. How to create 2 logos (mobile + desktop version) in the Tatami theme

Some Tatami theme users want to be able to create 2 logo versions for their Tatami theme. This way the logo version on desktop screens is not restricted to the maximum height of 75 pixels, but can be of any width and height instead.

So to get started you will need to create 2 logo versions, a big and a small one. As said the big one for desktop screens can be of any size, but the small mobile version of your logo should fit in the mobile tatami navigation bar and therefore should be of max. 50px height and 200 pixels width. It’s recommended to use a transparent png image or a jpg, with the same background color as your header background. By default the mobile theme verison of Tatami uses your link color in the mobile navigation menu, but you will be able to change that if you like (I will show you in a minute).

After you created your 2 logo versions (say logo-desktop.png and logo-mobile.png) you need to upload the 2 files to your media library and copy the 2 image URLs, like:

[code]
http://yourdomain.com//wp-content/uploads/2013/09/logo-desktop.png
http://yourdomain.com//wp-content/uploads/2013/09/logo-mobile.png
[/code]

Now you need to copy and paste the following code into your Custom CSS option on the Tatami theme options page (at the bottom). Don’t forget! You will need to change the 2 example image URLs with your own logo image URLs in the code and also change the example image sizes (here: 200px and 50px for the mobile logo and 300px and 250px for the desktop logo) with your own images width and height values.

[code]
.site-title h1.title {
padding: 5px 0 0 0 !important;
}
.site-title h1.title a {
width: 200px;
height: 50px;
background: url(http://yourdomain.com/wp-content/uploads/2013/09/logo-mobile.png) 0 0 no-repeat;
display: inline-block !important;
text-indent: -99999px;
}
@media screen and (min-width: 1260px) {
.site-title h1.title a {
width: 300px;
height: 250px;
background: url(http://yourdomain.com/wp-content/uploads/2013/09/logo-desktop.png) 0 0 no-repeat;
}
.site-title h2.description {
display: none !important;
}
}
[/code]

If you want to have a different color in your mobile navigation menu bar (not your link color) you can also copy this code snippet and paste it at the top of your Custom CSS code. The color value in the example is #ffffff for white, but you can of course also use a different color hex value:

[code]
.off-canvas-nav {
background: #ffffff !important;
}
[/code]

Now you are all set and your 2 logo versions should display according to the screen sizes.
Back to Top ↑

12. Print Doc or Save as PDF

To print out or save a PDF file of this Tatami theme documentation, just click in the Print Friendly button below. You can choose to exclude images from your print file or delete certain parts of the text.

Print Friendly and PDFPrint or Save as PDF
Back to Top ↑