P. 1
Caffeine Documentation

Caffeine Documentation

|Views: 4|Likes:
Published by Gavin_McLellan_5129
Caffeine Documentation
Caffeine Documentation

More info:

Published by: Gavin_McLellan_5129 on Apr 11, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/10/2014

pdf

text

original

Sections

  • 1. General info & Installation
  • 1.1 Few words on start
  • 1.2 Package from themeforest
  • 1.3 How to install & update it?
  • 2. Page creation
  • 2.1 Getting started
  • 2.2. Content Builder
  • 2.3 Page Templates
  • 3. Slider options
  • 3.1 How to set it up?
  • 3.2 What options are available?
  • 4. Theme options panel
  • 4.1 Getting started
  • 4.1.1 General
  • 4.1.2 Slider
  • 4.1.3 Sidebars
  • 4.1.4 Blog
  • 4.1.5 Portfolio
  • 4.2 Layout
  • 4.2.1. Header
  • 4.2.2. Logo & favicon
  • 4.2.3 Social Icons
  • 4.2.4. Footer
  • 4.2.5. Custom CSS
  • 4.3 Colors
  • 4.3.1. General
  • 4.3.2 Header
  • 4.3.3 Main menu
  • 4.3.4 Title area
  • 4.3.5 Content
  • 4.3.6 Footer
  • 4.3.7 Slider
  • 4.3.8 Headings
  • 4.3.9 Forms
  • 4.3.10 Tables & Tabs
  • 4.3.11 Widgets
  • 4.4 Fonts
  • 4.4.1 Font Family
  • 4.4.2 Content Font Size
  • 4.4.3 Slider Font Size
  • 4.4.4 Headings Font Size
  • 4.5 Translate
  • 4.5.1 General
  • 4.5.2 Blog & Portfolio
  • 4.5.3 Error 404
  • 4.5.4 Contact form
  • 5. Shortcodes
  • 5.1 Adding shortcodes in content using wp-editor
  • 5.2 List of available shortcodes & how to use them
  • 6. Blog
  • 7. Portfolio
  • 8. Menu creation
  • 9. Images
  • 10. SEO
  • 11. Support & contact with us
  • 12. XML file with demo content
  • 13. Advanced theme customization
  • 13.1. Google Chrome
  • 13.2. Firebug for Firefox

Responsive wordpress theme

A how-to guide and helpful informations about configuration and options in theme.
If you have any questions or problems with this theme please use Envato Marketplace contact form on our profile.

Muffin group 2012
1

Table of contents:
1. General info & Installation........................................................................................................ 4 1.1 Few words on start ............................................................................................................................. 4 1.2 Package from themeforest ............................................................................................................... 4 1.3 How to install & update it?............................................................................................................... 4 2. Page creation ................................................................................................................................. 6 2.1 Getting started ...................................................................................................................................... 6 2.2. Content Builder ................................................................................................................................... 7 2.3 Page Templates ................................................................................................................................ 27 3. Slider options ............................................................................................................................. 29 3.1 How to set it up? ............................................................................................................................... 29 3.2 What options are available? ......................................................................................................... 29 4. Theme options panel ............................................................................................................... 30 4.1 Getting started ................................................................................................................................... 30 4.1.1 General ......................................................................................................................................... 30 4.1.2 Slider ............................................................................................................................................. 30 4.1.3 Sidebars ....................................................................................................................................... 31 4.1.4 Blog ................................................................................................................................................ 32 4.1.5 Portfolio ....................................................................................................................................... 33 4.2 Layout ................................................................................................................................................... 33 4.2.1. Header ......................................................................................................................................... 34 4.2.2. Logo & favicon .......................................................................................................................... 35 4.2.3 Social Icons ................................................................................................................................. 36 4.2.4. Footer........................................................................................................................................... 37 4.2.5. Custom CSS ................................................................................................................................ 38 4.3 Colors .................................................................................................................................................... 38 4.3.1. General ........................................................................................................................................ 39 4.3.2 Header .......................................................................................................................................... 40 4.3.3 Main menu .................................................................................................................................. 41 4.3.4 Title area...................................................................................................................................... 42 4.3.5 Content ......................................................................................................................................... 43 4.3.6 Footer ........................................................................................................................................... 44 4.3.7 Slider ............................................................................................................................................. 45 4.3.8 Headings ...................................................................................................................................... 46 4.3.9 Forms ............................................................................................................................................ 47 4.3.10 Tables & Tabs .......................................................................................................................... 48 4.3.11 Widgets ...................................................................................................................................... 49 4.4 Fonts ...................................................................................................................................................... 49 4.4.1 Font Family ................................................................................................................................. 50 4.4.2 Content Font Size ..................................................................................................................... 51 4.4.3 Slider Font Size ......................................................................................................................... 52 4.4.4 Headings Font Size .................................................................................................................. 53 4.5 Translate .............................................................................................................................................. 54 4.5.1 General ......................................................................................................................................... 54 4.5.2 Blog & Portfolio ......................................................................................................................... 55 4.5.3 Error 404 ..................................................................................................................................... 56 4.5.4 Contact form............................................................................................................................... 56 2

5. Shortcodes ................................................................................................................................... 57 5.1 Adding shortcodes in content using wp-editor .................................................................... 57 5.2 List of available shortcodes & how to use them ................................................................... 57 6. Blog ................................................................................................................................................ 67 7. Portfolio........................................................................................................................................ 68 8. Menu creation ............................................................................................................................ 69 9. Images ........................................................................................................................................... 69 10. SEO ............................................................................................................................................... 69 11. Support & contact with us ................................................................................................... 70 12. XML file with demo content ................................................................................................ 70 13. Advanced theme customization ........................................................................................ 72 13.1. Google Chrome ............................................................................................................................... 72 13.2. Firebug for Firefox........................................................................................................................ 73

3

In the package you can find you can find things like documentation. Please unpack the whole package after downloading it from Themeforest. select zipped theme folder called "caffeine. 2. 4 . psd files.2 Package from themeforest At first. The wordpress will do the rest for you.3 How to install & update it? At first please make sure that you have unpacked the whole package shown in the last point. license.upload non-zipped theme folder called caffeine to /wpcontent/themes/ folder in your WordPress installation folder on your server. General info & Installation 1. Here you will find things like content builder. FTP upload .zip" and press Install Now button. 1.plase go to Appearance > Themes > Install Themes > Upload.1. WordPress Theme Manager . Be sure that with our new theme you can easily customize whatever you want on your page. All you need to do that is move your mouse over your login name in right top corner (of course after you`re logged in Themeforest) and then click Download. Here you will find all the items that you have purchased. It looks exactly just as the diagram below: In the next step click the Download button next to Caffeine theme and save package on your computer. Please also note that all this options are amazingly easy to use. zipped file with theme files and folder with theme files called Caffeine. 1. after purchasing this theme please download the package from Themeforest. This is very important! You can complete instalation in two different ways: 1. shortcodes or detailed theme options panel.1 Few words on start Our new theme called "Caffeine" is especially delivered for all those who prefer to manage all elements on the page.

5 . If you have made changes and you don`t want to lose them. If you haven`t changed any theme files.In the second part of this quide we have described how to update Caffeine. ex. all you need to do is update your version of theme by downloading the latest package from themeforest. unpacking files and uploading new files on the server while replacing the old files. Beyond Compare (we are not the authors of this tool so please don`t ask us how to use it. Answears to how to use it can be found on their website). the best way is to use one of freeware tools for comparing files. All your data in the database are safe because after updating theme files doesn`t change anything in the database. After comparing these files you can upload on server only the file that hasn`t been changed. Please make sure that you didn`t make any changes in the files. Please however always make a backup of your files & database. Simply overwrite them.

 Show the content . Beyond the default options we included green button called "Insert shortcode". If you`re using Content Builder for building content please turn this button off. Please note that you can build page based not only on shortcodes. the content from Wordpress editor will show above the Content Builder items. Page creation Creating your own page has been never so easy. But when you have a look under Visual/HTML area you will see some Page options. If you won`t turn it off. You can also use Content Builder (section 2. With this option you can build any page you want based on shortcodes. All available shortcodes for this theme has been described in section Shortcodes (section 5).1 Getting started In first Visual/HTML area you can build your page using all available options in editor.this options will show the content from Wordpress editor. 2. Below the Content Builder you can find some Page Options.2.2). You can turn this button on or off. To make the first step please go to Pages > Add new. On first sight everything looks just like in default wordpress. 6 .

title for page (if you leave this field empty. You can create your own sidebars in Appearance > Caffeine > Getting started > Sidebars.3) for this site. There is 3 options to choose: full width without sidebar. You can delete Item if you don`t need it by ˟ in right Item corner.2. left sidebar or right sidebar. Afterward select one of the items please click Add item button. Please remember that Content Builer is working only with Default template and Homepage template. page will get default settings from Theme options panel > Getting started > General)    After set up all this options on right side you can choose right Page Template (section 2. You can do few things with this added Item. You can also move any Item by drag & drop. The same way you can shorten this Item using "-" button. SEO Title . 2/3. You can edit each Item by click on "pencil" in right bottom corner in the Item. After that you will see the right Item already added below.here you can select proper sidebar for this page (of course if in the previous option you have selected right or left sidebar).  Layout . At first please choose an item that you need on page.     Expand Item to 1/4.you can choose personal layout for each page. page will get default settings from Theme options panel > Getting started > General) SEO Description . Sidebar . 1/1 by using "+" button in the Item. 2. 3/4. page will get default settings from Theme options panel > Getting started > General) SEO Keywords . Content Builder What about Content Builder? With his help web development is child's play. 1/2. 1/3. 7 .keywords for page (if you leave this field empty.description for page (if you leave this field empty. Please note that not all Items working with all sizes.

You can choose one below items: a) Accordion This Item is adding Vertical tabs on page. '1/1' Attributes: this item similar to Tabs Item doesn`t have attributes like other Items. Instead of you can add new tabs by clicking "Add tab" and delete them by clicking ˟. '2/3'. '1/2'. Available sizes: '1/4'. You can add as many tabs as you need. '1/3'. '3/4'. just type Title and Content for each tab. Preview: 8 .

Warning (orange color) and Error (red color).b) Alert This Item can create 4 kinds of alerts: Information (blue color). '1/3'. '2/3'. '3/4'. '1/1' Attributes:   Text (text for alert shortcode) Style (select the right style for your alert shortcode) Preview: 9 . '1/2'. Success (green color). Available sizes: '1/4'.

c) Blockquote This Item is creating "Blockquote" box on your page. '1/1' Attributes:     Content (text your own content for blockquote Item. Here you can use html tags) Author (text author of this blockquote) Link title (link title) Link (link) Preview: 10 . '3/4'. Available sizes: '1/4'. '1/2'. '2/3'. '1/3'.

Please note that you need first add new clients into Clients > Add New. '1/1' Attributes:  Open in new window (you can select yes or no) Preview: 11 .d) Clients This item is very useful option for embedding list of clients into page. Available sizes: '1/4'. '1/2'. '3/4'. '2/3'. '1/3'.

'3/4'. '1/2'. '1/1' Attributes:  Content (add your own code here) Preview: f) Column 12 .e) Code This Item can be used for present code. Available sizes: '1/4'. '2/3'. Also it convert all html tags into html special chars. '1/3'.

Please also remember to turn off "Show The Content" option. '1/2'. '1/1' 13 . '1/3'. feel free to use here html tags and shortcodes) Preview: g) Content Adding this item will show Content from Wordpress Editor above Page Options. Think about what you want to be here and just do it. Available sizes: '1/4'. '2/3'. '1/3'.This Item is creating your own column. '2/3'. You can use it only once time per page. '1/1' Attributes:  Column content (this is the only attribute for this Item. '3/4'. Available sizes: '1/4'. '3/4'. '1/2'.

It is also aligning for a single line.h) Divider This item is creating space between elements. boxes located underneath. Available sizes: '1/1' Attributes:   Divider height (enter the amount of the divider height) Show line (choose if you want to show horizontal line as a divider) 14 .

etc. Available sizes: '1/4'.i) Feature box Box with image. '1/1' Attributes:      Image (select featured image) Title (will be also used as the alternative text for image) Content (html tags are allowed in this area) Link title (it will appear only if this field is filled) Link (it will appear only if this field is filled) 15 . '1/3'. '2/3'. It can be used for presentations offer. short text and link to right page. '3/4'. '1/2'.

 Open in new window (choose if you want to open feature box in new window or not) Preview: 16 .

'1/2'. '3/4'. '1/1' Attributes:    Image (here you can choose your own image) Alternate text (alt text for image) Caption (short text under image) 17 . '1/3'. '2/3'.j) Image This item is very useful option for embedding images into page. Available sizes: '1/4'.

'3/4'. '1/2'. you can type your own link for this image) Preview: k) Latest posts This Item will show latest posts. '1/3'. '1/1' Attributes:   Title (title for latest posts box) Number of posts (type number of posts that you would like to show in this box) 18 . '2/3'. Available sizes: '1/4'. You can choose how many posts you want to show.  Zoomed image (here you can choose your image to be opened after click) Link (if you don`t want to open image after click.

Preview: 19 .

l) Portfolio This item is used to display works from the portfolio. '1/1' Attributes:     Title (portfolio title) Layout (choose one of two available portfolio layouts) Description (portfolio description. Available sizes: '1/4'. '1/2'. Compact . link title will appear only if this field is filled) 20 . here you can use html tags) Link title (Read more link title.containing only items without description. This item occurs in two layouts: Standard . '3/4'. You can select a category and sorting.containing a description instead of the first item.

    Link (Read more link. link will appear only if this field is filled) Category (select the portfolio post category) Order by (choose how portfolio should be ordered by) Order (choose if you want to order ASC or DESC) Standard preview: Compract preview: 21 .

'1/1' Attributes:       Title (pricing item title) Price (enter your price) Currency (enter your currency) Period (enter item period) Content (enter item content) Link title (enter link title. '1/2'. '1/3'. this link title will appear only if this field is filled) 22 .m) Pricing item This Item will create amazing Pricing Table for you. Available sizes: '1/4'. '3/4'. '2/3'.

'1/2'. this link will appear only if this field is filled) Featured (choose if you want to make this item featured or not) Preview: n) Recent comments This Item will create box with Recent Comments. '1/1' Attributes:   Title (recent comments title) Number od comments (number of comments to show) 23 . You can choose how many comments you want to show in this box. '1/3'.  Link (enter link. Available sizes: '1/4'. '2/3'. '3/4'.

Preview: o) Tabs 24 .

'3/4'. '1/2'. '1/1' Attributes: 25 . Available sizes: '1/4'. '2/3'. '1/3'. You can add as many tabs as you need. '2/3'. '1/2'. '1/3'. '3/4'. Available sizes: '1/4'. You can add as many tabs as you want. '1/1' Add your own tabs by clicking "Add tab" button. Attributes:   Title (tabs title) Content (tabs content) Preview: p) Testimonial This Item will create slider with quotes and opinions.This Item will create Tabs.

vimeo video`s ID. for example: http://vimeo.    Title (testimonial title) Category (select the testimonial post category) Order by (choose how testimonials should be ordered by) Order (choose if you want to order ASC or DESC) Preview: r) Vimeo This item is very useful option for embedding vimeo videos into page. '3/4'. Available sizes: '1/4'.com/19819283 26 . '1/1' Attributes:  Vimeo video ID . '1/3'. This value is placed at the end of every vimeo video after last "/". '1/2'. '2/3'.

player`s width. '3/4'. 700 is highly recommended for left or right sidebar template while 950 for a default one. which can be used on Pages. Latest Posts. 700 is highly recommended for left or right sidebar template while 950 for a default one.youtube.com/watch?v=YE7VzlLtp-4  width .  Height . Archives This template can automatically create list.video player`s height 2. which we can configure in Theme Options) and Google Map (coordinates we can configure also in Theme Options). Of course template can contain any content too. adding them special features. Archives by Subjects and Archives by Months. This value is placed at the end of every video after "v=" parameter.3 Page Templates Template has several specially designed Page Templates. 27 . Contact page Special template for the contact page. for example: http://www. '1/2'.player`s width.video player`s height s) Youtube This item is very useful option for embedding youtube videos into page. contains a built-in contact form (e-mail address for this contact form. '1/1' Attributes:  YouTube video ID . Width .youtube video`s ID. Available sizes: '1/4'. '2/3'. '1/3'. that contain Available Pages.  height .

Portfolio This template let you to add Portfolio for website. can contain Offer Slider. Photo Slider. Header Image or Slogan. In addition. You can see these entries in section Portfolio > Portfolio.Homepage Template that is made specially for Homepage. 28 . as any other pages can be filled with content based on shortcodes.

call to action text above the title of slide Text . 3.1 How to set it up? If you want to add new slide into your theme please go to Slides > Add new. We will explain each of them step by step: .1.link for the button (button will appear only if this field is not empty) You also need to set featured image that can be set up on the right side. After that just click "Publish" button. 3. For more info about slider options please go to Appearance > Caffeine > Getting started > Slider (section 4. Remember that you can add as many slides as you want.3.text content on slide Button text .1) 29 . As you can see there are a lot of options. You can do it in just few minutes. To do it please go to Theme options > Getting started > Slider.text on the button (button will appear only if this field is not empty) Button link .The first input is the main (largest) text for slide Below this large input there are Slide Options:     Slogan . Slider options Creating and managing a slider is really easy.2 What options are available? You can set up some options for slider to adjust it to your needs.

etc.1 General In this section you can set up some general options for your site. ex.if you are using external SEO plugin you can easily turn off built-in SEO option. 4.2 Slider 30 . Google Maps.Google maps pointer position.paste your Google Analytics code to track your site. will be used in Contact Form. Using it is very easy and in just a few minutes you can change a lot of things on your page.2039". 151. Theme options panel Theme options panel has been especially created to make your work faster and easier. Lng .1.this is meta keywords for homepage but it`s also default keywords for each page added in Pages section. Please check below options available in this section:       Contact E-mail . you put here.the email address.8710. Use built-in SEO fields . Google Maps Lat. You can find here things like Google Analytics. 4. You need to separate with comma. "-33. Meta Description .1 Getting started 4.1.4.this is meta description for homepage but it`s also default description for each page added in Pages section. Google Analytics . Meta Keywords .

You can set below options:  Slider Type . Without that you will lose all your changes.time in miliseconds between the slides transition (this option works only with autoplay) Please always remember to click "Save Changes" button. this is only default option and while creating page or post you can set up your own layout.3 Sidebars This is default option for pages and posts. Of course.  Autoplay .here you can choose one of three types (offer slider or photo slider)  Show Pager . This option works only with offer slider and photo slider option. For example when you choose Left sidebar each of your pages or post that you will create will have left sidebar. You can add new and delete existing one.1.autoplay between the slides (this option works only when timeout is greather that 0)  Pause on click .show pager under the slider. Here you can set whether your post or page should have full width or maybe include a sidebar (left or right).pause slider on pager click (this option works only with autoplay)  Timeout . You can also manage your Sidebars here. 31 . 4.

All of this options except Posts per page and Read more can be changed for each post. Without that you will lose all your changes. 32 . You have got the following options for blog:  Posts per page .this option will show categories on posts list and single post when it is on.  Show date . Please always remember to click "Save Changes" button.  Show comments .this option will show date on posts list and single post when it is on.here you can set up your own text for read more button.1. This is of course a default option for new pages.Please always remember to click "Save Changes" button. 4.this option will show comments number on posts list and single post when it is on.  Show categories .  Social network sharing .  Show tags . Without that you will lose all your changes.this option will show social network sharing on single post when it is on.you can select how many posts should be on page.4 Blog Here you can find some options for blog page.  Read more . When input is empty the text will not be show.this option will show tags on posts list and single post when it is on.

three or four colums) Portfolio page .this is a link to single item. 33 . After changing that option please go to "Settings > Permalinks" and click "Save changes" button.1.5 Portfolio This option will certainly be very helpful in creating your portfolio page.4. sidebar and link to page in breadcrumbs. two.you can choose what layout will be the best for your portfolio (one.here you can select the right page for portfolio from list of all created pages. 4.you can select what should be used to sort your portfolio.this is the number of portfolio posts per page. Order by . Please always remember to click "Save Changes" button. Single item slug . You need to choose a page for that because the theme applies info such a layout. Layout . Without that you will lose all your changes.2 Layout In this section you can set up some layout options such as social icons or logo.you can choose how your portfolio should be ordered (ascending or descending). Here you can set the following options:       Posts per page . Order .

4.2.1. Header

This section is created for header. Here you can set up some options like:  Header hight - you can set up here hight for your header bar (header is white section where you have things like logo, social icons, top menu and search form).  Top Header Bar height - this is height for grey bar above the logo.  Search form - you can turn on/off search form in header. Please always remember to click "Save Changes" button. Without that you will lose all your changes.

34

4.2.2. Logo & favicon

With the help of these options you can easily set up your logo and favicon.     Custom logo - here all you need to do is just upload the image for your logo Logo position Top - position for the logo from the top of the site Logo position Left - position for the logo from the left of the site Custom Favicon - you can upload here your favicon (only ICO format can be used here)

Please always remember to click "Save Changes" button. Without that you will lose all your changes.

35

4.2.3 Social Icons

Here you can set up some options for social icons. Below we will describe all of them.           Facebook - link to your facebook profile Twitter - link to your twitter profile Vimeo - link to your vimeo profile Google + - link to your Google + profile YouTube - link to your youtube profile Flickr - link to your flickr profile LinkedIn - link to your LinkedIn profile Dribbble - link to your Dribbble profile Pinterest - link to your Pinterest profile RSS - you can turn on/off your rss icon

If you leave empty field for social icons like facebook, twitter etc. the icons will be not shown on the page. Please always remember to click "Save Changes" button. Without that you will lose all your changes.

36

choose the right page for clients page.4.2.4.  Call To Action Button text . Please always remember to click "Save Changes" button. This button will appear only if this field is filled.  Show clients slider . Footer Whatever you want change in footer section.copyright text in the footer area. 37 .  Copyright Text . Call To Action bar will appear only if this field is filled.you can easily turn on/off clients slider just above the footer. you can do it here. You can delete all informations about author but we would appreciate it if you decide to leave them.write kindly text for Call To Action area.  Clients Page .  Call To Action Button Link . Without that you will lose all your changes.link for Call To Action button.text for Call To Action button.  Call To Action text .

Just check how many options you can set up in our color section. 38 .5. You can paste here your own css code for your page. Custom CSS Here you can find only one field called "Custom CSS". 4. Here you can set up any color for each part of your page.2. Of a this field you don`t need to make any changes in css files. Without that you will lose all your changes. Please always remember to click "Save Changes" button.4.3 Colors This is probably the most powerful options section in theme options panel.

Please remeber that color options can be used only with the Custom Skin.3. Without that you will lose all your changes.  Theme skin . 39 .1.  Social Icon color .here you can choose one of two available options (dark or light type for your social icons). General Only two options available in this section. Please always remember to click "Save Changes" button.4. Remember that this is also icons hover color for portfolio.here you can choose one of the predefined styles or you can set your own colors.

4.  Hover Social Icon & Form Button border .  Social Icon & Form Button border .this is hover color for the social icons and form buttons background.  Hover Social Icon & Form Button background . above the logo.  Header background .3.2 Header  Top Header Bar color . Please always remember to click "Save Changes" button. but also this is border color for pager buttons and hover buttons in portfolio. but also this is border color for pager buttons and hover buttons in portfolio. 40 .this is color for the social icon and form button background. but also this is hover color for pager buttons and hover buttons in portfolio.this is color for grey bar at the top of the page.color for the header background  Social Icon & Form Button background .this is border color for the social icons and form buttons background. Without that you will lose all your changes.this is border color for the social icons and form buttons. but also this is pager buttons and hover buttons color for portfolio.

41 .3.border color for submenu Please always remember to click "Save Changes" button.4.active color for links in menu (this is also color for hover when there is no submenu)  Submenu Link color .color for submenu background  Submenu border color .hover color for submenu links  Submenu background .3 Main menu  Menu Link color .color for submenu links  Hover Submenu Link color . Without that you will lose all your changes.color for links in menu  Active Menu Link color .

3.bacground color for title area Please always remember to click "Save Changes" button.4 Title area  Title Area background . Without that you will lose all your changes.4. 42 .

4.background color for buttons Button text color .background color for dark gray circles like slider controls. etc. post date. Dark Circle border . post category.background color for content page Error 404 background . etc. ex.border color for dark gray circles like slider controls.text color for grey note. Dark Circle text color . Without that you will lose all your changes.3. 43 . etc.text color for buttons Please always remember to click "Save Changes" button.text color for links Hoover Link color .text color for content Link color . etc.5 Content             Content background .text color for dark gray circles like slider controls.general borders color Dark Circle background . Button background . number of comments.hover color for links Grey Note text color . Borders color . number of comments. number of comments.background color for Error 404 page Text color .

links color for footer Hover Footer Link color .heading color for footer Footer text color .text color for footer Footer Link color .background color for footer Footer heading color .border color for footer Copyrights Area background .6 Footer         Footer background .hover links color for footer Footer border color . 44 .text color for copyright area Please always remember to click "Save Changes" button.3.background color for copyright area Copyrights Area text color .4. Without that you will lose all your changes.

border color for active pager in offer slider Please always remember to click "Save Changes" button.3.background color for slider area Slider Slogan color .slogan color in slider (first few words in default red color) Slider Title color .text color in slider (few words under the title in default light grey color)  Offer Slider Active Pager border . Without that you will lose all your changes.title color in slider (the largest words) Slider Text color .4. 45 .7 Slider     Slider background .

46 .text color for h5 Heading H6 color .text color for h2 Heading H3 color .text color for h3 Heading H4 color .text color for h1 (Subpages header title font color) Heading H2 color .text color for h6 Please always remember to click "Save Changes" button.3. Without that you will lose all your changes.8 Headings       Heading H1 color .4.text color for h4 Heading H5 color .

background color for hover form buttons  Hover Form Button border .text color for inputs. select & textarea shadow . select & textarea border .3.9 Forms  Input.text color for form buttons  Form Button text shadow . selects and textareas  Input.background color for inputs.border color for form buttons  Hover Form Button background .shadow color for inputs. 47 . selects and textareas  Input.4. selects and textareas  Form Button text color .border color for inputs.background color for form buttons  Form Button border . Without that you will lose all your changes.border color for hover form buttons Please always remember to click "Save Changes" button. select & textarea background . selects and textareas  Input. select & textarea text color .shadow color for form buttons  Form Button background .

3.text color for header in pricing tables  Featured Pricing Table Header background .background color for header in featured pricing table  Featured Pricing Table Header text color .4.10 Tables & Tabs  Table. tabs and accordions header  Table Even Rows background .background color for tables.background color for even rows in tables  Pricing Table Header background .text color for header in featured pricing table Please always remember to click "Save Changes" button. tabs and accordions header  Table. Without that you will lose all your changes. 48 . Tabs & Accordion Header text color .background color for header in pricing tables  Pricing Table Header text color . Tabs & Accordion Header background .text color for tables.

background color for clients area Call to action text color .border color for tag area Hover Tag background .color for active testimonial pager Clients background . We divided this section on four blocks what you can see below.background color for tag area Tag text color . 4.background color for hover tag area Hover Tag border .text color for tag area Tag border .3.11 Widgets            Featured Image border bottom . 49 .background color for call to action area Tag background .4 Fonts In this section you can set up fonts for your website.text color for call to action area Call To Action background . Without that you will lose all your changes.4.color for testimonial pager Active Testimonial Pager color .border color for hover tag area Please always remember to click "Save Changes" button.bottom border color for featured image Testimonial Pager color .

4. Multiple subsets should be separated with coma (.) You can choose your own font from a palette of over 500 fonts.this font will be used for header menu Headings Font . 50 .4.1 Font Family     Content Font .you can specify which subsets should be downloaded.this font will be used for all headings Google Font Subset .this font will be used for all theme texts except headings and menu Main Menu Font .

post category. 51 .4.this size will be used for form buttons Copyrights Area .grey note. ex. etc Form Button .2 Content Font Size      Content .this font will be used for header menu Grey Note .4. post date.this size will be used for copyright area but also this is "Back to top" link font size You can select the font size of the range 1-70.this font size will be used for all theme texts Main Menu .

font size for slider text Slider Pager Text .4.3 Slider Font Size In this section you can select font sizes for each part of slider.font size for slider pager text You can select the font size of the range 1-70.font size for slider slogan Slider Title .4. 52 .font size for slider title Slider Text . You can change the following value:     Slider Slogan .

h6. h3.4. like: h1. h2.4. h4. 53 . h5.4 Headings Font Size Here you can set up font size for each headings on your page.

here you can set up placeholder text for Header and Widget Search Search Button .5.po files you can do it easily in this section.4.mo/.you can turn it off if you want to use .mo and .here you can set up breadcrumbs text Home .5 Translate Translating the most important sections on the page has never been so easy. 4.here you can set up title area Back to top . If you don`t want to translate using .1 General It depends how you want translate your theme.here you can set up text for back to top action (footer area) 54 .        Enable Translate . Search Placeholder .po files for more complex translation.here you can set up button text for Header and Widget Search You are here .here you can set up breadcrumbs text Get in touch with us .

text available on single portfolio page Client .text available on portfolio page All .4.text available on blog page Tags .text available on portfolio page Category .text available on single portfolio page Visit online .              Next page .text available on single portfolio page 55 .2 Blog & Portfolio This is area where you can set up some texts for your portfolio and blog page.text available on single portfolio page Date .5.text available on single portfolio page Back to list .text available on single portfolio page Project URL .text available on blog page Project Description .text available on blog & single portfolio page Comments .text available on blog & portfolio page Select category .text available on blog & portfolio page Previous page .

5.      Send us a question .4 Contact form Translate the most important things in Contact Form.5.translate "Your e-mail" Subject .translate "Your name" Your e-mail .this is subtitle for error 404 page Text . You can set up here below options:     Title .3 Error 404 Now your Error 404 page is 100% configurable.this is text for button on error 404 page For each fields you can set up your own text. 4.4.translate "Send us a question" Your name .translate "Send message" 56 .translate "Subject" Send message .text message for error 404 page Button .this is title for error 404 page Subtitle .

Just click on green circle button with plus inside.we have made 4 kinds of alerts: Information (blue color). 5. Shortcodes As you know. To choose right alert for your theme just type exact style. After that you`ll see whole list of shortcodes.[/message] Preview: For more info and demo please go to alert shortcode demo 57 . 5. Warning (orange color) and Error (red color).5. Below you can see how each alert looks like: [message]Insert your information message content here.2 List of available shortcodes & how to use them 1) Alerts . shortcodes are really useful in creating pages. the shortcode will be inserted into editor. That`s the main reason why have created them.. Below you`ll learn how to use them in the "Caffeine" theme.[/message] [message style="error"]Insert your error message content here. After select right shortcode and click "Insert".[/message] [message style="warning"]Insert your warning message content here. and they accelerate your work. <a href="">Sample link</a>.1 Adding shortcodes in content using wp-editor You can use shortcodes directly in WP editor.[/message] [message style="success"]Insert your success message content here. There is a lot of them and they are easy to use. Success (green color).

"white" or hex ex. Attributes for buttons are:        link (link to other page) title (title for button) target (optional target for link. these are the buttons to use on pages. It is also aligning for a single line.type 1 if you want to show line.as name indicates.enter the amount of the divider height (in px) line .you can also use color name.you can use name of color. "#D33636") color (color for text ."#FFFFFF") text-shadow (optional text shadow color . ex. 0 if you don`t want Example of this shortcode below: [divider height="30" line="1"] 58 . "_blank") size (optional size of button . ex.2) Buttons . you can also choose "small" or "large") background (background color for button . "red" or hex ex. ex. "#DDDDDD") Below you can see the example of buttons shortcode: [button link="" title="Muffin group" background="crimson" color="#eee" text_shadow="#222"] Preview: For more info and demo please go to buttons shortcode demo 3) Divider . ex. ex."normal" is default.This item is creating space between elements. Divider shortcode has got 2 attributes:   height . boxes located underneath. "grey" or hex.as in background color you can use name of color.

This shortcode has got 2 attributes:   background (highlight color) . ex. "blue" or hex. ex. ex. "blue" or hex. ex. ex.you can use name color. "red" or hex.deafult has no atrributes but you can also choose "circle" attribute background (optional can be used only for circle type of dropcap) .4) Dropcaps .you can use name color.you can use name color. "blue" or hex. ex.here you can use name color.can be used for highlighting some text.you can use name color. "#D33636" Below you can see how the example looks like: 59 . "#D33636" text-shadow (optional color for text shadow) . "#D33636" color (text color) . ex. ex. ex. Dropcaps have got 4 attributes:     type (optional) .they are particularly useful when you want to style some text or letters. "#D33636" color (optional color for text) . "red" or hex. "#D33636" Below you can see some examples of dropcaps: [dropcap]S[/dropcap] [dropcap type="circle"]M[/dropcap] [dropcap type="circle" background="#D33636" color="#FFF" text_shadow="#962323"]D[/dropcap] [dropcap type="circle" background="#c6d0dd" color="#414a58" text_shadow="#e2e8f0"]D[/dropcap] Preview: For more info and demo please go to dropcaps shortcode demo 5) Highlights . ex.

center alt (optional) .[highlight background="#646566" color="#FFF"] malesuada ultricies curabitur et [/highlight] Preview: For more info and demo please go to highlights shortcode demo 6) Images frames .this is a very useful option for embedding images into page. This option has got a long list of available atrributes:           src (url to image) align (optional alignment for image) . available value: "_blank" (open in new window) width (optional) .link target.type of link can be choosen from 2 values available: zoom (default) .alternative text for image caption (optional) .open image specified by the link in lightbox details .link to the page/image target (optional.available values: none (default). right.text available under the image link_type (optional) . works only with "details" link_type) .image width height (optional) . left.image height Below you can see some examples of this shortcode: [image src="" link="" align="left" caption="Align left with caption and lightbox"] [image src="" link="" link_type="details" target="_blank" align="right" caption="Align right with caption <br /> and link to details <br /> open in new window"] [image src="" align="center"] 60 .

Preview: For more info and demo please go to images frames shortcode demo 7) Lists .great tool when you want to present something within the list. We prepared 11 types of lists. Below you can check all of them: Unordered bullet list <ul class="list"> <li>List item 1</li> <li>List item 2</li> </ul> Ordered list <ol class="list"> <li>List item 1</li> <li>List item 2</li> </ol> Roman ordered list <ol class="list list_roman"> <li>List item 1</li> <li>List item 2</li> </ol> 61 .

Alpha ordered list <ol class="list list_alpha"> <li>List item 1</li> <li>List item 2</li> </ol> Unordered tick list <ul class="list list_tick"> <li>List item 1</li> <li>List item 2</li> </ul> Unordered info list <ul class="list list_info"> <li>List item 1</li> <li>List item 2</li> </ul> Unordered warning list <ul class="list list_warning"> <li>List item 1</li> <li>List item 2</li> </ul> Unordered plus list <ul class="list list_plus"> <li>List item 1</li> <li>List item 2</li> </ul> 62 .

<td> and other html tags. So if you want to change type of the list.. <thead>.tables can be used just like regular tables in html. For more info and demo please go to lists shortcode demo 8) Table . <tr>. all of these lists have only a different kind of class. you can easily do so by just changing the name of class.Unordered minus list <ul class="list list_minus"> <li>List item 1</li> <li>List item 2</li> </ul> Unordered arrow list <ul class="list list_arrow"> <li>List item 1</li> <li>List item 2</li> </ul> Unordered help list <ul class="list list_help"> <li>List item 1</li> <li>List item 2</li> </ul> As you can see. <th>. Here you can use tags such as <table>. <tbody>. Below you can find some examples of tables: <table> <thead> <tr> <th>Column 1 heading</th> <th>Column 2 heading</th> <th>Column 3 heading</th> 63 .

 height . This value is placed at the end of every vimeo video after last "/". 700 is highly recommended for left or right sidebar template while 950 for a default one.we have made two options for most popular videos: vimeo and youtube.<th>Column 4 heading</th> </tr> </thead> <tbody> <tr> <td>Row 1 col 1 content</td> <td>Row 1 col 2 content</td> <td>Row 1 col 3 content</td> <td>Row 1 col 4 content</td> </tr> <tr> <td>Row 2 col 1 content</td> <td>Row 2 col 2 content</td> <td>Row 2 col 3 content</td> <td>Row 2 col 4 content</td> </tr> </tbody> </table> Preview: For more info and demo please go to table shortcode demo 9) Video . Vimeo video shortcode has got 3 attributes:  video .video player`s height Example of this shortcode below: 64 .vimeo video`s ID. for example: http://vimeo.player`s width.com/19819283  width .

for example: http://www.youtube video`s ID.</b> this one will underline your text: <u>Vestibulum commodo volutpat a</u> this one will cursive your text: <i>dapibus. Below you can find examples of these codes: this one will bold your text: <b>Etiam ullamcorper. Suspendisse a pellentesque dui.[vimeo video="1084537" width="700" height="400"] Youtube video shortcode have got 3 attributes:  video .video player`s height Example of this shortcode below: [youtube video="YE7VzlLtp-4" width="700" height="420"] For more info and demo please go to video shortcode demo 10) Misc stuff .com/watch?v=YE7VzlLtp-4  width . 700 is highly recommended for left or right sidebar template while 950 for a default one. mauris nec malesuada fames</i> this one will crossed your text: <s>dapibus. non felis. This value is placed at the end of every video after "v=" parameter.in this section you can find other options that you can use in this theme.player`s width.youtube.  height . mauris nec malesuada fames</s> 65 .

this one will make your text "sub": <sub>ipsum dolor lacus</sub> this one will make your text "sup": <sup>sodales lectus blandit</sup> this one will link your text: <a href="#">Nullam viverra consectetuer</a> this one will create horizontal line: <hr /> For more info and demo please go to misc stuff shortcode demo 66 .

Blog To create a blog please create a new page Pages > Add New and set up the title eg.support. In the next step please go to Settings > Reading > Front page displays > A static page > Posts page. If you want blog with the sidebar you should also select the right sidebar for your page.wordpress. We have created some features specifically for bloggers. Posts will be displayed on the already created page. you can choose whether your blog should be on full width or whether you want it with the sidebar (left or right). In bottom section you will find Page options such as Layout and Sidebar. As you probably have guessed. In field Template leave default option on Default Template. For more info about post creation please go to http://en. These options are set on default for each new post. At the end please click Publish button on the right.com/posts/. Full description of options for blog can be found in section Theme Options (section 4.4) Adding new posts works similar to standard WordPress Posts > Add New. You can also check the movie about how to create a post http://www. You will find them in Theme options panel > Getting started > Blog.youtube. Blog. Images for posts we can add using featured image.com/watch?v=Sa4uimrgNz8 67 .1. select page that you have already created and click Save changes.6.

As you have probably guessed. To add a new portfolio please go to Portfolio > Add new. You can find them in Theme options panel > Getting started > Portfolio. Here you can choose whether you want a full width portfolio or the one with a sidebar (left or right). We have created some options for Portfolio page. In field Template set the option Portfolio template. 68 . you can select whether your portfolio should be in full width or whether it should be with a sidebar (left or right).5). Portfolio. Additionally. in the bottom section of the page you have Page options.1.7. Porfolio items are working just like typical post. Portfolio To create a portfolio please start by creating a new page Pages > Add New and setting up the title eg. As you can see you choose similiar options as for a blog. More info about these options can be found in Theme options panel (section 4. If you decide on the portfolio with a sidebar you should also select the right sidebar for your page. In the bottom section you also have Page options such as Layout and Sidebar.

In next step. which we used in this template are from http://p. Posts and Custom Links from blocks located on the left.premiumpixels. type Name for your menu and click Create Menu.yusukekamiyamane.com/menus 9.com/ Some images has been also used from http://www. If you are using external SEO plugin you can easily turn it off. SEO In the era of what is happening in the search engines (especially Google) we implemented SEO option in our theme.When you choose the option with a sidebar please don`t forget to select the right sidebar for this page. in section Theme Locations for position Main menu you need to choose a menu that you’ve just created. 69 . You can do it in Pages > Add page > Page options. Icons (Fugue Icons).flickr. Of course you can also set up options like Title. Menu creation Menu creation works as in default Wordpress. We hope this will be very helpful for all of you. We do not share any psd files for this images.support. For more info about the menu creation please go to http://en. You can set up here things like Meta Description or Meta Keywords for homepage (this is also default option for each new page). You can also type Excerpt and select Featured image.com/ Images in slider has been made by our team and they can be used only with our theme.wordpress. To add your own menus go to Appearance > Menus. 8. After that please just click Publish button. 10. Now you can add Pages.pixeden. Meta Description and Meta Keywords for each page in this theme.com/ Vectors in illustrations has been used from http://www. To set up general options for SEO please go to Theme options panel > Getting started > General .com/photos/markjsebastian/ & http://www. At the end you need to save it by clicking on Save Menu. Images For this theme we used some images & icons available on the web.

in right bottom section of page. SEO Description and SEO Keywords. the page will adopt default values that are in Theme options panel > Getting started > General. the page will adopt this values. It depends on what you exactly need. please place your question on forum http://forum.  If you have got a questions about theme.com/caffeine . So please don`t contact us by sending message on youtube. Please note that we won`t answear support question in comments or emails . facebook or twitter .  Via comments you can send only presale questions or comment that is not related to support.com/xmls/ 70 . If you leave this fields empty.net/user/muffingroup .muffingroup. 11. XML file with demo content To download the XML file with demo content please firstly go to page: http://themes. your question could be lost in these communication channels.In section Page Options you can find fields like SEO Title. Support & contact with us You can contact us in few ways.  If you have a really big problem and really need to give us access to your account (that is personal and can only be used by support) you can contact us by using contact form on our profile`s page on Themeforest http://themeforest.we prefer to provide you with support on forum because your question can be helpful to other customers. If you fill these fields.muffingroup.because it`s really difficult for us to control. 12. There is no other way contact with us.

In next step please select a product for which you need xml file (in this case please choose Caffeine).com/watch?v=0fTHYWEGhAc) will show you how to import this file properly. This video (http://www. Please also paste your themeforest username and purchase code.youtube. 71 . Afterwards simply click "Download" and your file should start downloading. When you get this file onto your computer. you can import it into your wordpress (please import this file only after installing caffeine theme).

You can succeed in doing it on your own. you can edit it on the screen and see how the elements look like. Advanced theme customization Sometimes there is a moment when you want to change something on your site that is not available in theme options panel. Something like: font size. on the left side there is a list of styles used for each class/id. If you want to change something. After that you`ll see something like on screen below: As you can see on the image. If you`re using Google Chrome you can inspect element that you need to change by "Inspect element". Google Chrome To do it you can use two best tools available for free in your web browser. To do it just hover mouse on element and click "Inspect element". You don`t have to ask us about all these things and wait for our response ever again.1. color.13. If everything is good and you want to make the same changes on your site please copy right styles from box of right side. for example: 72 . 13. margin or any other customization.

In contrast to Google Chrome. Firebug for Firefox Apart from Google Chrome. The result will be identical. we also suggest to use Firebug for Firefox.css file. It`s up to you to decide on which way to use. To do so please click Firefox in the left top corner > Add-ons and then search for Firebug and install it. 13. Firebug must be installed at first before you can use it.inner-border { height: 80px.2. 73 .#weekly-features . When you get it into your browser you can use it the same way as with Google Chrome but instead of clicking "Inspect element" please click "Inspect element with Firebug". padding: 20px. } and paste this code into: Theme options > Styles > Custom CSS code. On the screen below you can see that it will look very similar to Inspect element in Google Chrome. If you want to paste this code instead of Custom CSS code you can do it in custom.

If you want to change anything you can edit it on the screen and check what elements look like. If you want to paste this code instead of Custom CSS code you can do it in style. it`s not difficult to use it and with the support of this tool you can save a lot of time. The result will be identical.css file.As you can see on image. It`s up to you to decide on which way to use. on the left side there is a list of styles used for each class/id. 74 . padding: 20px. } and paste this code into: Theme options > Styles > Custom CSS code.inner-border { height: 80px. so we encourage you to try to do it as described and enjoy your new skills. As you can see. for example: #weekly-features . If everything is good and you want to make the same changes on your site please copy right styles from box of right side.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->