1. Theme Overview
  2. Theme Installation
  3. Default Setup
  4. Homepage Setup
  5. Admin panel
  6. Custom Templates
  7. Custom Widgets
  8. Images
  9. Post Formats
  10. Shortcodes
  11. Theme Icons
  12. Adding New Fonts
  13. Plugins
  14. Translation

Scroller

Theme Documentation


Created:31.05.2013
By: Dannci & Themnific

Support: Dannci's Profile Page
Web: www.themnific.com


Hello there...

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me via Profile page. Thanks so much!


 

 

 

 

Theme Instalation - top

Installation via WP Dashboard:
  1. Unzip the Main downloaded file,
  2. Go to Appearance >Themes,
  3. In Install theme tab, choose "Upload",
  4. Then find scroller.zip file on your computer and press Install Now,
  5. After that activate theme,
  6. Go to Scroller Theme Options and setup theme.

 

Installation via FTP:
  1. Unzip the Main downloaded file,
  2. Upload scroller folder into Themes folder in your WordPress installation (/wp-content/themes) via FTP,
  3. Go to Appearance >Themes, find Scroller theme and activate it,
  4. Go to Scroller Theme Options and setup theme.

img

 

Default Setup - top

Right after the installation go to Scroller Admin panel

img

and hit "Save All Changes" button to set default style settings:

img

 

 

Homepage Setup - top

 

  1. In Pages section create new page called 'Home' and use for it Homepage template,
  2. Important!
    If you want to use Homepage with classic header use 'Homepage Scroll + Classic Header' template,
    If you want to use Homepage without scroll effect use 'Homepage - No Scroll' template and use only 'Main Menu' location (in Menus section),
    img
  3. Go into Settings > Reading and set created Home page as Static page - Front page,
  4. Note: If you want to create 'Blog' page create empty page (Default template) - name it Blog and in Settings > Reading set this page as Post page
    img

Main Slider setup:

  1. In Scroller admin panel, in Layout section choose type of slider
    1. Slider with caption displays (as caption) only text entered into slide content,
    2. Slider with content displays content as it is
  2. Create new Slider post (custom post) with title, add sometext and set featured image for this post,
  3. If in Admin panel is selected Slider with content you can style inserted text - use native wp tools to set custom color, align text, add h1 - h4 headings etc.
    img

  4. img

Layout sections

  1. Create new Layout post (homepage section) with 'Featured Works' title,
    img
    img
  2. In 'Layout Options' tab enter unique 'Navigation Anchor' 'Navigation Anchor' fields are important for scroll menu. For this section we add 'portfolio' anchor
  3. In 'Layout Options' select if section will be shown on small (mobile) screens.
  4. In 'Layout Options' can be inserted aditional info - Section Intro - will be shown as text next to section title.
  5. NOTE! If Section Intro field stays empty layout (section) title will be hidden. And you can add any content...

Homepage Content & Shortcodes

  1. If you set featured image for layout section, this image will be as background (parallax effect). Use big images eg. 1920x1080px.
  2. Into Layout section content can be added headings, texts, button, icons... and these elements can be styled using native wp tools (similar to content in slider)
    img
  3. Into Layout content can be inserted Layout shortcodes
    img
  4. Before this needs to be created custom posts:
    img
    1. Portfolio Latest/Featured, Carousel Featured and Slider Featured shortcodes displays Portfolio posts,
      NOTE: for featured shortcodes can be inserted more categories (Categories names should all be in lowercase and separated by commas)
      img
    2. Blog Lates shortcode displays classic Posts
    3. Staff shortcode displays Staff Posts
    4. Pricing tabs shortcodes displays Pricing Tabs Posts
    5. Services shortcode displays Services Posts
    6. Clients shortcode displays Clients Posts

Scroll Menu for Layout sections:

  1. You need to create menu item for every Layout section. It is because of scroll effect.
    Go to Appearance > Menus and create 'Scroll menu'
    img
    select this menu for 'Scroll Menu' location and save it!
    img
  2. Now using 'Custom Link' feature add new menu item with 'Portfolio' label and '#portfolio' link
    img
  3. Important ! For every layout section add New menu item! Use unique word from 'Navigation Anchor' field (see Layout sections (step 2)), and create menu item with '#+unique word' link
    So if I create Services and Portfolio sections I will add these menu items:
    img
    Do not forget to create Home link (with #home) to scroll to the top.
  4. Add external link to scrolling menu:
    In Screen Options (top dropdown menu) enable CSS classes
    img
    And now add your external link with 'external' word in CSS classes field img

Theme Setup - Admin panel - top

img

Theme comes with extensive options panel with functions divided to these sections:

img

General Settings:
  1. Upload your Main logo image - use bigger image (eg. 420x160px),
  2. Upload your Small logo image - using in scroll header and inpost/pages (eg. 200x40px),
  3. Upload favicon,
  4. Paste Analytics Tracking Code.

img

General Layout:
  1. Select type of slider
  2. Add Portfolio full URL,
  3. Upload parallax image for Portfolio archives,
  4. Add Blog full URL,
  5. Upload parallax image for Blog page,

img

 

Styling Options - Primary, Secondary styling:
  1. Choose Font family with color, style and width of the font,
  2. Choose colors for typographic elements: body text/links, navigation BG and links, hovers etc.).

img

 

Headings Typography:
  1. Select Font-size for all headings (h1- h6),
  2. Select Font-family for all headings (h1- h6),
  3. Select font weight for all headings (h1- h6),
  4. Select font color for all headings (h1- h6).

img

 

Social Networks Settings:
  1. Enter the full URL of social network, your profile or account.

img

Custom Footer:
  1. Enable left custom footer and enter some text.
  2. Enable right custom footer and enter some text.

img

 

If you are finished click on "Save changes" button!

 

 

 

Custom Templates - top

Custom Templates:
  1. Create a page by going to Page > Add New.
  2. In Attributes Section select custom page template (Full Width Page, Portfolio etc.)
  3. Click the Publish button to publish your page.

 

Custom Widgets - top

Theme comes with few custom widgets (marked as -Themnific). Widgets are very easy to setup. Just follow and set partial widgets fields.

img

 

Images - top

Featured Images - Setup:
  1. It is easy! Images and thumbnails are generating automatically. To display thumbnails correctly upload images via WP interface,
  2. then use "Use as featured image" button to set featured image.

img

Post Galleries - Setup:
  1. Add more than one image into post gallery::
    doc
  2. After that insert this quicktag into post content:
    [gallery link="file"]

Post Formats - top

Theme comes with these posts formats:

doc

Standard post

Default (native) WordPress post.

Video post

Check 'Video' post in the Format tab and enter video embed code (iframe) into Video field:

img

Audio post

Check 'Audio' post in the Format tab and enter audio embed code (iframe) into Audio field:

img

Gallery post

Check 'Gallery' post in the Format tab and enter more than one image into post gallery (see: images section)
The sideshow will be created automatically.

Image post

Check 'Image' post in the Format tab and set featured image.

Quote post

Check 'Quote' post in the Format tab and add some content.

Post content = Quote.

Post title = Author of the quote.

img

Link post

Check 'Link' post in the Format tab and ads URL into Link field.

img

Shortcodes Generator - top

Theme includes Custom Shortcodes that allow you to easily add buttons, boxes, social buttons, columns and more to your posts, pages and widgets.

Create shortcodes easily using shortcode generator:

img

 

Themme Icons : - top

 

Font Awesome - Integration

Theme is integrated and with Font Awesome font. Due to marketplace licensing font files cannot be included in download package.

1. Download Font Awesome.

2. In downloaded file is 'font' folder with 4 font files (.eot, .svg, .ttf, .woff)

3. Upload all these font files into 'font' folder (located in main theme folder) on your server

4. And that is all! :)

 

Services Icons (like in demo)

 

1. Before every service title add this piece of code

<i class="XXX"></i>

You can add icons before menu items too:

 

5. For XXX you can set any icon name. You can find all icon names on Font Awesome homepage.

6. You can see how-to video here. It is not tutorial for my theme but the process is the same:

7. If you are done, hit "Save menu" button!

 

Adding New Fonts: - top

 

- in admin-fonts.php (functions folder) add code necessary to font loading, eg. Roboto:900 use | to divide partial fonts.

- then in 'admin-interface.php' file (functions folder) find 'Font Face' section

- add your font (follow previous font lines).

Three new lines in this file are necessary:

$font58.....  
...
if (strpos.....
...
$output .= ' < option.....

Backup your files!

 

Plugins: - top

 

Contact Form 7

Theme is 'Contact Form 7' Plugin ready: Plugin Homepage

In search field (Plugins > Add New) insert 'Video Thumbnails' and Install this plugin

Plugin can be set its screen

You can insert created 'contact' shortcode in every Layout section (in column too).

Translation - top

This theme is translation/localization ready and comes with vergo.po file. File is located in 'lang' folder.

  1. Download poedit software here,
  2. Install it and in this software translate vergo.po file (line by line) screens,
  3. Once you have translated all the strings, you can save this as your .po file.

    The filename of your .po is crucial. Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in American English for example, your file name will look like en-US.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

    Once you save, POEdit by default automatically creates a .mo file alongside your .po file. Put these files into 'lang' folder.

  4. Access your wp-config.php file found in your WordPress' root folder. Your file should already contain define('WPLANG', ''); but if it does not, you can add it in. You simply need to add your language and locale code into the define. If you were to translate your theme into German, you would have this:
     define('WPLANG', 'de_DE');  

Your internationalization is complete!

 

 

 

 


Once again, thank you so much for purchasing this theme.

Go To Table of Contents