Content

Content

2.4 Installing Revolution Slider

proistak September 8, 2014 Slideshow
  1. First install the latest Revolution Slider plugin
  2. Import the demo content from the themeforest/demo/home.zip file
  3. The extra css that the slider uses(already imported) is
.tp-caption.huge_text{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 900;
font-size: 72px;
line-height: 72px;
font-family: ‘Lato’, sans-serif;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.tp-caption.medium_white{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 400;
font-size: 24px;
line-height: 24px;
font-family: ‘Lato’, sans-serif;
padding: 0px 4px;
padding-top: 1px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#000;
background-color: rgba(0,0,0,.9);
padding: 10px;
}
.tp-caption.very_large_text{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 900;
font-size: 60px;
line-height: 60px;
font-family: ‘Lato’, sans-serif;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.tp-caption span.light_text {
font-weight: 100;
}

Create a timeline page

langan July 3, 2013 Timeline
To create a timeline page do the following

  1. Select Timelines -> Add New from the admin side menu
  2. Give your new timeline a title
  3. Select a header type and add a header title in the custom header image box
  4. Select a category of posts to display in your Timeline
  5. Click Publish
  6. Go to Appearance -> Menus and add your new timeline to the menu
  7. Note

    If you can’t see timelines in your menu options go to screen options at the top of the menu page and check Timelines so that timelines will be available.

Screen Shot 2013-07-03 at 12.35.48Screen Shot 2013-07-03 at 12.36.21

8.1 Create a contact page

langan June 20, 2013 Contact Page
Smartbox uses uses the contact form 7 plugin for contact pages

  1. Find Contact Form 7 Login to your WordPress admin panel and goto Plugins -> Add new and enter “contact form 7” into the search box
  2. Install Contact Form 7 Click the install now link in the contact form 7 section
  3. Create a contact formClick the Contact Menu

    Edit Contact form 1 and paste the code on the right into the form section

  4. Add Contact Form to page Click the save button at the top of the page, then copy and paste the shortcode from the brown text box into your contact page.
  5. (Optional) Personalise your form To make fields required add a * symbol to your form field shortcodes e.g. [text your-name becomes [text* your-name. For more info see the Contact Form 7 Documentation

Form

<div class="row-fluid">
    <div class="contact-form span12" id="contactForm" novalidate="">
        <div class="controls controls-row">
            <div class="control-group span6">
                [text your-name class:input-block-level watermark "your name"]
            </div>
            <div class="control-group span6">
               [email* your-email class:input-block-level watermark "your email"]
            </div>
        </div>
        <div class="controls controls-row">
            <div class="control-group span12">
                [text your-subject class:input-block-level watermark "subject"]
            </div>
        </div>
        <div class="controls controls-row">
            <div class="control-group span12">
                [textarea* your-message x5 class:input-block-level watermark "I want to talk about....."]
            </div>
        </div>
        <div class="controls controls-row">
            <div class="control-group span12">
                [submit class:btn class:btn-primary "Send Message"]
            </div>
        </div>
        [response]
    </div>
</div>

Contact form settings

contact-settings

7.3 Creating simple sections

langan June 20, 2013 Tags: Pages
With Smartbox you can create multiple Simple sections inside your page to make them stand out. These sections comes in 3 styles:

  1. White : a fullscreen section with no background
  2. Gray : a fullscreen section with gray background
  3. Dark : a fullscreen section with dark gray background

7.2 Page headers

langan June 20, 2013 Tags: Pages
Smartbox allows users to set unique headers on every page. The page headers can be set in one of the following options

  1. Nothing : The default option will create no header for your page
  2. Slideshow : A slideshow will be used for the header of the page
  3. Super hero : Use this option to create an impresive image type header
  4. Map : This option will allow you to have a map in your page header

7.1 Using page templates

langan June 20, 2013 Pages
Smartbox uses 4 page templates so that you can customize your content to your needs.

  1. Default template : The default page template is the classic right sidebar layout. Your content is located to the left side and you can add widgets to the right sidebar
  2. Full width – no padding : Use the fullwidth – no padding template to create pages with multiple sections (see following chapters)
  3. Full width – padded : This template is perfect if you want your content to take the full width of the page
  4. Left Sidebar : The left sidebar template is the same as the default page but has the sidebar on the left side
9_1

4.1 Adding services

langan June 20, 2013 Services
To add Services follow these steps

  1. Click on Services > Add new
  2. Type the Service tittle
  3. Type the Service info
  4. Type the class of the font awesome class for the icon in fontAwesome
  5. Set the order
  6. Add a feature image
  7. Publish the service
8_1