Lolo WP Help Documentation

Welcome & Intro.

Hi, Thank You For Your Support

I intend updating the theme as I receive feedback from users. You will be entitled to all the updates ::: follow me on twitter twitter to be notified of major updates :::

Important

  • A Basic knowledge of WordPress is a must ::: If you're unfamiliar with WP download this free .PDF Getting Started with WordPress eBook compiled by iThemes
  • Please take the time to read through the documentation.
  • I will respond to any minor tweak questions and off course to any suggestions to improve the theme
  • Theme is built on the Bootstrap Framework so consider this when extending or adding features

Theme Activation & Theme Options - General

Activation

Upload your theme to themes folder as per usual instillation.

To install go to Appearance > Themes and activate the theme ::: After activation you will be taken to the Theme Options panel :::

If you're not redirected to the Theme Options panel you can access the Options Panel Appearance > Theme Options

Theme Options - General

Front Page Title and Tagline

a Title thats displayed on the front ( home ) page, you have the option of adding a short tagline below the title ( home page only )

Upload Header Logo and Upload Footer Logo

Create and Upload your Own Logo ::: By adding transparency the "Default Secondary Color" or individual Page / Post "Secondary Color" will show.

Disable Footer Logo

By Checking it no logo will be displayed in the footer.

Footer Copyright

Add a short copyright string

Upload Favicon

The small Icon seen in your Navigation Tool bar.

Default Secondary Color - links etc.

Default secondary color effects the elements as listed below ::: However the default Secondary Color can be overridden for each Page / Post.

.flex-control-paging li a:hover,
#Flexslider-Carousel .flex-direction-nav a:hover,
.flex-control-paging li a.flex-active,
.brand span,
.navbar .nav>.active>a,
.navbar .nav>.active>a:hover,
.navbar .nav>li>a:hover,
.navbar .nav>.active>a:focus,
.custom-btn:hover,
.custom-btn:active,
.reply .comment-reply-link:hover{
   background-color:#ff0000
}
a,
ul.footer-nav li.active a,
footer a:hover,
.single-item a:hover,
.navbar .nav li.dropdown.open>.dropdown-toggle,
.navbar .nav li.dropdown.active>.dropdown-toggle,
.navbar .nav li.dropdown.open.active>.dropdown-toggle,
.filter .btn:hover,
.color {
   color:#ff0000
}
.filter .btn.selected,
.price-plan-footer .custom-btn{
   background:#ff0000
}
section#title h2 span{
   background-color:rgba(255, 0, 0, 0.92)
}
/*IE*/.lt-ie9 section#title h2 span{
   background-color:#ff0000
}

Default Title BG and Content Box Opacity

Title blocks have an opacity you can adjust this to suit ::: Opacity can be overridden for each Page / Post

( Content Box )

Default Header Background Image

( background-attachment )

By default the BG image is Fixed, meaning the content will scroll over the image ::: Select scroll and the image will scroll up and down with the content.

Default Header BackGround Image - Vertical Alignment

You might want to adjust the alignment of the image up or down ( mostly up ) in that case you can add a value in em for this ::: avoid adding big values, you need to consider smaller screens, your value might move an image out of range

Similar Work - Header

Change the default "Similar Work" header to suit ( eg. Other Client Work ) This only shows on the Portfolio Description Page's custom post type.

( Portfolio Custom Post Type )

Sidebar Left / Right

( Right ) ( Left ) ::: Select if you want the sidebar left or right aligned site wide, by default it's right.

Portfolio Columns

Select between ( 2, 3, 4 ) columns to display the portfolio items.

Theme Options - Contact Form

Contact form Options is pretty much self explanatory.

Theme Options - Flex Slider

This is the main image slider, it's ideal to be used on the home page using the [flexslider title="no"] shortcode ::: Start adding images by clicking "Add New". Removing the Title is optional >> title="no".

  • Title - Required, if you plan on displaying a showing the title
  • Image - Suggested minimum image size : 770 x 500px
  • Link - Optional
  • Description - Not Required at all

Theme Options - Testimonials

Testimonial function use [testimonial] shortcode ::: Start adding images by clicking "Add New".

  • Title - Required, will be used as the Testimonials footer "Author".
  • Testimonial Message - Short Testimonial use HTML tags sparingly.

Theme Options - Social Links

Social links are displayed in the footer.

Template - Home Page

The Home Page template is a full width template except that it gives you an overly big header image with the Title box "pinned" below the menu bar. The title box not only has a title but also a tagline below the title.

Template - Full Width

Full Width Page without a sidebar.

The "Full Width" template is ideal when using the "Image Boxes" function.

Template - Blog

Simplest way to add blogging to your CMS. Create a page name it Blog ( or anything you deem fit ) assign the blog template and you're done.

Say you have 5 posts they will display on this template if you have a long post add the <!--more--> tag where you want the post to break, this will then add a "Continue Reading" button to the post.

Template - Contact

The contact template is a full with page with a fully functional contact form ( incl. spam protection )

Creating a Portfolio

Creating a decent portfolio is pretty simple. To get started select Portfolios > Add New For now lets ignore the "Secondary Color and Title Box Opacity" as well as "Header Image" meta boxes. You can read more about them in detail below.

Portfolio Info.

  • Secondary Title ( 1 ) - Your title might be long so add a secondary title.
  • Description ( 2 ) - Short description, use HTML tags sparingly.
  • Portfolio Meta ( 3 ) - Add "Meta" tags ( eg. Client : Peter Pan )
  • Buttons ( 4 )
  • Slider Images Ideally you should upload 2 or more images

Portfolio Shortcode

You can use the shortcode in a full width template, creating your own custom outlays ::: However don't use the shortcode with any other image sliders, as a rule of thumb never add more than one Image Slider on a page / post.

Template - Portfolio

Showcase your Portfolio items with the "Portfolio Columns" template.

Image Carousels

It's a simple way to add an image carousel to post and pages ::: Simply copy the generated shortcode and add to your content

Pricing Tables

Pricing Tables function use [pricing-table id=###] shortcode ::: You first need to create your tables

After you've created a Pricing Table copy said shortcode and place it in content ::: Use the Content Outlay shortcodes ( below ) to arrange the pricing tables the way you want.

Secondary Color and Title Box Opacity

First create a Carousel

Then Copy/paste the generated shortcode to your content

  • Secondary Color - Links etc. - Each page / post has the the feature to override the default secondary color thats set in the custom Theme Options. ( below is a list of elements set by the Secondary Color )
  • Title Box Opacity - This overrides the default opacity as set in Theme Options.

.flex-control-paging li a:hover,
#Flexslider-Carousel .flex-direction-nav a:hover,
.flex-control-paging li a.flex-active,
.brand span,
.navbar .nav>.active>a,
.navbar .nav>.active>a:hover,
.navbar .nav>li>a:hover,
.navbar .nav>.active>a:focus,
.custom-btn:hover,
.custom-btn:active,
.reply .comment-reply-link:hover{
   background-color:#ff0000
}
a,
ul.footer-nav li.active a,
footer a:hover,
.single-item a:hover,
.navbar .nav li.dropdown.open>.dropdown-toggle,
.navbar .nav li.dropdown.active>.dropdown-toggle,
.navbar .nav li.dropdown.open.active>.dropdown-toggle,
.filter .btn:hover,
.color {
   color:#ff0000
}
.filter .btn.selected,
.price-plan-footer .custom-btn{
   background:#ff0000
}
section#title h2 span{
   background-color:rgba(255, 0, 0, 0.92)
}
/*IE*/.lt-ie9 section#title h2 span{
   background-color:#ff0000
}

Header Image for individual Posts / Pages

  • Header Background Image - overrides the default image set in the Theme Options
  • background-attachment - By default the BG image is Fixed, meaning the content will scroll over the image ::: Select scroll and the image will scroll up and down with the content.
  • Vertical Alignment - You might want to adjust the alignment of the image up or down ( mostly up ) in that case you can add a value in em for this ::: avoid adding big values, you need to consider smaller screens, your value might move an image out of range

First / Second Image Box

Image Boxes adds a feature to add a full width image with a content box with a custom background and opacity ::: Can only use it with a Full Width page ( no sidebar ) ::: Use the appropriate shortcode to place in content [first_image_box] <h2>Your Title</h2> Your Content Here [/first_image_box]

  • Content Box Color - Set a color for the "Box"
  • background-attachment - By default the BG image is Fixed, meaning the content will scroll over the image ::: Select scroll and the image will scroll up and down with the content.
  • Content Box Opacity - You might want to override the default opacity value as set in the Theme Options
  • Content Box Width ( Span ) - Content is divided into 12 parts, a "Width - Span" of 6 would mean you are going to use half of the available space
  • Content Box offset ( from left ) - If you have a "Width - Span" value of 6 and you set Offset to 6 the Content Box will be all the way on the right

Post Formats ( Video, Quotes, Links, Gallery, Image )

Post formats is a convenient way of displaying content in a "Tumblr" format, especially when using the "Blog Template".

Video

[video site="vimeo" id="40000072"]

Link

Quotes

Gallery

[gallery]

Upload images with the media up-loader as per usual then insert the gallery shortcode.

Image

For an Image post simply upload an image and set it as "Featured Image"

Shortcodes

Content Outlay

Section

Bootstrap uses sections to differentiate content "blocks" Using the section shortcode creates a "space" in which you can safely add your own content.

[section id="unique" columns="12" margin="top | bottom | top-bottom"] The Content [/section]

Span

Use a span to define a content span, for instance if you add 2 spans with a value of columns="6" you are creating content span of 50% respectively.

[span columns="4" offset="1"] The Content [/span]

How you would typically use the Section and Span shortcodes

[section id="unique" columns="8" margin="bottom"]
[span columns="4"] Lorem Ipsum is simply dummy text of the printing and typeset-ting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [/span]
[span columns="4"] Lorem Ipsum is simply dummy text of the printing and typeset-ting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [/span]
[/section]

The result of above code

I used columns="8" because I was using the default tempolate ( has sidebar ) ::: If I was to use a "Full Width Template" or any other template that does not have a sidebar we would then set columns to 12 eg. columns="12" ::: margin="bottom" adds a bottom so we can have even spacing throughout the site, you can set a margin top or margin top-bottom should you require spacing. ::: id="unique" For HTML5 purposes you might want to add a section id ( Optional )


Accordion

[collapsibles]
  [collapse title="Collapse 1" state="active"]
    Your Content Here
  [/collapse]
  [collapse title="Copllapse 2"]
    Your Content Here
  [/collapse]
  [collapse title="Copllapse 3"]
    Your Content Here
  [/collapse]
[/collapsibles]

Tabs

[tabs]
  [tab title="Home"]
    Your Content Here
  [/tab]
  [tab title="Profile"]
    Your Content Here
  [/tab]
  [tab title="Messages"]
    Your Content Here
  [/tab]
[/tabs]

Break & Clear

Wordpress adds its own paragraph and linebreaks ::: I find this makes it difficult to lay out my content in a "readable" manner, to overcome this I use these shortcodes to add spacing in content. ::: I can suggest Disable Wpautop :::

that disables this core functionality.

Break

Can use the break and clear shortcodes if wptexturize is disabled. By using these "simple" shortcodes while wptexturize is disabled gives you absolute controll over the breaksand "spacing" in content.

[break]

Below is the result of adding the break shortcode where you want to seperate content ::: I compare it to content with a margin-bottom

Clear

Using the Clear shortcode, simply adds a line break in content

[clear]

Below is the result of adding the clear shortcode ::: The blue and pink boxes are devided with a clear shortcode

HR ( Horizontal Rule )

[hr margin="top | bottom | top-bottom" dashed="yes" show="phone | desktop"]

  • margin - add additional margin Top, Bottom or Top and Bottom
  • dashed - If yes, line will be dashed instead of solid
  • show - If phone will only be visible on phones & if desktop will only be visible on desktops. If you remove will be visible on all platforms.

[hr margin="top | bottom | top-bottom" dashed="yes" show="phone | desktop"]

Buttons

[button align="center | left" size="small" link="http://yourlink.com" icon="icon-lock" ]Your Button[/button]

  • align - By default the button is right aligned.
  • size - Default size is "normal"
  • icon - Adding one of the Font-Awesome icons will place an icon to the left of the button text. ( read all about FontAwesome on the official site ) 

[button link="http://yourlink.com" icon="icon-lock" ]Your Button[/button]

Font-Awesome Icons

[icon type='icon-cloud']

The Icon shortcodes is a simple way of safely adding Font-Awesome icons to your content

potential site visitors [icon type='icon-cloud']

Font-Awesome Arrow Link

[arrowlink link="#"]

The Icon shortcodes is a simple way of safely adding Font-Awesome icons to your content

Letraset sheets containing Lorem Ipsum passages. [arrowlink link="http://yourlink.com"]

Twitter - Single Tweet

[home_tweet query="yourdesigncoza"]

Displays the latest tweet and caches it for 15 minutes

Video

[video site="youtube | vimeo | dailymotion | yahoo | bliptv | veoh | viddler" id="jLUv6Twn1po"]

  • site - The video host
  • id - only the video id not the full URL ( src )

[video site="youtube | vimeo | dailymotion | yahoo | bliptv | veoh | viddler" id="jLUv6Twn1po"]

Credits

Sources & Credits

  • Twitter Bootstrap - http://twitter.github.com/bootstrap/
  • Rachel Baker - https://github.com/rachelbaker/bootstrapwp-Twitter-Bootstrap-for-WordPress
  • Flexslider - http://www.woothemes.com/flexslider/
  • PrettyPhoto - http://www.no-margin-for-errors.com
  • Cycle - http://jquery.malsup.com/cycle/
  • FitDivs - http://css-tricks.com + Dave Rupert - http://daverupert.com
  • ToToP - http://www.mattvarone.com/web-design/uitotop-jquery-plugin
  • Quicksand - http://razorjack.net/quicksand
  • Modernizer - www.modernizr.com - Featured Post
  • FontAwesome - http://fortawesome.github.com/Font-Awesome/
  • Twitter Search - http://wordpress.org/extend/plugins/twitter-search-for-wp/
  • BackgroundSize - https://github.com/louisremi/jquery.backgroundSize.js
  • TGM Plugin-Activation - https://github.com/thomasgriffin/TGM-Plugin-Activation
  • Form Validation - http://docs.jquery.com/Plugins/Validation