“Contrast Wordpress Theme” Documentation by “Themolution” v5.1


“Contrast Wordpress Theme”

Created: 03/11/2009
By: Themolution
Email: contact@themolution.com

Themolution RSS Twitter Facebook

Thank you for purchasing our theme, we hope you like it. If you have any questions that are beyond the scope of this documentation, please feel free to ask it on our support forum. If you like the theme, please don't forget to rate it on the ThemeForest.


Table of Contents

  1. Installation
    1. Setting up the General Options
    2. Setting up the Header
    3. Setting up the Footer
    4. Setting up the Homepage
    5. Setting up the Portfolio
    6. Setting up the Blog
    7. Setting up the Pages
    8. Setting up the Widgets
    9. Setting up the Shortcodes
    10. Setting up the Localization
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScript
  5. PSD Files
  6. Sources and Credits

A) Installation - top

If you are new to wordpress and it's your first installation, you might check http://codex.wordpress.org/Installing_WordPress to get detailed information about it. If you already have installed wordpress before, you have two ways to install the theme.

  1. Installing the theme in .zip format

    This is the way, which you can install the theme without using any external application. Navigate to Appearance » Themes » Install Themes » Upload page, browse the contrast.zip file in the wordpress folder and click Install Now.

  2. Uploading the theme into themes folder

    This is the way, which you need to use any FTP client to upload the unzipped theme folder into wp-content » themes directory. While uploading, make sure to upload only the contrast folder not the whole files you recieved.

Contrast After you done with uploading, navigate to Appearance » Themes and click Activate under the theme name. If everything is done correctly, Contrast menu will appear at the bottom of the menus.


A.1) Setting up the General Options - top

General Access to general options by navigating Contrast » General tab.
Customizable options for this page are listed below.

Theme Background

Set the background image or color by using the build in editor, then click Save Changes. This will affect the categories, the posts and the pages which have no custom background options.

Transparent Layer

Set the visibility of the transparent background layer of the content. Choice between Hide and Show to customize. This option also can be set from every page and post details.

Theme Colors

Set the theme colors type option. Choice between Default and Custom colors to customize. If the option is set as Custom, Theme Color (1) and Theme Color (2) options will appear.

  • Theme Color (1)

    Set the custom Theme Color (1). Light colors are recommended.

  • Theme Color (2)

    Set the custom Theme Color (1). Darker colors are recommended.

Content Position

Select the position of the content. Choise between None, Right and Left to customize. If the option is selected as None, the content will be hidden. This option also can be set from every page and post details.

Content Width

Set the type of the content width. Choise between Default and Custom to customize. By default the content width is 540 pixels. If the option is selected as Custom, the Width option will appear.

  • Width

    Enter the width of the content (pixels).

Sidebar Position

Select the position of the sidebar. Choise between None, Right and Left to customize. If the option is selected as None, the sidebar will be hidden. This option also can be set from every page and post details.

Google Fonts

Set the Google Fonts option which will affect all headings. If the option is set as Enabled, the Font Name option will appear.

E-Mail

Enter the E-Mail address of the contact form's receiver.

Message

Enter the intormation message, which will be shown after the e-mail sent.

SEO

SEO Set the Search Engine Optimization option. If the option is set as Enabled, the Author, Keywords, Description, Robots, Title and Google Analytics Tracking Code options will appear. Related options are listed below.

  • Author

    Enter the author meta tag (Example: Themolution) of your site. The text you entered will be included into the header of the HTML document as a author meta tag.

  • Keywords

    Enter the keywords meta tag of your site. Use comma between the keywords (Example: one, two, three). The text you entered will be included into the header of the HTML document as a keywords meta tag.

  • Description

    Enter the description of your site. The text you entered will be included into the header of the HTML document as a site description then the search engines will identify your site better.

  • Robots

    Set the robots meta tag option of your site. If the robots option is Disabled, search engines won't index your site anymore. Make sure about, this option is not overwriten by Settings » Privacy » Privacy Settings.

  • Title

    Set the title of your site. If the option is set as Default, the site title will be generated automatically for every page. If the option is set as Custom, the Custom Title option will appear.

    • Custom Title

      Enter the site title (Example: Themolution) of your site. The text you entered will be included into the header of the HTML document and all titles for all pages will be the same.

      Title

  • Google Analytics

    Set the Google Analytics tracking option. If the option is set as Enabled, the Tracking Code options will appear. If you don't know about Google Analytics, you might check http://www.google.com/analytics/ to get detailed information about it.

    • Tracking Code

      Enter the Google Analytics Tracking Code. The code you entered will be included into the footer of the HTML document to track your site traffic.

Save changesIf you done with setting up the options, you should click Save changes button at the right bottom of the page to save your settings. You can reset all options by clicking Reset button anytime.


A.2) Setting up the Header - top

Header Access to header options by navigating Contrast » Header tab.
Customizable options for this page are listed below.

Logo Position

Select the position of the logo. You can choice Left Top or Left Bottom as a position to customize.

Logo

Enter the file path of your 330 x 80 pixels sized, transparent PNG image type logo. You can upload a new one by clicking Upload button. If you already have, just select it from media libary. You can also customize your logo by replacing the logo.png file in wp-content » themes » contrast » assets » images directory.

Favicon

Enter the file path of your 16 x 16 pixels sized favicon. You can upload a new one by clicking Upload button. If you already have, just select it from media libary.

Search

Set the visibility of the search button. If the option is set as Show, the search button will appear under the menus.

Save changesIf you done with setting up the options, you should click Save changes button at the right bottom of the page to save your settings. You can reset all options by clicking Reset button anytime.

Building the Menus

The theme supports Custom Navigation Menu feature to customize your menus. If you don't know about Menus, you might check http://codex.wordpress.org/Appearance_Menus_SubPanel to get detailed information about it. In general,

  1. Navigate to Appearance » Menus
  2. Give a name to the menu and click Create Menu
  3. Select the menu from Theme Locations box and click Save button
  4. Add your items to the menu by clicking Add to Menu button
  5. Click Save Menu button after you done with building

A.3) Setting up the Footer - top

Footer Access to footer options by navigating Contrast » Footer tab.
Customizable options for this page are listed below.

Copyright

Set the footer copyright text type option. If the option is set as Default, the copyright text will be generated automatically. If the option is set as Custom, the Custom Copyright option will appear.

  • Custom Copyright

    Enter the custom copyright text, which will be shown at the site footer.

Social Network Icons

Set the visibility of the social network icons, which will be shown at the site footer. If the option is set as Show, the RSS Feed, Facebook, Twitter, FriendFeed and the Flickr options will appear.

  • Facebook

    FacebookSet the visibility of the Facebook icon. If the option is set as Show, the Link option will appear. Enter the link of your facebook profile page.

  • Twitter

    TwitterSet the visibility of the Twitter icon. If the option is set as Show, the Link option will appear. Enter the link of your twitter profile page.

  • FriendFeed

    FriendFeedSet the visibility of the FriendFeed icon. If the option is set as Show, the Link option will appear. Enter the link of your friendfeed profile page.

  • Flickr

    FlickrSet the visibility of the Flickr icon. If the option is set as Show, the Link option will appear. Enter the link of your flickr gallery page.

  • RSS Feed

    RSS Set the visibility of the RSS feed icon.

Save changesIf you done with setting up the options, you should click Save changes button at the right bottom of the page to save your settings. You can reset all options by clicking Reset button anytime.


A.4) Setting up the Homepage - top

If you don't know about creating pages, you might check Setting up the Pages subject to get detailed information about it. Navigate to Pages » Add New to create a new page, and name it as Homepage. If you done with creating the page, you should click Publish button at the right top of the page to save your page.

Reading SettingsLast thing, you need to set Homepage as the front page from Settings » Reading. Set a static page as front page display and select Homepage as front page. If you done with setting up the options, you should click Save changes button at the left bottom of the page to save your settings.


A.5) Setting up the Portfolio - top

Portfolio Access to portfolio options by navigating Contrast » Portfolio tab.
Customizable options for this page are listed below.

Layout

Select the blog layout. Choice between Type 1, Type 2, Type 3 and Type 4 type layouts to customize.

Category

Select the portfolio category. If you haven't create the categories yet, check the Creating the Portfolio Categories subject to get detailed information about it.

Save changesIf you done with setting up the options, you should click Save changes button at the right bottom of the page to save your settings. You can reset all options by clicking Reset button anytime.

Creating the Portfolio Categories

If you haven't create the categories yet, navigate to Posts » Categories, enter the name of your category and click Add New Category. Also by selecting this category as a Parent, you can create the child categories.

Creating the Portfolio Posts

Portfolio CategoriesIf you don't know about writing posts, you might check http://codex.wordpress.org/Writing_Posts to get detailed information about it. Navigate to Posts » Add New to create a new post. After you entered the post contents, select your portfolio and child categories, which you set at the Contrast » Portfolio tab before.

Featured ImageNext thing you need to set is the featured image. This image will be displayed as a background of your post, at the portfolio category. Click Set featured image link to upload or select the featured image from the media libary then click Use as featured image to set. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance. Once you set the featured image, the thumbnail image will be generated automatically at the first launch of your site. If the thumbnail images are not showing and the error message is still there, please make sure you set the cache folder which is in your upload folder, to be rewritable (chmod 777). If you don't know about changing file permissions, you might check http://codex.wordpress.org/Changing_File_Permissions to get detailed information about it. Please don't forget, this image will be displayed as a background of your post, only at the portfolio category, not in the post detail.

Post Options

Background

Set the background type of the post, which will be displayed at the background of the post detail. Choice between None, Color, Image, Flash Video, Google Maps and Slideshow type backgrounds to customize.

  • None

    If the option is set as None, default theme background will be shown.

  • Color

    If the option is set as Color, Color option will appear. Enter the color of the background. You can use the color picker by clicking Select button.

  • Image

    If the option is set as Image, Image option will appear. Enter the file path of the background image. You can upload a new one by clicking Upload button. If you already have, just select it from media libary. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance.

  • Flash Video

    If the option is set as Flash Video, Flash Video option will appear. Enter the file path of the background flash video (flv). You can upload a new one by clicking Upload button. If you already have, just select it from media libary. Less than 300 KB and 5 sec. long looping short videos are recommended to get the best performance.

  • Google Maps

    Google Maps If the option is set as Google Maps, Google Maps and Gradient Effect options will appear. Enter the source of the Google Maps background. If you don't know about Maps, you might check http://maps.google.com/ to get detailed information about it. If you have already selected the point, click Link button, copy the value of the src part in iframe and paste it to the textarea. Make sure to copy only the value of the src, not the whole iframe. Set the visibility of the gradient effect on Google Maps. If the option is set as Show, the dark gradient effect will be shown on the Google Maps to keep your content more readable. See the example below.

    								http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=envato&sll=37.0625,-95.677068&sspn=51.310143,135.263672&ie=UTF8&hq=envato&hnear=&radius=15000&z=13&iwloc=A&cid=17132606827223274929&ll=-37.791473,144.977303&output=embed 
    							
  • Slideshow

    If the option is set as Slideshow, Category, Show Posts, Effect, Speed and Timeout options will appear.

    • Category

      Set the slideshow category type. Choise between Default and Custom to customize. If the option is set as Default, the slideshow will be generated from latest slideshow items without checking any category. If the option is set as Custom, the Custom Category option will appear.

      • Custom Category

        Enter the name or the slug of the slideshow category, which the slideshow will be generated from.

    • Show Posts

      Enter the number of the slider items are shown. By default, show posts option is set as last 5 items.

    • Effect

      Select the slideshow sliding effect. Choise between None, Fade, Slide Top, Slide Right, Slide Bottom, Slide Left, Carousel Right and Carousel Left to customize.

    • Speed

      Enter the sliding speed (Milliseconds). By default, sliding speed is set as 750 Milliseconds.

    • Timeout

      Enter the timeout speed between slides (Milliseconds). By default, timeout speed is set as 4000 Milliseconds.

    Creating the Slideshow Categories

    If you haven't create the categories yet, navigate to Slideshow » Slideshow Categories, enter the name of your category and click Add New Category.

    Creating the Slideshow Items

    Slideshow Add NewIf you are going to use Slideshow as a background, navigate to Slideshow » Add New to add new slideshow item. Enter the title, select the category and set the featured image.

    • Title

      Enter the title of the slideshow item.

    • Slideshow Categories

      Select the category of the slideshow item.

    • Featured Image

      Featured ImageThis image will be displayed as a background of your slideshow item. Click Set featured image link to upload or select the featured image from the media libary then click Use as featured image to set. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance.

    PublishIf you done with creating the item, you should click Publish button at the right top of the page to save your item. You can remove the item by clicking Move to Trash link anytime.

Pattern

Set the visibility of the pattern on image. If the option is set as Show, the Image option will appear.

  • Image

    Select the pattern of the background. Choice between Pattern 1, Pattern 2, Pattern 3, Pattern 4, Pattern 5, Pattern 6, Pattern 7 and Pattern 8 to customize.

Thumbnail

Set the type of the portfolio thumbnail. If the option is set as Default, the thumbnail image will be generated automatically from featured image at the first launch of your site. If the option is set as Custom, the Image option will appear. Use this option for portfolio posts only.

  • Image

    Enter the file path of your 150 x 75 pixels sized thumbnail.

Transparent Layer

Set the visibility of the transparent background layer of the content for this post only. Choice between Default, Hide and Show to customize. If the option is set as Default, Transparent Layer option at Contrast » General will be used.

Content Position

Select the position of the content. for this post only. Choice between Default, None, Right and Left to customize. If the option is set as Default, Content Position option at Contrast » General will be used. If the option is set as None, the content will be hidden for this page only.

Sidebar Position

Select the position of the sidebar. for this post only. Choice between Default, None, Right and Left to customize. If the option is set as Default, Sidebar Position option at Contrast » General will be used. If the option is set as None, the sidebar will be hidden for this page only.

PublishIf you done with creating the post, you should click Publish button at the right top of the page to save your post. You can remove the post by clicking Move to Trash link anytime.


A.6) Setting up the Blog - top

Blog Access to blog options by navigating Contrast » Blog tab.
Customizable options for this page are listed below.

Layout

Select the blog layout. Choice between Type 1 and Type 2 type layouts to customize.

Save changesIf you done with setting up the options, you should click Save changes button at the right bottom of the page to save your settings. You can reset all options by clicking Reset button anytime.

Creating the Blog Categories

If you haven't create the categories yet, navigate to Posts » Categories, enter the name of your category and click Add New Category. Also by selecting this category as a Parent, you can create the child categories.

Creating the Blog Posts

Blog CategoriesIf you don't know about writing posts, you might check http://codex.wordpress.org/Writing_Posts to get detailed information about it. Navigate to Posts » Add New to create a new post. After you entered the post contents, select your categories. It's almost the same with creating the portfolio posts except the featured image.

Post Options

Background

Set the background type of the post, which will be displayed at the background of the post detail. Choice between None, Color, Image, Flash Video, Google Maps and Slideshow type backgrounds to customize.

  • None

    If the option is set as None, default theme background will be shown.

  • Color

    If the option is set as Color, Color option will appear. Enter the color of the background. You can use the color picker by clicking Select button.

  • Image

    If the option is set as Image, Image option will appear. Enter the file path of the background image. You can upload a new one by clicking Upload button. If you already have, just select it from media libary. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance.

  • Flash Video

    If the option is set as Flash Video, Flash Video option will appear. Enter the file path of the background flash video (flv). You can upload a new one by clicking Upload button. If you already have, just select it from media libary. Less than 300 KB and 5 sec. long looping short videos are recommended to get the best performance.

  • Google Maps

    Google Maps If the option is set as Google Maps, Google Maps and Gradient Effect options will appear. Enter the source of the Google Maps background. If you don't know about Maps, you might check http://maps.google.com/ to get detailed information about it. If you have already selected the point, click Link button, copy the value of the src part in iframe and paste it to the textarea. Make sure to copy only the value of the src, not the whole iframe. Set the visibility of the gradient effect on Google Maps. If the option is set as Show, the dark gradient effect will be shown on the Google Maps to keep your content more readable. See the example below.

    								http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=envato&sll=37.0625,-95.677068&sspn=51.310143,135.263672&ie=UTF8&hq=envato&hnear=&radius=15000&z=13&iwloc=A&cid=17132606827223274929&ll=-37.791473,144.977303&output=embed 
    							
  • Slideshow

    If the option is set as Slideshow, Category, Show Posts, Effect, Speed and Timeout options will appear.

    • Category

      Set the slideshow category type. Choise between Default and Custom to customize. If the option is set as Default, the slideshow will be generated from latest slideshow items without checking any category. If the option is set as Custom, the Custom Category option will appear.

      • Custom Category

        Enter the name or the slug of the slideshow category, which the slideshow will be generated from.

    • Show Posts

      Enter the number of the slider items are shown. By default, show posts option is set as last 5 items.

    • Effect

      Select the slideshow sliding effect. Choise between None, Fade, Slide Top, Slide Right, Slide Bottom, Slide Left, Carousel Right and Carousel Left to customize.

    • Speed

      Enter the sliding speed (Milliseconds). By default, sliding speed is set as 750 Milliseconds.

    • Timeout

      Enter the timeout speed between slides (Milliseconds). By default, timeout speed is set as 4000 Milliseconds.

    Creating the Slideshow Categories

    If you haven't create the categories yet, navigate to Slideshow » Slideshow Categories, enter the name of your category and click Add New Category.

    Creating the Slideshow Items

    Slideshow Add NewIf you are going to use Slideshow as a background, navigate to Slideshow » Add New to add new slideshow item. Enter the title, select the category and set the featured image.

    • Title

      Enter the title of the slideshow item.

    • Slideshow Categories

      Select the category of the slideshow item.

    • Featured Image

      Featured ImageThis image will be displayed as a background of your slideshow item. Click Set featured image link to upload or select the featured image from the media libary then click Use as featured image to set. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance.

    PublishIf you done with creating the item, you should click Publish button at the right top of the page to save your item. You can remove the item by clicking Move to Trash link anytime.

Pattern

Set the visibility of the pattern on image. If the option is set as Show, the Image option will appear.

  • Image

    Select the pattern of the background. Choice between Pattern 1, Pattern 2, Pattern 3, Pattern 4, Pattern 5, Pattern 6, Pattern 7 and Pattern 8 to customize.

Transparent Layer

Set the visibility of the transparent background layer of the content for this post only. Choice between Default, Hide and Show to customize. If the option is set as Default, Transparent Layer option at Contrast » General will be used.

Content Position

Select the position of the content. for this post only. Choice between Default, None, Right and Left to customize. If the option is set as Default, Content Position option at Contrast » General will be used. If the option is set as None, the content will be hidden for this page only.

Sidebar Position

Select the position of the sidebar. for this post only. Choice between Default, None, Right and Left to customize. If the option is set as Default, Sidebar Position option at Contrast » General will be used. If the option is set as None, the sidebar will be hidden for this page only.

PublishIf you done with creating the post, you should click Publish button at the right top of the page to save your post. You can remove the post by clicking Move to Trash link anytime.


A.7) Setting up the Pages - top

Pages Add NewIf you don't know about creating pages, you might check http://codex.wordpress.org/Pages to get detailed information about it. Navigate to Pages » Add New to create a new page. It's almost the same with creating the posts. After you entered the page contents, your page is ready to add to the menu.

Page Options

Background

Set the background type of the page, which will be displayed at the background of the page detail. Choice between None, Color, Image, Flash Video, Google Maps and Slideshow type backgrounds to customize.

  • None

    If the option is set as None, default theme background will be shown.

  • Color

    If the option is set as Color, Color option will appear. Enter the color of the background. You can use the color picker by clicking Select button.

  • Image

    If the option is set as Image, Image option will appear. Enter the file path of the background image. You can upload a new one by clicking Upload button. If you already have, just select it from media libary. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance.

  • Flash Video

    If the option is set as Flash Video, Flash Video option will appear. Enter the file path of the background flash video (flv). You can upload a new one by clicking Upload button. If you already have, just select it from media libary. Less than 300 KB and 5 sec. long looping short videos are recommended to get the best performance.

  • Google Maps

    Google Maps If the option is set as Google Maps, Google Maps and Gradient Effect options will appear. Enter the source of the Google Maps background. If you don't know about Maps, you might check http://maps.google.com/ to get detailed information about it. If you have already selected the point, click Link button, copy the value of the src part in iframe and paste it to the textarea. Make sure to copy only the value of the src, not the whole iframe. Set the visibility of the gradient effect on Google Maps. If the option is set as Show, the dark gradient effect will be shown on the Google Maps to keep your content more readable.

    								http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=envato&sll=37.0625,-95.677068&sspn=51.310143,135.263672&ie=UTF8&hq=envato&hnear=&radius=15000&z=13&iwloc=A&cid=17132606827223274929&ll=-37.791473,144.977303&output=embed 
    							
  • Slideshow

    If the option is set as Slideshow, Category, Show Posts, Effect, Speed and Timeout options will appear.

    • Category

      Set the slideshow category type. Choise between Default and Custom to customize. If the option is set as Default, the slideshow will be generated from latest slideshow items without checking any category. If the option is set as Custom, the Custom Category option will appear.

      • Custom Category

        Enter the name or the slug of the slideshow category, which the slideshow will be generated from.

    • Show Posts

      Enter the number of the slider items are shown. By default, show posts option is set as last 5 items.

    • Effect

      Select the slideshow sliding effect. Choise between None, Fade, Slide Top, Slide Right, Slide Bottom, Slide Left, Carousel Right and Carousel Left to customize.

    • Speed

      Enter the sliding speed (Milliseconds). By default, sliding speed is set as 750 Milliseconds.

    • Timeout

      Enter the timeout speed between slides (Milliseconds). By default, timeout speed is set as 4000 Milliseconds.

    Creating the Slideshow Categories

    If you haven't create the categories yet, navigate to Slideshow » Slideshow Categories, enter the name of your category and click Add New Category.

    Creating the Slideshow Items

    Slideshow Add NewIf you are going to use Slideshow as a background, navigate to Slideshow » Add New to add new slideshow item. Enter the title, select the category and set the featured image.

    • Title

      Enter the title of the slideshow item.

    • Slideshow Categories

      Select the category of the slideshow item.

    • Featured Image

      Featured ImageThis image will be displayed as a background of your slideshow item. Click Set featured image link to upload or select the featured image from the media libary then click Use as featured image to set. Less than 300 KB and 1920 x 1200 sized images are recommended to get the best performance.

    PublishIf you done with creating the item, you should click Publish button at the right top of the page to save your item. You can remove the item by clicking Move to Trash link anytime.

Pattern

Set the visibility of the pattern on image. If the option is set as Show, the Image option will appear.

  • Image

    Select the pattern of the background. Choice between Pattern 1, Pattern 2, Pattern 3, Pattern 4, Pattern 5, Pattern 6, Pattern 7 and Pattern 8 to customize.

Transparent Layer

Set the visibility of the transparent background layer of the content for this page only. Choice between Default, Hide and Show to customize. If the option is set as Default, Transparent Layer option at Contrast » General will be used.

Content Position

Select the position of the content. for this page only. Choice between Default, None, Right and Left to customize. If the option is set as Default, Content Position option at Contrast » General will be used. If the option is set as None, the content will be hidden for this page only.

Sidebar Position

Select the position of the sidebar. for this page only. Choice between Default, None, Right and Left to customize. If the option is set as Default, Sidebar Position option at Contrast » General will be used. If the option is set as None, the sidebar will be hidden for this page only.

Contact Page Template

Page AttributesIf you would like to use the page as a contact page, you need to set Contact Page as the page template from Page Attributes » Template. Once you set the Contact Page as a page template, a contact form which contains Name and Surname, E-Mail Address, Subject and Message fields will be included at the end of the page, after your content.

PublishIf you done with creating the page, you should click Publish button at the right top of the page to save your page. You can remove the page by clicking Move to Trash link anytime.


A.8) Setting up the Widgets - top

If you don't know about widgets, you might check http://codex.wordpress.org/WordPress_Widgets to get detailed information about it. The theme comes with 1 sidebar named Sidebar 01. The theme contains 3 included widgets, which you can use on Sidebar 01. See the available included widgets below.

  • Contrast Flickr

    Flickr WidgetStream your Flickr gallery.

    • Title

      Enter the title of the widget.

    • Account

      Enter the ID of your Flickr account. You might check http://idgettr.com/ to get detailed information about it.

    • Show

      Enter the number of the images are shown.

  • Contrast Sub

    Sub WidgetA list of subcategories and subpages.

    • Categories Title

      Enter the categories title of the widget, which will be shown only at the categories.

    • Pages Title

      Enter the pages title of the widget, which will be shown only at the pages.

  • Contrast Twitter

    Twitter WidgetList your most recent tweets.

    • Title

      Enter the title of the widget.

    • Account

      Enter the name of your Twitter account.

    • Show

      Enter the number of the tweets are shown.


A.9) Setting up the Shortcodes - top

Shortcodes ShortcutShortcodes are the simple set of functions for creating macro codes for use in post or page contents. Click Themolution Shortcodes shortcut at the end of the visual function bar to see the complete list of shortcodes. Select shortcode then click Generate. Customizable shortcodes are listed below.

  • Gallery
    • Link

      Set the type of the link.

    • Column

      Select the number of columns.

    • Size

      Set the size of the preview images.

    See the example below.

    [gallery link="file" columns="1" size="thumbnail" /] 
  • Video
    • Type

      Select the type of the video.

    • Video ID

      Enter the ID of the video.

    • Width

      Enter the width of the video.

    • Height

      Enter the height of the video.

    See the example below.

    [video type="youtube" id="XSGBVzeBUbk" width="580" height="250" /] 
  • Accordion
    • Header

      Enter the header of the accordion.

    • Content

      Enter the content of the accordion.

    • Position

      Set the type of the accordion.

    See the example below.

    								
    								[accordion header="Header 01" position="first"]Content 01[/accordion] 
    								[accordion header="Header 02" position="last"]Content 02[/accordion]
    								
    								
    								[accordion header="Header 01" position="first"]Content 01[/accordion] 
    								[accordion header="Header 02" position="normal"]Content 02[/accordion] 
    								[accordion header="Header 02" position="normal"]Content 03[/accordion] 
    								[accordion header="Header 03" position="last"]Content 04[/accordion] 
  • Nivo Slider
    • Width

      Enter the width of the slider.

    • Height

      Enter the height of the slider.

    • Content

      Enter the content of the slider.

    See the example below.

    								[nivo width="960" height="500"]
    									
    									
    									
    									
    									
    									
    								[/nivo] 
  • Lightbox
    • Link

      Enter the link of the lightbox.

    • Group

      Enter the group name of the lightbox.

    • Descriptions

      Enter the description of the lightbox.

    • Type

      Select the type of the lightbox.

    • Width

      Enter the width of the lightbox.

    • Height

      Enter the height of the lightbox.

    • Content

      Enter the content of the lightbox.

    See the example below.

    								[lightbox link="image.jpg" group="group-01" description="Hello World!" type="image" width="" height=""]Content[/lightbox]
    							
  • Tooltip
    • Header

      Enter the header of the tooltip.

    • Content

      Enter the content of the tooltip.

    • Position

      Set the position of the tooltip.

    See the example below.

    [tooltip header="Header" position="top"]Content[/tooltip] 
  • Message Box
    • Type

      Set the type of the message box.

    • Header

      Enter the header of the message box.

    • Content

      Enter the content of the message box.

    • Width

      Enter the width of the message box.

    • Position

      Set the position of the message box.

    See the example below.

    [message_box type="info" header="Header" width="" position="none"]Content[/message_box] 
  • Button
    • Content

      Enter the content of the button.

    • Link

      Enter the link of the button.

    • Size

      Set the size of the button.

    • Color

      Select the color of the button.

    See the example below.

    								[button link="http://localhost" size="large" color="black"]Large Button[/button] 
    								[button link="http://localhost" size="medium" color="gray"]Medium Button[/button] 
    								[button link="http://localhost" size="small" color="red"]Small Button[/button] 
  • Google Maps
    • Width

      Enter the width of the Google Maps.

    • Height

      Enter the height of the Google Maps.

    • Latitude

      Enter the latitude of the Google Maps.

    • Longitude

      Enter the longitude of the Google Maps.

    • Zoom

      Select the zoom level of the Google Maps.

    • Content

      Enter the tooltip content of the Google Maps.

    • Type

      Set the type of the Google Maps.

    See the example below.

    								[gmaps width="560" height="250" latitude="" longitude="" zoom="0" type="ROADMAP"]Content[/gmaps]
    							
  • Dropcap
    • Content

      Enter the content of the dropcap.

    See the example below.

    [dropcap]Content[/dropcap] 
  • Highlight
    • Content

      Enter the content of the highlight.

    See the example below.

    [highlight]Content[/highlight]
  • Blockquote
    • Content

      Enter the content of the blockquote.

    See the example below.

    [blockquote]Content[/blockquote] 
  • Divider
    • Top Link

      Set the visibility of the top link.

    • Top Text

      Enter the text of the top link.

    See the example below.

    [divider top="show" text="Top" /] 
  • Text with Icon
    • Type

      Select the type of the icon.

    • Content

      Enter the content of the icon.

    See the example below.

    [icon type="sc-icon-01"]Content[/icon]
  • List Style
    • Type

      Select the type of the list.

    • Content

      Enter the content of the list.

    See the example below.

    								[list type="sc-list-01"]
    								
    • List Item 01
    • List Item 02
    • List Item 03
    [/list]
  • Like Box
    • URL

      Enter the URL of the Facebook Like Box.

    • Width

      Enter the width of the Facebook Like Box.

    • Height

      Enter the height of the Facebook Like Box.

    • Color Scheme

      Set the color scheme of the Facebook Like Box.

    • Show Faces

      Set the faces visibility of the Facebook Like Box.

    • Border Color

      Enter the border color of the Facebook Like Box.

    • Stream

      Set the stream option of the Facebook Like Box.

    • Header

      Set the header visibility of the Facebook Like Box.

    See the example below.

    								[likebox url="http://www.facebook.com/themolution" width="250" height="295" color="light" faces="true" border="" stream="false" header="true" /]
    							
  • Like Button
    • URL

      Enter the URL of the Facebook Like Button.

    • Type

      Set the type of the Facebook Like Button.

    • Width

      Enter the width of the Facebook Like Button.

    • Height

      Enter the height of the Facebook Like Button.

    • Show Faces

      Set the faces visibility of the Facebook Like Button.

    • Verb

      Set the verb of the Facebook Like Button.

    • Color Scheme

      Set the color scheme of the Facebook Like Button.

    See the example below.

    								[like url="http://www.facebook.com/themolution" type="box_count" width="100" height="100" faces="true" verb="like" color="light" /]
    							
  • +1 Button
    • URL

      Enter the URL of the Google +1 Button.

    • Size

      Set the size of the Google +1 Button.

    • Include Count

      Set the count visibility of the Google +1 Button.

    See the example below.

    [plusone url="http://www.themolution.com" size="standart" count="true" /] 
  • Tweet Button
    • Type

      Set the type of the Twitter Tweet Button.

    • Text

      Enter the text of the Twitter Tweet Button.

    • URL

      Enter the URL of the Twitter Tweet Button.

    See the example below.

    [tweet type="vertical" text="Text" url="http://www.themolution.com" /] 
  • Follow Button
    • Username

      Enter the username of the Twitter Follow Button.

    • Color

      Set the color of the Twitter Follow Button.

    • Include Count

      Set the count visibility of the Twitter Follow Button.

    See the example below.

    [follow username="Themolution" color="light" count="true" /] 
  • Column
    • Content

      Enter the content of the column.

    • Position

      Set the position of the column.

    See the example below.

    								
    								[column_13 position="normal"]Content 01[/column_23]
    								[column_23 position="last"]Content 02[/column_13]
    								
    								
    								[column_23 position="normal"]Content 01[/column_23]
    								[column_13 position="last"]Content 02[/column_13]
    								
    								
    								[column_13 position="normal"]Content 01[/column_13]
    								[column_13 position="normal"]Content 02[/column_13]
    								[column_13 position="last"]Content 03[/column_13]
    								
    								
    								[column_15 position="normal"]Content 01[/column_15]
    								[column_25 position="normal"]Content 02[/column_25]
    								[column_35 position="last"]Content 03[/column_35]

A.10) Setting up the Localization - top

The theme is localization ready. If you would like to translate it in your own language, you need to open localization.po file in wp-content » themes » contrast » themolution » languages folder to translate. If you done with translating your file with any translation tool, save the translated PO and MO files with your own language short name into the same folder as localization.po file. See the complete list of languages at http://codex.wordpress.org/WordPress_in_Your_Language. If you don't know about translation tools and translating, you might check http://codex.wordpress.org/Translating_WordPress to get detailed information about it.

Localization Files


B) HTML Structure - top

The HTML is valid XHTML 1.0 Strict and all template files share basic elements like header, footer, content, and background. Most of these are generated automatically. See the example of the main structure below.

				

C) CSS Files and Structure - top

The theme contains the following CSS files, and style.css file is the main CSS file which holds all the markup for layout. All dynamic styles are located in style.php file.


D) JavaScript - top

The theme contains the following JavaScript files.


E) PSD Files - top

The theme contains the following PSD files, and home.psd is the main PSD file, which contains portfolio, blog, page and post designs in the content named group.


F) Sources and Credits - top

The theme contains the following external scripts and resources. Special thanks to all.


Once again, thank you so much for purchasing this theme. As we said at the beginning, We'd be glad to help you if you have any questions related to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Themolution

Go To Table of Contents