COFFEE & CREAM Documentation

“COFFEE & CREAM” Documentation by “Ocholabs” v1.7

Created: 07 June 2013
By: Ocholabs
Email: contact@ocholabs.com

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

Installation
Theme Options
Setting up a Blog section
Setting up a Portfolio section
Setting up a Contact page
Setting up a One page Website
Widgets
Setting up a Scrolling Navigation
Shortcodes
Background Icons & Service icons PSD help

A) Theme Installation - top

Upload the coffeeandcream folder to your Wordpress installation in the wp-content / themes directory.

Make sure to not upload the folder which contains the license and the documentation…

Go to the Appearance / Menus page. Create a menu (1) then assign it to the theme location called "Main Navigation" (2).

Once you have created your homepage, go to the Settings / Reading page, and assign you homepage as the front Page.

DO NOT SET THE BLOG PAGE (see Setting up a Blog section)

B) Theme Settings - top

Once COFFEE & CREAM is installed, you should visit the theme options to configure the theme to your needs.

Go to the Theme Options menu from he appearance menu.

1) Global Options

a) Dev Mode

The Dev Mode has to be ON as long as you are creating your website.
It will force the CSS of the skins to be updated.

Toggle it OFF once you don't need to do anymore change. It will speed up your installation with serving cached CSS.

If you need to do further changes on you skin, toggle it ON again, check the render on you live website, then toggle it OFF again if you are OK with the changes.

b) Text Alignement

This option will set the text alignement by default. The default value is "Normal". If you set centered, then you will have centered text.

c) Default Color Scheme

This option let you setthe default colorscheme of the website. every new page, post or portfolio will have this colorscheme by default. Coffee = dark color scheme, Cream = light color scheme and sugar = colored color scheme. You can define the color in the next option.

d) Sugar color setting

COFFEE & CREAM comes with 10 default colored skins. And you can although create your own using the Custom Color skin.

The custom color skin will use the 2 values "Custom Sugar Color" and "Custom Sugar color complementary" to create the custom skin.

e) Fonts setting

You can add you own selection of Google Fonts to the 46 preselected ones.

Type the name of the google font like displayed in Google Fonts. ie: Lily Script One
To use custom google font, you will need to save options first. Then it will appear in the list of available fonts.

Coffee & Cream allow you to select 2 google fonts and then set some other settings:

Select the Default google font. By default, it will be used for every element in the theme.
The secondary google font will be used only where you decided to use it
You can have the secondary google font for Body, Headings, Navigation & Buttons
You can select to uppercase automatically some elements : Headings, Navigation & Buttons
As some types don't look good with Bold font weight, you can decide if you want the headings to be displayed with bold or not.
You can set a font-size for Body text & navigation

2) Header Options

a) Header Color Scheme

You can set a different color scheme to the header for scrolled & non scrolled state.

b) Logo

Upload your website Logo.

c) Description

If you don't want to use a logo image, then you can have the Title & Description instead. Site Title & Description are defined in the Wordpress General Tab of the Settings Menu. If there is no logo, the title will be displayed. If you want to show the site description too, then set this option to "Yes".

Remove the uploaded logo to activate the Text title.
You can set the site title color & Hovered Color
You can activate the description (make it visible) and set it's color.

3) Footer Options

Set the footer color scheme
You can decide to not display the footer
You can set the text for the footer / copyright. You can use HTML here

4) Pages Options

Define the default layout options for pages. They will be used when creating a new page.
These options can be overridden on every pages.

5) Blog Options

a) general Blog Options

Set global options for your Blog:

Select the page which will be used as the blog index.
Define the number of posts per page
Select which Meta data can be displayed : Author, Date, Tags, Categories, Comments.
Note that you can select on individual Posts or Index pages if you want to show metas or not.
But when selecting to show the metas, only the metas selected in this field will be displayed.

b) Default Posts Layout

Define the default layout options for posts. They will be used when creating a new post.
These options can be overridden on every post.

6) Portfolio Options

a) general Portfolio Options

Set global options for your Portfolio:

Select the page which will be used as the portfolio index.
Define the number of portfolio items per page
Select which Meta data can be displayed : Client, Date, link, Categories, Comments.
Note that you can select on individual Portfolio Items or Index pages if you want to show metas or not.
But when selecting to show the metas, only the metas selected in this field will be displayed.

b) Default Portfolio Items Layout

Define the default layout options for portfolio items. They will be used when creating a new portfolio item.
These options can be overridden on every portfolio item.

7) Custom Sidebars

Create custom sidebars

Main Sidebars are used in the One Page template
side Sidebars can be used in Pages, Posts & portfolios.

8) Images Options

a) Image overlay

Choose the color & the opacity of the overlay which is displayed on images Rollover when Zoom or Link actions are available.

b) Action Icons

You can set different settings for action Icons (Zoom, Link & Play).

Show Zoom Icon on Single pages Featured Image/Slider
Show Zoom Icon on Index pages Featured Image/Slider
Show Link Icon on Single pages Featured Image/Slider

c) Gallery default options

Set the default settings for galleries.

Image Style
Image Format
Image spacing

d) Lightbox options

Set the settings for the lightbox.

9) Buttons Options

Define the different custom colors background & text color. the hovered state colors will be set automatically (darkened).

10) 404 Page Options

As there is no "existing" page for the 404 page, you can set some options in this section.

a) Featured image & Background Image

Set a featured image and a background image (optional).

b) Texts

Define the page title, subtitle and content.

c) Shortcuts

Here you can define if you want to show some shortcuts / links in the 404 page to make life easier to your 404 visitors!

One column will be created for each of the options selected in the links field.
You can then refine your selection for each selected link by choosing what will be displayed if you don't like the default selection.

11)Favicons

a) Favicons

To enable favicons, set the Use favicons field to yes.
You can then upload favicons for the different sizes.

favicon.ico : 16x16px .ico file
Apple Touch icons : png files of the described dimension.

b) Login Form Image

In this field you can upload an image to replace the Wordpress Logo above the Login Form.

12) Translations

COFFEE & CREAM allow you to change some translations directly in the admin area for most common words & expressions.
A translation file exists for all translations.

13) Search

In this section you can set the layout & options of the search page such as the number of results to show, the background image…

14) Custom CSS

If you need to add some custom CSS rules, do it here!
They will be placed just after the skin CSS to make sure that they will be applied correctly.

15) Import / Export options

In this section you can export your theme options or import existing ones.

a) Importing options

The best way to import options is to use the "Import from file" option.

Simply open the fil where you saved some options.
Copy the whole content
Paste it in the field
Press import.

b) Exporting options

The best and safer way to export options is to use the "Download" option.

Click the Download button
Save the file in a safe place!

C) Setting up a Blog section - top

To create a blog section in your website make sure to follow these steps.

1) Create a blog index page

Create a new page or use your existing blog index page.
Make sure that the permalink is not like "yoursite.com/blog" as this is reserved Wordpress URL and might cause redirection problem.

2) Set the page template

In the Page Attributes metabox, change the template to "custom index".
The page will save automatically and new options will appear.

3) Set the content selection for a Blog page

In the Page Configuration metabox, set values as in the image.

Post type: set Blog Posts as you want blog posts to be displayed
How many items per page? : Set how many posts you want to display on the index page.
Posts Selection: Select By Category and set the Select Category to All Categories.
Save

With this settings, all blog posts will be displayed, exactly what wee want for a blog index page.

By default, Tags pages & Categories pages will have the same parameters as the blog index page, but you can have dedicated template for any single Category or Tag (see Custom Category & Tag pages).

4) Set the Blog Index page in the Theme options

Open the Theme Options and go to the Blog tab.

In the Blog Index field, select the blog index page that you just created or edited.

Your blog section is operational.

5) Custom Category & Tag pages

COFFEE & CREAM allow you to create custom layouts for any category or tag page. This is a good way to adapt the presentation of your blog to your content.

In this example we will create a custom layout for one category : "Panoramic".

a) Create a new page

As we've done with the blog index page, we create a new page.

b) Change the template

In the Page Attributes metabox, change the template to "custom index".
Although set the page parent as the blog index.

c) Set the content selection for a Category page

In the Page Configuration metabox, set values as in the image.

Post type: set Blog Posts as you want blog posts to be displayed
How many items per page? : Set how many posts you want to display in the category page.
Posts Selection: Select By Category and set the Select Category to desired category. Here we selected panoramic.
Save

With this settings, only blog posts from the "panoramic" category will be displayed,

You can then have a different display, sidebar selection or even set a background image/slideshow.

We need now to link this page to the category.

d) Link category page to the category taxonomy.

Go to the Category admin page (in the Posts menu).

Then edit the category.

In the related page field, select the page that you just created for the category.

Follow the same steps for a custom Tag page :

create a page
set the Custom index template
In the page configuration metabox select By Tag and set the Select Tag to desired tag
Edit the Tag in the Posts / Tags menu and assign the created page at the Related page field.

D) Setting up a Portfolio section - top

To create a portfolio section in your website make sure to follow these steps.

1) Create a portfolio index page

Create a new page.
Make sure that the permalink is not like "yoursite.com/portfolio" as this is reserved Wordpress URL and might cause redirection problem.

2) Set the page template

In the Page Attributes metabox, change the template to "custom index".
The page will save automatically and new options will appear.

3) Set the content selection for a Portfolio page

In the Page Configuration metabox, set values as in the image.

Post type: set Portfolio as you want portfolio items to be displayed
How many items per page? : Set how many posts you want to display on the index page.
Select Portfolio items from: Select All Portfolio Categories.
Save

With this settings, all portfolio items will be displayed, exactly what wee want for a portfolio index page.

By default, Portfolio Categories pages will have the same parameters as the blog index page, but you can have dedicated template for any single portfolio Category (see Custom Portfolio Category pages).

4) Set the Portfolio Index page in the Theme options

Open the Theme Options and go to the Portfolio tab.

In the Portfolio Index field, select the portfolio index page that you just created.

Your portfolio section is operational.

4) Custom Portfolio Category pages

COFFEE & CREAM allow you to create custom layouts for any portfolio category page. This is a good way to adapt the presentation of your portfolio to your content.

In this example we will create a custom layout for the "Portraits" portfolio category.

a) Create a new page

As we've done with the portfolio index page, we create a new page.

b) Change the template

In the Page Attributes metabox, change the template to "custom index".
Although set the page parent as the portfolio index.

c) Set the content selection for a Portfolio Category page

In the Page Configuration metabox, set values as in the image.

Post type: set Portfolio as you want portfolio items to be displayed
How many items per page? : Set how many portfolio items you want to display in the portfolio category page.
Select Portfolio items from: Select desired portfolio category. Here we selected Portraits.
Save

With this settings, only portfolio items from the "Portraits" category will be displayed,

You can then have a different display, sidebar selection or even set a background image/slideshow.

We need now to link this page to the portfolio category.

d) Link portfolio category page to the portfolio category taxonomy.

Go to the Portfolio Type admin page (in the Portfolio menu).

Then edit the portfolio category.

In the related page field, select the page that you just created for the portfoliocategory.

E) Setting up a Contact page - top

To create a contact page in your website make sure to follow these steps.

1) Create a page and set contact template

In the Page attributes metabox, select the Contact template. The page will save and new options will appear.

2) Map information

In the Contact Map metabox, set your contact information.

Company name
Map title
Address
City
Country
Zoom (google can display several zoom levels for the same map)
Finish by clicking on the Geocode Address button.
If the address was geolocalized correctly, it will display a green checked symbol.

If you don't want to display the map Geocode with empty address fields and if the red Cross is shown, no map will be displayed.

3) Map information

Here you can set some additional information below the map.

4) Social networks

Here you can set your social networks. They will be displayed below the nav.

5) Contact form

Here you can the form title and text and your email address (needed for the contact form).
If you just want a map, then leave the email field empty.

F) Creating a One Page Website - top

In this section we will see how to create a One page website

1) Create a new page and set the template

In the Page Attributes metabox, change the template to One Page (Widgets Only).

2) Then select the Sidebar

In the Page configuration metabox, set which sidebar you want to use for your widgets.

3) Assign Widgets!

The one page template has no content itself as everything is managed with widgets.
See next section to learn how to use the widgets.

G) Widgets - top

In this section we will take a look at the COFFEE & CREAM Premium Widgets:

Do not use other widgets than Coffee & Cream widgets in the sidebars for One Page templates.

They can be recognize easily as they are colored in blue

Before looking at each widget, we'll see the common options in all widgets.

Most of the widgets have a title & some text to display before the specific information.

Some of the widgets can have a link/buttom at the bottom.

Set the button text, the link
Set if the link opens in the same window or in a new window
You can then add an icon: just type the icon name (click the help button for a full list of icons with their name)

Select the widget color scheme: coffee, cream or sugar

You can add an icon to the widget. I recommend to not use this option for the first visible widget as it will be cut by the navigation.

Most of the widgets have some background options

Select the background image
Select the background style: normal, repeat or stretch
Select if you want to make it a parallax background or not
Set the parallax speed: the speed is relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling. For a smooth background icons like in the demo, use 0.1 as value in all widgets with a backgrounded icon.

1) o Clients : Show your clients Logo

First, create some clients in the clients menu.

Set a title
the featured image is the client logo
You can set a client category (the widget will let you select a client category to know which clients to display)
You can then add a link. If yes, then the logo will be clickable and link to that URL.

Select how many clients to display per page
Select the total number of clients in the caroussel
Select the clients category

This is a clients widget.

2) o Contact : a simple contact form

Set your email

You can although select a map which you must first create in the maps section. Creating a map is exactly like completing the Contact template (see above).

This is a contact widget.

3) o Focus : ideal for a Portfolio

Just after adding the widget, save to acess to the widget options

Information display: choose from 4 available options:

None (only image): Only the image will be displayed
Image with caption: A caption will be displayed at the bottom of the picture.
Title below image: Title will be displayed below the picture
Title & Description: Both title & description (excerpt) will be displayed below the picture

Widget options: Activate the options you want for the created widget:

Link: will show the Link Icon when hovering the slide
Zoom: will show the zoom icon when hovering the slide. It will then open in a lightbox

Thumbnails Format: Select the picture format: Square, normal rectangle, wide rectangle, vertical rectangle.
Thumbnails Style: You can have normal angles, rounded angles or Circular format (better when using square format).
Number of columns: oFocus displays focuses in column format. You can set here the number of columns. Note that in footer & in Sidebar, the maximum will be 2 (same for mobile view).

Content selection: select from three options:

Automatic From category: it will display last posts from selected category, portfolio category or slide category.
Mmnual Selection: you select a list of posts, pages, slides or portfolio items
List of Ids: you can mix everything. just write the content ids coma separated.

This is a Focus Widget

4) o Header: good for the resume first widget

Fill the 4 text fields
Upload your image (square image)

This is a header widget.

5) o last tweet: show your last tweet(s)

Since 2013 - 06 -11, twitter updated the API. You now need miore info to have the widget to display your last tweets. Go there to get your keys.

Set your Consumer Key, Consumer Secret, Access Token & Access Token Secret
Select for how long the tweets must be cached
Type in your twitter ID
Select the number of tweets to display
You can add a follow me button after the widget

This is a Twitter last Tweets widget.

6) o Personal Info

You can add 10 lines of information
For each line, set the label (title) and the text. Empty lines won't be displayed

This is a Personal Info widget.

7) o Services / o Services 2

First, create some services in the services menu.

Set a title
Set the service description in the content editor. Try to not use special things like shortcodes etc…
the featured image for the service Icon
You can set a service category (the widget will let you select a service category to know which clients to display)
You can then add a link. If yes, then the icon will be clickable and link to that URL.

Select how many services to display per page
Select the total number of services in the widget
Select the services category

This is a Service 1 widget.

This is a Service 2 widget.

8) o Skills

First, create some skills in the skills menu.

Set the skill title
Set a skill group as skills will be grouped in skills group
Set the skill display type: heart rating, star rating or list of tags
For Heart & Star ratings fill the rating field : separate score & total with a slash. ie: 4/5 or 7/10
For list of tags, fill the List of skills field, coma separated. ie: blue,yellow,red or dog,cat,bird

You can have up to 5 skills group
Just select the skill group for each line
Keeping the None value won't display anything

This is a Skills 1 widget.

9) o Slider

First, create some slides in the slides menu.

Set the slide title
You can add a legent in the Excerpt field
Set the slide image in the featured image box
You can add a slide category
You can add a slide link

Set the kind of legend that you want: none, title or title + description
Set the legend position: inside or outside
Set the legend color scheme: light or dark
Set if you want to display the link icon and the zoom icon
Define a slider height
Set if the slider is fullwidth or not
Enable/disable autoplay
Set the timeout (if autoplay is turned on)
Select the slides (see o Focus for more info)

This is a slider widget.

10) o Social

Fill the info for each of your social media network

This is a Social Media widget.

11) o Testimonials

First, create some testimonials in the testimonials menu.

Set a the person name as the title
Set the testimonial in the excerpt field
Add an image for the person who speeks
Set who this person is
You can set a Testimonials category (the widget will let you select a Testimonials category to know which Testimonial to display)

Select how many Testimonials to display in the caroussel
Select the testimonials category

This is a testimonial widget.

12) o Timeline

First, create some timeline items in the timeline menu.

Set a title
Set the timeline item description in the editor (avoid using special things like shortcodes, images…)
Fill the timeline options
You can set a Timeline category (the widget will let you select a Timeline category to know which Timelines to display)

Select how many Timeline items to display in the widget
Select the Timeline category
Set the sorting Method
Set the widget style: Box or column

This is a Timeline widget Box Style.

This is a Timeline widget Column Style.

13) o Mobi nav

This widget let you create a navigation menu for the One Page template. It looks like a Mobile nav.

First of all, you need to create a menu in the appearance / menu

Add every menu entry from the Custom Links window
for the url, use the id of the widget and type the # symbole just before
When logged in as admin, the ID is displayed at the top left corner of widget. Just copy and paste it in the field.
In the Label field, type the name of the menu.
If you want an icon, then type it like this: Menu Name
You can find the icon name link you do for the widget icons or link buttons icons
Then click "Add to menu"

To add the scroll effect, you must add the "scroller CSS class to the menu item"
Don't forget to save your menu !!

Add the widget to the sidebar
Set the navigation title
Select the just created menu and that's it. The navigation will be created.

This is the navigation for the One page template

14) o Blog : show your latest posts

Just after adding the widget, save to acess to the widget options

Set the number of columns

Content selection: select from three options:

Automatic From category: it will display last posts from selected category, portfolio category or slide category.
Mmnual Selection: you select a list of posts, pages, slides or portfolio items
List of Ids: you can mix everything. just write the content ids coma separated.

Show / hide metas
Show / hide excerpts
Show / hide read more button

Link: will show the Link Icon when hovering the slide
Zoom: will show the zoom icon when hovering the slide. It will then open in a lightbox

Thumbnails Format: Select the picture format: Square, normal rectangle, wide rectangle, vertical rectangle.
Thumbnails Style: You can have normal angles, rounded angles or Circular format (better when using square format).

This is a Blog Widget

15) o Map : show a google map

Just select the map that you want to display.
Maps are created from the maps menu in the admin. For more info, please see the Chow to set a Contact page, as the fields are exactly the same.

This is a Blog Widget

16) o Revolution Slider : add your revolution slider in a widget

Just select the map that you want to display.
Maps are created from the maps menu in the admin. For more info, please see the Chow to set a Contact page, as the fields are exactly the same.

This is a Revolution Slider Widget

17) o Text & o Spash widgets

o Splash widget admin

o Text widget admin

Those widgets are very similar: You can have a title, some text, a button and a background image.

The title and text elements can be styled in order to let you choose the color when displayed on a picture.

This is a Splash widget

This is a Text widget

18) o Slider

o Slider widget admin

In information display, choose what will be displayed in the slider: image only, image and title and image, title and description
Select if the legend will be displayed inside or outside of the image
Select a color scheme for the lengend (if you selected to display it inside the picture)
You can activate / deactivate link & zoom on image hover
Set the slider height
Tick fullwidth if you wnt the slider to be fullwidth, else it will fit in the content area
You can have the slider with autoplay and you can set the number of seconds between 2 slides

Regarding the slides, you can use 3 different type of content: Slides, Posts & portfolio (+ page if you use manual or list of ids as selection type)
It will take the featured image as image, the title and the excerpt as description.

If you selected automatic, then it will display the X last items from the selected category & content type
If you selected manual, then you can pick the Posts, Slides, Portfolio or Even pages to display in the slider
If you select list of Ids, you can mix the content type. just type the Post, Page, Portfolio or Slide Id and it will display them in the desired order.

This is a Slider widget

19) o Main Navigation

o Main Navigation widget admin

Select the navigation to use in the widget

Hide the main navigation for the widget use

20) o Domino

o Domino widget admin

Select an image for your widget
Select the image format & style
Position your image (left or right)
Select the image size regarding the text.
That's it!

These are some Domino widgets examples

21) o Team

The Team widget will display Team members which are created from the Team members menu.

the title will be the name of the team member
You can set a position / role in the company
You can have a description
If you fill the link, then the picture and the name will be clickable
Set the different Email & Social networks options following the guidelines
Add the member picture using the Featured Image box
You can set the order by filling the order field in the Attributes metabox. Member with order 1 will be diplayed before memer with order 2.
You cann add a team category which will be available in the widget to select members.

o Team widget admin

Select the team category to get members who belong to this category
Select the widget view : Gri or Carousel
Then you can set some options for the grid view : thumbnails format & style, number of columns & text alignement for members info.

Carousel view

grid view with vertical thumbnails and left align text.

22) o Pricing Tables

The Pricing tables Widget will display Pricing tables which are created from the Pricing tables menu.

the title will be Table title (header)
The table type let you select between Content table ( a normal table) & Menu table. use the menu table if you want to create tables with a table menu before them to show features. You can then have Content tables with just checked rows to show that the feature is included…
You can set pricing values for price, currency, set the currency position, and add som price additional information. if you want, you can add a line break before the info (after the price) by adding in the field before your text.
Then, fill the content lines. Empy lines won't be displayed. If you want to have a line without text inside, type   It will be replaced by a non breakable space after saving and an empty line will be displayed.
You can have a button after the table: set the text, the link and the target.
Style your table by selecting a color scheme, a button color scheme and you can even feature a table. Don't feature a table when using the menu, else the lines won't be aligned. Featuring works best if only one table is featured.
You cann then add a Pricing tables category which will be available in the widget to select which tables to display..
Set the table order to order tables in the way you want. Table with order 1 will be displayed before table with order 2.

o Pricing Tables widget admin

If you are using tables with a menu, make sure that the menu has order 0 or 1 as it must be displayed before the other tables… Then, you will need to tick the box as this will activate a script to make your tables content aligned For an easier reading of values.
The tables can have rounded corners.
And select where the tables come from by selecting a Pricing tables Category.

Pricing tables with a menu

Pricing tables without menu, but with a featured table in the middle.

23) o Call To action

o Pricing Tables widget admin

Set the Title and it's size
Set the text and its size and alignement options
Add the button text link & target, then fill the options : button size, alignement, position in the widget and color.

Call to action widget examples

24) o Snippets

The Snippets Widget will display Snippets which are created from the Snippets tables menu.
Snippets are just content like page or post with an editor. The content of the snippet will be injected into the widget after being selected. The title is only here to help you to select which snippet you want to display as it won't be displayed in the widget

o Snippets widget admin

The title works as in every widget
The text field can embed some HTML. It can although be used to throw simple shortcodes. more complex shortcodes should be done via the snippet as it will make sur to display it as if it was created in a page or in a post.
You can select to align the text on the left if you want a better readability if you have long text.
Then select the snippet from the snippets list.

H) Setting up a Scrolling Navigation - top

If you create a one page website, you may need a scroll navigation : links in the navigation will scroll to the desired content.
This section will explain you how to achieve this.

1) Create a menu

Go to the appearance / menus in wordpress admin and crate a new menu

2) Add menu elements

Use the custom links to create entries

In the Label field, type the link name as you want it to appear in your website navigation
In the URL field, paste the ID of the section where you want the menu to scroll to
You can see the menu ID when visiting your website and beeing logged in: this is the text starting with a #

Section ID

When done, click on the Add to menu button
If you leave the link like this, it will jump directly to the desired section

3) Add the scrolling CSS class

In the CSS Class field, just type scroller, this will enable the scrolling effect

If you can't see this field, then you must first enable it from the screen options at the top right of the screen.

In the Label field, type the link name as you want it to appear in your website navigation
In the URL field, paste the ID of the section where you want the menu to scroll to
You can see the menu ID when visiting your website and beeing logged in: this is the text starting with a #

4) Mixing Scrolling Links and normal links

Sometimes you will need to mix scrolling links and normal links -> imagine that you have a one page website which includes a blog or portfolio section. You can use the blog or focus widget to display your posts & portfolio items but if the visitor go to the detailed page of a blog post or in a category or tag page, then your scrolling links won't work anymore as they are intended to work in a dedicated page: the one page template page.

Don't worry! we have a solution for that!

You will need to get the page ID of the page with the One Page template activated. to do so, just edit that page and look a the browser address bar, you will see the page ID

Select Quote text

Click the Quote icon

Set the Quote text, the author and a link if needed, then click Insert.

Your Shortcode is there!

The final result

6) Highlight

Select text to Highlight

Click the Highlight icon

Set the Highlight text, select a color, then click Insert.

Your Shortcode is there!

The final result

7) Code

Select text to Code

Click the Code icon

Your Shortcode is there!

The final result

8) Toggle

Select text to Toggle

Click the Toggle icon

Set the Toggle text, title and color, then click Insert.

Your Shortcode is there!

The final result : a toggle

9) Tabs

Tabs will be created from 2 different shortcodes, that's why there are 2 icons for tabs:
One to create a tab and another one to wrap it all and add the tabs titles.

Select text for the first tab

Click the Tab icon

The first tab shortcode is done

Repeat this operation as many times as needed, then select all tab content.

Click the Tab Wrapper icon

Set the Tabs Titles separated by a pipe: |, then click Insert.

The Final shortcode

The final result!

10) Accordions

Accordions will be created from 2 different shortcodes, that's why there are 2 icons for accordions:
One to create an accordeon content with its title and another one to wrap it all.

Select text for the first Accordion

Click the Accordion icon

Set the Accordion Text, color and Title , then click Insert.

The first Accordion shortcode is done

Repeat this operation as many times as needed then select all Accordions

Click the Accordion Wrapper icon

The Final shortcode

The final result!

11) Videos

Select your Video URL

Click the Video icon

Your Shortcode is there!

The final result. it although works with Dailymotion & Vimeo.

12) Columns

Since 1.5, you can create column contents by using shortcodes.

Prepare your columns. Here we will create a row with 3 columns of one third width.

Select the content of the first column and click the Add column button

In the popup, choose the size of the column. Make sure tht your row has a total of 1 :D
Then click the insert button

Your content will be wrapped bu the shortcode

Repeat the operation with the 2 other columns and then select them all anc click the row button

They will be wrapped with the row shortcode.

Here is the final result.

J) - Create a background image or a Service Icon from Glyphicon Font

You can create any Icon background using the glyphicons font included in this template.

The font is located in the fonts directory. Install it (glyphicons-regular.ttf) on your computer, then open the background-icon.psd

Hide the help folder
Change the text value of the icon in the "Text Icon using Glyphicon Font" named layer
This value can be found using Firebug
Hide the background layout
Save as transparent PNG

I personally use these settings:

in .coffee-container: alpha opacity of the font layer = 20%
in .cream-container & .sugar-container : alpha opacity of the font layer = 10%

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

OCHOLABS

Go To Table of Contents