Hello. Welcome to Sleex (ver 1.5) Help Documentation

0. Before getting started

Hello there, first of all thanks for purchasing Sleex.

This extensive (but very straightforward) help file will teach you how to setup and use Sleex Wordpress theme. Using this theme is really easy so if you're an experienced user of Wordpress, you probably don't need to read entire the help. Just explore the options panel and start using the theme!

Our themes usually get regular updates including bug fixes and improvements. So don't forget to follow us on twitter and envato.

twitter

Some Important Notes

  • Please take the time to read through the documentation, as many support related questions can be answered simply by re-reading these instructions.
  • This theme works only with Wordpress 3.0 and higher versions. Older versions are not supported.
  • We will be happy to help you tweak the theme but just for small ones. For more advanced customization, we usually charge a few bucks.
  • If you have any support questions, please use the "Item Discussion" section. If you want to remain anonymous, use our profile page to send email. So we can confirm you've purchased this theme.
  • Again, Thanks for purchasing our themes. Please don't forget to give us some stars if you enjoyed using our themes.

1. Pre installation steps

  • Sleex uses Auto image resizing so it needs php5/GD lib enabled. If you don't know what this means never mind, most servers come with this pre installed. If slideshow/portfolio's images aren't shown, you have to set the permissions of the folder "cache" (located at theme root \ scripts \ cache) to writable (777). If you don't know how to set the permission, please google it or ask your hosting manager to set it. It's very easy and will take you less than 1 minute.
  • The auto image resizing script is called "timbthumb". Visit http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/ for more information.

2. Installation and setting up the theme

OK, it's installation time! Sleex comes with 10 different skins which can be activated at your wordpress admin panel. After uploading the theme to "wp-content->themes" of your installed Wordpress, activate the Sleex theme as you would activate any other theme at Appearance -> Themes.


After activation, you can find "Sleex Options" panel on the bottom of the sidebar.

3. General options (UPDATED)

1. Setting up the navigation menu

Sleex uses the new custom menu editor of WordPress 3.0. To have the menu enabled, go to Appearance-> Menus. Register a menu and add what you want to the top navigation.




1.1 Adding RSS, Twitter, and Login Icons to navigation

First click on screen option panel at the top and check CSS Class box:

Now use the following classes: login, rss, and twitter.

2. General Options Setup



  • To change the default LOGO/Favicon, simply enter the full address of the image in the specified (number 1) fields.
  • Sleex comes with 10 different color schemes. Select your favorite color and press the save button. (number 2)
  • One of the coolest feature of Sleex is its flexibility. You can almost disable/enable all features in the admin panel. If you don't want any of Twitter bar, Breadcrumb, and Cufon font replacement, you can disable them by checking a simple checkbox! (number 3)
  • You have lots of choices for the typography of your website. All the headings fonts can be controlled by you here (number 4). There are 7 different fonts you can choose from: Josefin sans, Cardo, Droid sans, Cantarell, Volkorn, Dejavu sans, and dejavu serif. Just note that you must have cufon enabled.
  • You can control the number of footer blocks (number 5)
  • Finally, you're able to enter a text (for example a copyright text) for footer along with adding a tracking code like Google analytics in the "general" section.

4. Add your social accounts

Here you can enter some of your social account such as twitter, digg, etc. These accounts' icons will be shown in the footer. You must enter your twitter ID here, if you want your recent tweets to be displayed anywhere.


5. Homepage setup

Sleex comes with two unique front page along with 3 slideshow styles.

1. Setting up homepage templates


To create a home page, go to Pages -> Add New create a new page and fill the title & content fields. On the right sidebar choose either of "Homepage" or "Tabbed Homepage" from the templates list.
We've chosen "Homepage" for now. After pressing down the publish button, your page will be shown as below.


and if you choose the second homepage template "Tabbed Homepage", the page will look something like this:

1.1 Setup Homepage

Now you have to assign the page to website's homepage as shown.

2. Mini-Feature Contents

In both homepages, you can feature a number of pages easily. The first homepage template will show them vertically and the second one uses Tabbed effect to show the page contents.
In admin options, under "homepage", there's a section called "Mini-Featured Contents". To setup the mini-features you just have to enter the ids of the pages you want to include into this input field:


for example:include=10, 11, 12 (this would display 3 page excerpt for the pages with the id 10, 11, 12) If this field is left empty it wont display anything. If you want to know the ID of a page hover over the page name at the edit pages site, at the bottom you will see a link, the last number is the id. more info

Now your homepages will look like:



Tabbed Homepage


There's an optional custom field for the first homepage template which you can use to add an icon to each including page.



and then your homepage will look:


3. Teaser

Take a look at the picture below



This teaser will be shown on the front page, if you have chosen the default slider. As you see, there are two text fields where you can enter teaser title and description. If you want to have that nice button I put there. Simply use our small button shortcode as below: [small_button link="#"]button title[/small_button]

2. Call-To-Action


You can control the text, button title, and button link of call-to-action section using this section. If you don't want this section to appear, simply check "Disable Call-to-action?" checkbox.

6. Slideshow setup

Using the admin options panel, you're able to choose any of 3 available slideshow styles to use in your homepage. Before using the slideshow, you have to specify the source of image slider. You can choose either posts or pages as shown.

if you don't know to to find pages/posts ids, visit this tutorial.
Some important notes:

  • Slider's images will be resized automatically. You need just make sure your image is large enough to fit the slideshow.
  • Using Slider transition speed, you can control the speed of slideshow transition in milliseconds.
  • You cannot enter post and page ids together. only one of them can be entered at the same time.

6.1 How to add images to slider

After selecting the slider's source. Create new page (or post) as usual and follow the steps described in the image below:

7. Sidebar setup (UPDATED)

Sleex 1.2 comes with custom unlimited sidebars. You can define your own unique custom sidebar for each page/post. Also in version 1.2 you are able to specify the alignment of sidebar too. You can set a sidebar to left aligned or right aligned.

7.1 Using Custom Sidebars

To add new sidebar, go to your wordpress admin area. On the left sidebar under Sleex box, there's a link called "Sidebars". Click it and a new page will open to let you add unlimited sidebars.

Once you created your desired sidebar, you can assign the newly created sidebar to any posts or page. Like below:

Also here you can change the sidebar alignment:

Now you can go to widgets area and add any widgets to the new sidebars.

Sleex comes with 6 custom widgets . All widgets support multiple instances.

  • Flickr Widget
  • Recent Posts with Thumbnails
  • Popular Posts with Thumbnails
  • Recent Tweets
  • Contact Details
  • Sub navigation

You can control the number of recent/popular posts, tweets, etc.

8. Blog setup

8.1 Main Blog

Sleex comes with two blog types. Main blog and sub-blogs (unlimited blog). In the main blog all categories will include except those you exclude using the admin panel. But sub-blogs can only inlcude one category. To setup your main blog, folow the steps below.

  • Create a blank page and call it for example blog
  • As the image below, select "Blog" from Template list.
  • Add it to main navigation (go to Appearance -> Menus ).

8.2 Excluding categories from the main blog

8.3 Creating Unlimited Blogs (sub-blog)

Say you want to have a page for your recent news, articles, etc. You can create as many blogs as you need easily by following the steps below:

  • Create a page and name it what you would like.
  • In "add new page" page, scroll down to find a box titled "Sleex- Unlimited Blogs/Portfolio Options"

  • Publish the page
  • Add it to your navigation

8.4 Full-Width Post Layout

s

9. Portfolio/Gallery setup

9.1 Create Portfolio Page

Creating portfolio pages is similar to unlimited blogs. You have to create a page and call it something (for example: Print). Then set the settings as below while you're still in "Add New Page" page.


Now publish the page and that's it!

9.2 Add Items to Portfolio

Adding content to portfolio is similar to writing a usual post plus a few extra properties. You can add item's image as below:
s
Now if you scroll down through the page. There's a box called "Sleex-Posts Options".
s

By checking the first checkbox, the single page of items will have no sidebar. "Portfolio Link" is for adding an external/internal link to the item. It will be a link with the title of "Visit". "Portfolio Video Link" is for embedding video. For embedding video, firstly, you have to had uploaded an image as described above. Then paste the Video (for example from youtube) in this text field (Portfolio Vide Link). This theme includes full support for Flash, YouTube, Vimeo & iFrames.
Examples on how to format the links can be found here:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ under Demos.

Don't forget to posts your item under appropriate category (which you've specified while creating portfolio pages).

10. Contact page setup

s

In admin options, find the Contact Page box. You will see a text box. Emails will be sent to the email address you enter here. Now go to Pages -> Add New Fill the title and content area. Then choose Contact page from the templates list.

s

11. Using style shortcodes

You can use style shortcodes in both pages and posts. To use, Click on the shortcodes icon in your WordPress WYSIWYG editor as shown below:

For the complete list of shortcodes , visit our online demo

12. Custom template pages

Just check the image below

s

13. HTML structure

You don't need to edit HTML structure because it's controlled by Wordpress. By the way, here's an screen shot of a page markup:

d

14. CSS files

Sleex's main css file is style.css which is located at the root folder of the theme (/wp-content/themes/sleex/styles). Other css files contain color-specific styles. Explore the Styles folder. You will see all colors styles and images. Also there's a css file called prettyPhoto.css which is used for the lightbox.

Our style.css file is organized like below: /* =General Styles ----------------------------------------------------------------- */
/* =Header ----------------------------------------------------------------- */
/* =Navigation ----------------------------------------------------------------- */

15. JavaScript files

The theme comes with a lot of Javascript features. jQuery is the core library of all scripts. If you need to customize any of effects, go to /wp-content/themes/sleex/scripts/ and open custom.js. We've used jQuery to produce fade, drop-down menu, toggle, font replacement, ...

  • jquery.js - the core lib
  • jquery.easing.1.3.js - easing
  • twitter.min.js - used for displaying recent tweets
  • jquery.prettyPhoto.js - used for prettyPhoto lightbox
  • jquery.cycle.all.min.js - used for slideshow
  • custom.js - initiating functions
  • cufon-yui.js - Cufon for custom fonts
  • Cantarell.font.js - Font
  • Cardo.font.js - Font
  • Droid_Sans.font.js - Font
  • DejaVu_Sans.font.js - Font
  • DejaVu_Serif.font.js - Font
  • Vollkorn.font.js - Font
  • Josefin_Sans.font.js - Font
  • thumb.php It's not javascript! - Used for image resizing

16. PSD files

The themes comes with 3 .psd files.

  • Index.psd - The main page PSD
  • Menu.psd - Used for customizing the menu
  • Button.psd - Used for button (sprite technique)

17. Resources

Here you can see the list of external resources used in Sleex.

  • jQuery Cycle Plug-in - http://jquery.malsup.com/cycle
  • Cuofn - http://wiki.github.com/sorccu/cufon/about
  • prettyPhoto Lightbox: - http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone
  • timthumb Image Resizing Script: - http://code.google.com/p/timthumb
  • Custom Fonts
    • Cantarell - http://abattis.org/cantarell/
    • Dejavu - http://sourceforge.net/projects/dejavu/
    • Droid Sans -http://www.fontsquirrel.com/fonts/Droid-Sans
    • Volkorn - http://www.fontsquirrel.com/fonts/Vollkorn
    • Josefin - http://www.fontsquirrel.com/fonts/Josefin
    • Cardo - http://scholarsfonts.net/cardofnt.html
  • WooFunction Icon set - http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/
  • Komodo Media Icons - http://komodomedia.com/
  • The Ultimate Free Web Designer's Icon Set - http://Smashingmagazine.com
  • Open Source Icons - http://www.greepit.com/open-source-icons-gcons/
  • Twitter js - http://code.google.com/p/twitterjs/

18. Changes Log

Aguest 14, 2010 - Ver 1.1

  • *BUGFIX :\themes\Sleex\options\tinymce\tinymce.js - updated to fix wrong insertion of small & large buttons into the editor.
  • *BUGFIX - There was a few pixels extra padding in color schems except the default. Fixed by updating all css files of styles folder

Agust 22, 2010 - Ver 1.2

  • * BUGFIX: hiding featured image in blog posts if there is no featured image.
  • * NEW FEATURE: Unlimited sidebars for posts and pages
  • * NEW FEATURE: Sidebar alignment for posts and pages
  • * NEW FEATURE: Controlling number of footer columns
  • * NEW FEATURE: Multiple instances for custom widgets

August 29, 2010 - Ver 1.3

  • * BUGFIX: There was a silly mistake on printing the date of posts. The following file got updated.
    • archive.php
      author.php
      index.php
      search.php
      tpl_blog.php
      includes/single-fullwidth.php
      includes/single-sidebar.php
      includes/tpl_blog.php
  • The only thing changed is the following: <?php echo date("M jS, Y");?>
    has been replaced with
    <?php the_time('M jS, Y'); ?>
    So if you changed the files above, you just need to find/replace the code above.

October 12, 2010 - Ver 1.4

  • *BUGFIX: No fade effect for call-to-action if cufon enabled. fixed
  • *BUGFIX: CSS extra invalid chars removed
  • *NEW FEATURE: Now Sleex is Translation-Ready. (.po) and (.mo) files are available. All Sleex's files are updated for this purpose.
  • *NEW FEATURE: You can order slideshow and tab based homepage's pages as you type. A new file added to /Sleex/Includes
  • *Accent problem on admin options fixed

November 3, 2010 - Ver 1.5

  • *BUGFIX: Translation Problem Fixed ( almost all files got updated)