Request For Answer
October 2015
Documentation Mantis v.1


Video Tutorials

CodiePie's Channel

If after reviewing the documentation, you still have trouble navigating around the theme, please submit a request for us to further assist you.

Request For Answer! Support

Installation

Wordpress Installation Mantis Installation Plugin's Installation Demo Installation

Plugin Tutorials

Step By Step

Download & Unzip The Wordpress Package

Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it. Upload the WordPress files in the desired location on your web server:

Placing Wordpress into Root of Domain

Move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server. If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP. Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled. Run the WordPress installation script by accessing wp-admin/install.php in a web browser. If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

Initiate the wp-config.php file

Rename wp-config-sample.php to wp-config.php, then edit the file and add your database information.(Optional, It'll be created automatically. If not then we need to edit it)

Enter Database information

Enter site,login and email

Login Time!

Uploading MANTIS

There are two ways you can do this, FTP upload or WordPress upload ( if your internet is slow, don't use the Wordpress Theme Uploader ).

If you are uploading via FTP upload, then you need to upload the unzipped folder "mantis" to the /wp-content/themes folder of your WordPress installation.

If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file "mantis.zip" and then hit Install Now.

WARNING:

If you get an error saying that the stylesheet is missing, then you have uploaded the wrong folder. Please check that you are uploading the mantis/mantis.zip within the Theme Files folder. You may have to unzip the file that you download from ThemeForest to find this.

Activating MANTIS!

Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate "Mantis"!

Installing/Activating Plugins

Now that you have activated Mantis, you'll see a yellow notice at the top of the screen. This notice let's you know the plugins that we recommend you install for use with the theme. Click "Begin installing plugins" and install/activate the plugins one by one. You can also access this page by going to Appearance > Install Plugins.

Installing The Demo

NOTE: Before importing the demo content, make sure you have installed & activated "Contact Form 7" from within Appearance > Install Plugins, BuddyPress and WooCommerce if you want the demo shop content and social abilities.

Both the theme content and theme options have been provided so that you can set up the theme to look exactly like the demo in a few minutes.



Theme Options Import

The theme options text file is to copy and paste the contents into the box provided within Theme Options, under the Import/Export sub-menu. You can find this file, named "mantis_theme-options.txt" within the "Demo" folder.

Increase WordPress/PHP Memory Limit

If you have any issues with the import, i.e. any errors, then you'll likely need to increase the memory limit and try again. Here's a guide of how to proceed if you come across issues:



Edit wp-config.php and enter the following at the bottom of the file: define('WP_MEMORY_LIMIT', '64M');

If you have access to your server's PHP.ini file, (With Godaddy, it's php5.ini) then find the following line and increase the value, for example: memory_limit = 64M

If you don't have access to your server's PHP.ini file, then try adding this to the bottom of the .htaccess file at the root of your WordPress site: php_value memory_limit 64M

If you aren't confident enough to attempt the above yourself, or nothing has worked, then please contact your host directly - they will be able to help.



You can use the below image as reference for the setup we have on our server:



Global Settings

The Global Settings section handles exactly what the title entails. Here you will be able to alter sections of the website that reflects all posts and pages.



The Redirect To Maintenance Page

This feature comes in handy, when wanting to make changes without exposing them prematurely. Admins and editors will be able to view all changes without interruption and visitors will be redirected to designated page.

The Favicon Settings

This feature covers all device platform favicons, from all the devices, right through

The Button Color Settings

Handles the overall button color settings, not including some of the premium features nor the shortcode generated buttons.

The Contact Form 7 Settings

This allows you to quickly and easily change the plugin color scheme of all forms generated using Contact Form 7, one of the best form generators for Wordpress!

The Notification Settings

Codie Pie's Notification System allows you to customize the color scheme as well as tweak the functionality through our simple drop-down menu.

The Scrollbar Settings

Did you notice the scrollbar colors and shape in the screenshot above and on the demo page? You'll be able to enable NiceScroll 3 the latest version with mobile touch optimized for better scroll experience!

The VideoJS Settings

Utilize and customize the VideoJS settings to match your color scheme for your branding and website.

The Background Settings

Create your own pattern background Image by uploading a texture and increasing or decreasing the Pattern Width and Height or add a video background that consistently follows all pages and posts, only when Page Transitions is enabled under the Page Settings section.

Core Settings

The Credential Settings

Control the animation settings for the Sign In, Forgot Password and Sign Up forms. Setup the Sign In and Sign Up urls as a fallback if you have Buddypress enabled (Buddypress:enabled; Sign In and Forgot Password forms will work but the Sign Up won't).

The Initial Loader Settings

Here you'll be able to choose a background color, add a transition effect and display an icon, shortcode or upload your own image above the please wait still loading message. Choose different content for logged in users and logged out users.

The Phone Settings

Input your company phone number and choose the icon and text color as well as the mobile icon color

The Show Love Button Settings

Choose your show love button icon, if you don't like the default heart. Customize the title attribute text before clicked and after clicked.

The SUMS: Stop User, Make SALE! Settings

Customize your message and functionality to stop users from leaving your site.

The Youtube Gallery Settings

Input your username or playlist ID to quickly upload up to 50 videos! Saves you a lot of time and gives the site a slick media platform.

The Youtube Like Loader Settings

Choose from the preset Loaders or use the default Youtube loader. Generate your own Youtube Like Loader by choosing from the 6 color slots. Enable the spinner loader as the cherry on top to reconfirm page loaded. Page Transition must be enabled to view the loaders.

Blog Style Settings

Here you can customize thumbnail size, colors, date format typography for all the posts for your blog.

Post Settings

Here you can customize post category, order, orderby, post limit and author meta (There's a shortcode for this to further customize).

Page Settings

Here you can customize the colors for the main frame core pages like, author page, search page, 404 page. You'll have the option here to enable Page Transitions and globalize transition effects for continuity and efficiency in time. Enable the Landing page module to get cool effects. Chrome has a bug in the Parallax effect section of it but soon they'll release an update with the bug fix.

CSS Settings

Add your own CSS style sheet or style inside the textarea. Enable css styling for logged in styles/stylesheets and logged out styles/stylesheets.

Google/Scripts Settings

Add your own scripts but make sure you use $s to avoid other javascript files from conflicting with yours. Place Google Analytics code inside textarea to track your site's traffic and get an idea on what your users are looking for.

WP Login Settings

The Wordpress Custom Login Settings

Change the Wordpress login branding to match yours. Here you'll be able to change the colors, add a transition effect, choose one fo the 350+ Icons.

Font Settings

Choose from the 600+ fonts! Enjoy our Live Font Preview so you don't have to jump back and forth between pages to simply view something that should take a second.

The Accordion Properties

titlecolor = The element text color.
titlebackground = The element background color.
titleshape = The element that one clicks on to open the inner content; the shape; Circle, Semi-Round, etc.
titlealign = The element text align; left, center or right.
contentcolor = The inner content text color.
contentbackground = The inner content background color.
contentshape = The inner content of the element's shape; Circle, Semi-Round, etc
width = The width of the element that effects the width of the inner content.
title1 = The first element's title.
title2 = The second element's title.
title3 = The third element's title.
content1 = The first inner content's content.
content2 = The second inner content's content.
content3 = The third inner content's content.

[cpaccordion titlecolor='#fff' titlebackground='#686868' titleshape='Semi-Round' titlealign='center' contentcolor='#fff' contentbackground='#686868' contentshape='Semi-Round' width='50%' title1='Title 1' title2='Title 2' title3='Title 3' content1='Content 1' content2='Content 2' content3='Content 3']

The Alert Message Properties

background = The element container background color.
backgroundtype = A linear horizontal split of the background color, gives it a glassy look.
color = The element container text color.
width = The element container width.
shape = The element container shape; Circle, Semi-Round, etc.
shadow = The element container shadow type; Inner-Shadow, Outer-Shadow, etc.
transition = The element container transition in effect.
bordercolor = The element container border color.
borderstyle = The element container border style; dashed, dotted, etc.
borderwidth = The element container border width.
textshadow = The element container's content text shadow color.
fontsize = The element container's content font size.
fontstyle = The element container's content font style.
fontfamily = The element container's content font family.

[cpalertmessage background='#686868' backgroundtype='Split' color='#fff' shape='Semi-Round' shadow='Inner-Shadow' transition='zoomIn' bordercolor='#555' borderstyle='dashed' borderwidth='5px' width='50%' textshadow='#686868' fontsize='1.2em' fontstyle='normal' fontfamily='Oswald']

The Align Properties

align = To align the content within the shortcode tag; left, center, right.
height = Specify a minimum height.
margin = Custom position the content within the shortcode tag.
opacity = The opacity level of the content within the shortcode tag.
ieopacity = The internet explorer opacity level of the content within the shortcode tag.

[cpalign align='center' height='auto' margin='0px auto' opacity='1' ieopacity='100']content...[/cpalign]

The Animated Chart Properties

type = Choose the element type; bar, doughnut, line, pie, polararea or radar.
filter = Specify a filter type; Hue-Rotate, Grayscale, Invert etc.
align = Align the element; left, center or right.
margin = Custom position the element.
customclass = Add a custom class to the element container.
labels = Add day, month or number labels; one, two, three, etc.
data = Add three data parameters; 30,50,100.
datasets = Add multiple data parameters using a hyphen to separate them; 30,50,100 - 20,90,75.
colors = Add color sets; #69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264
fillopacity = Important property to not miss, this brings the color sets to show up, set to 0.5 not 1 or you'll get a thin border of your chosen colors
pointstrokecolor = The line and polararea type elements; point color - #fff.
animation = Set this to true to enable the element to animate, rather than rendering a stagnate element.
animationsteps = Similar to frames per second on a camera, correlates with speed and time of render; default 60.
animationeasing = The smooth animation easing effect; easeOutQuart.
scalefontsize = The element text font size of the animated element.
scalefontfamily = The element text font family.
scalefontcolor = The element text color.
scaleoverride = The script attempts to optimize the size and scale accordingly; must have scalesteps, scalestepwidth and scalestartvalue, in order to work.
scalesteps = The number of steps in the scale.
scalestepwidth = The value jump used in the scale.
scalestartvalue = The center starting value for the scale.
width = The animated element width.
height = The animated element height.
canvaswidth = The canvas container width of the element.
canvasheight = The canvas container height of the element.
relativewidth = This automatically optimizes the width of canvas width and chosen width of element.
inview = Animate the element in, only if element is in view.


Bar Chart

[cpanimatedchart type='bar' align='aligncenter' margin='20px auto' datasets='35,45,50,23 - 12,23,35,42 - 43,39,72,48 - 25,21,32,28' labels='Jan,Feb,Mar,Apr']

Doughnut Chart

[cpanimatedchart type='doughnut' align='aligncenter' margin='20px auto' data='12,28,20,12,16,12' colors='#DDDDDD,#686868,#FFFFFF,#555555,#000000,#111111']

Line Chart

[cpanimatedchart type='line' align='aligncenter' margin='20px auto' datasets='30,42,52,33 - 12,23,35,42' labels='Bicycle,Car,Bus,Plane']

Pie Chart

[cpanimatedchart type='pie' align='aligncenter' margin='20px auto' data='12,28,20,25,15']

Polar Area Chart

[cpanimatedchart type='polarArea' align='aligncenter' margin='20px auto' data='12,28,20,12,16,12' labels='Jan,Feb,Mar,Apr,May,June']

Radar Chart

[cpanimatedchart type='radar' align='aligncenter' margin='20px auto' datasets='20,42,52,33,23 - 12,23,35,42,12' labels='Jan,Feb,Mar,Apr,May' colors='#DDDDDD,#686868']

The Banner Properties

background = The background color of the element container.
color = The text color of the element container.
width = The width of the element container.
shape = The shape of the element container.
textshadow = Input no to turn off the text shadow or leave it blank or input yes to keep it on.
textalign = The text alignment of the element container; left, center or right.
fontsize = The text font size of the element container.
fontstyle = The text font style of the element container.
fontfamily = The text font family of the element container.
tip = Enable a tip on the bottom of the element container.
tiptype = Choose an arrow or round shaped tip.
tipicon = Choose an icon to be centered within the tip container.
transition = The element transition in effect.
padding = The space padding within the element container's content.
margin = Customize the position of the element container.
inview = Animate the element when in view.


[cpbanner background='#686868' color='#FFFFFF' width='100%' shape='Square' textshadow='yes' textalign='center' fontsize='45px' fontstyle='normal' fontfamily='Oswald' tip='yes' tiptype='default' tipicon='fa-apple' transition='zoomIn' padding='20px' margin='0px auto' inview='yes']content...[/cpbanner]

The Block Quote Properties

background = The background color of the element container.
backgroundtype = Input Split to create a horizontal split giving the element container a glassy look.
color = The text color of the element container.
width = The width of the element container.
shape = The shape of the element container.
shadow = The shadow of the element container.
textshadow = The text shadow color.
textalign = The text alignment of the element container; left, center or right.
fontsize = The text font size of the element container.
fontstyle = The text font style of the element container.
fontfamily = The text font family of the element container.
borderstyle = The element container border style; dashed, dotted, solid etc.
borderwidth = The element container border width.
bordercolor = The element container border color.
transition = The element transition in effect.
padding = The space padding within the element container's content.
margin = Customize the position of the element container.
inview = Animate the element when in view.


[cpblockquote background='#686868' color='#FFFFFF' width='100%' shape='Square' textshadow='#686868' textalign='center' fontsize='45px' fontstyle='normal' fontfamily='Oswald' borderstyle='outset' borderwidth='5px' bordercolor='#686868' transition='zoomIn' padding='20px' margin='0px auto']content...[/cpblockquote]

The Button Properties

background = The background color of the element container.
color = The text color of the element container.
borderradius = Customize the element container's shape.
width = The width of the element container.
shape = The shape of the element container.
shadow = The shadow of the element container.
textshadow = Enable or disable the text shadow; no to turn it off.
textalign = The text alignment of the element container; left, center or right.
fontsize = The text font size of the element container.
fontstyle = The text font style of the element container.
fontfamily = The text font family of the element container.
size = The element text size presets.
shadow = The element container shadow.
buttontitle = The element title.
transition = The element transition in effect.
transitionspeed = The element transition effect's speed.
padding = The space padding within the element container's content.
margin = Customize the position of the element container.
class = Add a custom class to element container.
link = Add the url to the button element.
target = Target the link to open: _self = same window, _top = new tab, _blank = new window, etc.


[cpbutton background='#686868' color='#FFFFFF' width='100%' shape='Square' textshadow='#686868' textalign='center' fontsize='45px' fontstyle='normal' fontfamily='Oswald' size='x-small' shadow='None' bordercolor='#686868' transition='zoomIn' transitionspeed='.45' padding='20px' margin='0px auto' class='customclass' link='http://example.com' target='_blank']Button Title[/cpbutton]

The WooCommerce Cart - No Properties

[cpcart]

The Column Properties

count = The count that corresponds with the element containers width.
background = The background color of the element container.
color = The text color of the element container.
shape = The shape of the element container.
shadow = The shadow of the element container.
textshadow = The element container's element text shadow color.
notextshadow = Enable or disable the text shadow; yes to turn it off.
textalign = The text alignment of the element container; left, center or right.
fontsize = The text font size of the element container.
fontstyle = The text font style of the element container.
fontfamily = The text font family of the element container.
shadow = The element container shadow.
padding = The space padding of the outer element container.
contentpadding = The space padding within the element container's content.
margin = Customize the position of the element container.


[cpcolumns count='two' background='#686868' color='#FFFFFF' shape='Square' textshadow='#686868' notextshadow='no' textalign='center' fontsize='45px' fontstyle='normal' fontfamily='Oswald' shadow='None' padding='20px' contentpadding='20px' margin='0px auto']Content...[/cpcolumns]

The Contact Properties

recipient = The email recipient.
title = The top header title.
titlecolor = The top header title color.
badgeicon = The top right corner icon square container.
info = The info text below the top header title; tel: 323-555-5555.
background = The element container background color.
textcolor = The element container text color.
borderstyle = The element container border style; dashed, dotted, solid.
borderwidth = The element container border width.
bordercolor = The element container border color.
align = The element container alignment.
buttoncall = If this is enabled, yes, contact form will be hidden; on click it comes down.
buttonfontsize = The button text font size.
buttonwidth = The button width.
buttontitle = The button title.
buttonalign = The button alignment.
buttonshape = The button shape.
buttontextcolor = The button text color.
buttonbackground = The button background color.
buttonborderstyle = The button border style; dashed, dotted, solid.
buttonborderwidth = The button border width.
buttonbordercolor = The button border color.
transitionin = The element container's transition in effect.
transitionout = The element container's transition out effect.
shadow = The element container's shadow.
shape = The element container's shape; Semi-Round, Square, etc.
sociallink1 = The first social link url located below the badge icon on the top right.
socialicon1 = The first social link icon.
sociallink2 = The second social link url located below the badge icon on the top right.
socialicon2 = The second social link icon.
sociallink3 = The third social link url located below the badge icon on the top right.
socialicon3 = The third social link icon.
sociallink4 = The fourth social link url located below the badge icon on the top right.
socialicon4 = The fourth social link icon.
sociallink5 = The fifth social link url located below the badge icon on the top right.
socialicon5 = The fifth social link icon.
sociallink6 = The sixth social link url located below the badge icon on the top right.
socialicon6 = The sixth social link icon.
messagesuccess = Add a custom success message.
messagefail = Add a custom fail message.
submittext = Add a custom submit text or an icon = copy the glyph from Font Awesome Cheat Sheet.
submitcolor = Choose the submit button text color.
submitbackground = Choose the submit button background color.

[cpcontact recipient='example@gmail.com' title='Drop Us An Email' titlecolor='' badgeicon='fa-support' info='Tel: 323-555-2337 Fax: 323-555-2335' textcolor='#fff' background='#a1d9dc' transitionin='None' transitionout='None' shadow='None' shape='Semi-Round' bordercolor='#496e90' borderstyle='outset' borderwidth='0' buttoncall='No' contactbuttontext='' buttonalign='alignnone' buttontextcolor='' buttonbackground='' sociallink1='http://facebook.com' socialicon1='fa-facebook' sociallink2='' socialicon2='None' sociallink3='' socialicon3='None' sociallink4='' socialicon4='None' sociallink5='' socialicon5='None' sociallink6='' socialicon6='None' messagesuccess='' messagefail='' submittext='Send' submitbackground='rgba(0,0,0,0.5)' submitcolor='#fff'][/cpcontact]

The Content Box Properties

background = The element container's background color.
color = The element container's text color.
width = The element container's width.
height = The element container's height.
caption = The element container's caption.
shape = The element container's shape.
shadow = The element container's shadow.
align = The element container's alignment.
filter = The element container's filter effects; Hue, Invert, etc.
image = The element container's image url.
padding = The element container's outer padding.
margin = For the element container's custom positioning.
lineheight = The element container's text height space.
textshadow = Turn off the textshadow; input no.
textalign = The element container's text alignment.
fontsize = The element container's text font size.
fontfamily = The element container's text font family.
transition = The element container's transition in effect.
inview = Show the element container when in view; yes.

[cpcontentbox inview='On' image='' caption='Radio' fontsize='1.5em' fontfamily='Andika' shape='Bizarre' shadow='None' textalign='Center' textshadow='No' width='50%' height='222px' padding='20px' margin='15px auto' color='#686868' background='#a1d9dc' align='aligncenter' transition='bounceInDown' filter='None' ][cpradio][/cpcontentbox]

The Counter Properties

count = The final total number to count to.
countcolor = The number text color.
width = The element container's width.
shape = The element container's shape.
shadow = The element container's shadow.
align = The element container's alignment.
textshadow = Choose a textshadow color.
notextshadow = Turn off the textshadow; input yes.
fontsize = The element container's text font size.
fontfamily = The element container's text font family.
transition = The element container's transition in effect.
inview = Show the element container when in view; yes.


[cpcounter count='1200' countcolor='#3f3f3f' shape='Semi-Round' transition='bounceInUp' align='aligncenter' color='#3f3f3f' background='#a1d9dc' width='20%' textshadow='hsla(0,0%,100%,.25)' notextshadow='No-Text-Shadow' shadow='None' fontstyle='normal' fontfamily='Oswald' fontsize='2em']Custom Counters[/cpcounter]

The Divider Properties

background = The element container's background color.
borderstyle = The element container's border style.
borderwidth = The element container's border width.
bordercolor = The element container's border color.
width = The element container's width.
height = The element container's height.
shape = The element container's shape.
shadow = The element container's shadow.
align = The element container's alignment; left, center or right.
transition = The element container's transition in effect.
opacity = The element container's opacity; 0.5.
ieopacity = The element container's opacity for internet explorer; 50.


[cpdivider align='aligncenter' width='20%' height='0px' background='#ffffff' bordercolor='#a1d9dc' borderstyle='solid' borderwidth='1' margin='0px auto' transition='None' opacity='1' ieopacity='100']

The FAQ Properties

recipient = The email recipient.
title = The header title of the form.
titlecolor = The title text color.
background = The element container background color.
textcolor = The element container text color.
borderstyle = The element container border style; dashed, dotted, solid etc.
borderwidth = The element container border width.
bordercolor = The element container border color.
name = The "from" text e.g Mantis F.A.Q.
subject = The subject matter of the receiving email of question requests.
submittext = Add a custom submit text or an icon = copy the glyph from Font Awesome Cheat Sheet.

[cpfaq recipient='example@gmail.com' title='Send Us A Question' background='#bd9c4d' textcolor='#686868' borderstyle='dashed' borderwidth='5px' bordercolor='#686868']

The Flip Box Properties

backgroundtype = Choose a background gradient type; Horizontal, Solid or Vertical.
background1 = Choose the frontside content background color.
background2 = Choose the backside content background color.
textcolor = Choose the content text color.
width = Set a width for the element container.
shape = Choose a shape preset to add style; Semi-Round, Circle, etc.
shadow = Add a shadow to the element's container.
borderstyle = Add a border style to element's container; dashed, dotted, solid etc.
borderwidth = The border width of the element's container.
bordercolor = The border color of the element's container.
textshadow = The text shadow color of the element's container content.
notextshadow = Turn off textshadow; input yes.
fontsize = The element container's text font size.
fontstyle = The element container's text font style.
fontfamily = The element container's text font family.
lineheight = The element container's text height space.
padding = The element container's outer padding.
transition = The element container's transition in effect.
frontcontent = The element container's frontside content.
backcontent = The element container's backside content.
flipon = Set this to default or leave blank to click to flip or input Hover to flip on hover.

[cpflipbox textcolor='' flipon='Click' frontcontent='Happy Content! <i class="fa fa-birthday-cake"></i>' backcontent='Learn More <i class="fa fa-book"></i>' backgroundtype='Horizontal' background1='#a1d9dc' background2='#bcc999' fontsize='3.7em' fontstyle='normal' fontfamily='Andika' textshadow='hsla(0,0%,100%,.25)' notextshadow='No' shape='Semi-Round' width='25%' shadow='None' bordercolor='' borderwidth='0' borderstyle='outset'][/cpflipbox]

The Google Map Properties

title = The element container's title which is also the slug.
width = The element container's width.
height = The element container's height.

[cpgooglemap title='los-angeles-2014' width='100%' height='650px']

The Highlight Properties

background = The element container's background color.
color = The element container's text color.
shape = The element container's shape preset; Semi-Round, Circle, etc.
shadow = The element container's shadow preset; Inner-Shadow, Outer-Shadow etc.
textshadow = The element container's textshadow color.
notextshadow = Turn off textshadow; input yes.
fontsize = The element container's text font size.
fontstyle = The element container's text font style.
fontfamily = The element container's text font family.
padding = The element container's outer padding.
transition = The element container's transition in effect.

[cphighlight shape='Square' transition='swing' color='#232323' background='#a1d9dc' textshadow='hsla(0,0%,100%,.25)' notextshadow='No-Text-Shadow' shadow='None' fontstyle='normal' fontfamily='Andika' fontsize='' padding='5px']Hello World, I'm highlighted and[/cphighlight]

The Icon Properties

iconfamily = Choose an icon for the icon container.
iconsize = Set px or em size as you would with text.
iconcolor = Pick the icon color or leave blank to be overridden when choosing text color.
iconbackground = Choose a background color for the icon.
iconshadow = Choose a sleek icon shadow to illude depth.
iconboxshadow = Choose an outer shadow of the icon container.
iconshape = Choose the shape of the icon container.
iconalign = The icon container alignment; left, center or right.
iconvertical = Control the positioning of the y axis of the icon container.
iconhorizontal = Control the positioning of the x axis of the icon container.
iconmargin = Custom positioning of the icon container as well as a buffer between other elements outside of it.
background = Choose the element container's background color.
textcolor = Choose the element container's text color.
textalign = Choose the element container's text alignment.
textpadding = Set the element container's text outer padding.
fontfamily = Choose the element container's text font family.
fontsize = Choose the element container's text font size.
align = Choose the element container's alignment.
width = Set the element container's width.
shape = Choose the element container's shape; Semi-Round, Circle etc.
shadow = Choose the element container's shadow; Inner-Shadow, Outer-Shadow, etc.
opacity = Set the opacity of the element container.
ieopacity = Set the internet explorer opacity of the element container.
margin = Custom position the element container.
transition = Choose the transition in effect for the element container.
borderstyle = The element container's border style; dashed, dotted, solid etc.
borderwidth = The element container's border width.
bordercolor = The element container's border color.
shadowplatform = Enable, input yes to use the 3D like shadow on the element container.
shadowstyle = Set a sleek 3D shadow below the element container; curledcorners, leftlick or rightlick.
inview = Set this to yes to animate the element container when in view.

[cpicon iconfamily='fa-home' iconsize='5em' iconcolor='#686868' iconbackground='' iconshadow='None' iconboxshadow='Icon-Inner-Shadow' iconshape='Circle' iconalign='Center' iconvertical='' iconhorizontal='' iconmargin='0px auto' background='#f5d27d' textcolor='#686868' textalign='Center' textpadding='10px' fontsize='1em' fontfamily='Andika' align='aligncenter' width='60%' shape='Semi-Round' shadow='' opacity='1' ieopacity='100' margin='20px auto' transition='None' bordercolor='#a1d9dc' borderstyle='solid' borderwidth='0px' shadowplatform='yes' shadowstyle='rightlick']Your Business[/cpicon]

The Image Box Properties

background = The element container's background color.
color = The element container's text color.
borderstyle = The element container's border style; dashed, dotted, solid etc.
borderwidth = The element container's border width.
bordercolor = The element container's border color.
width = The element container's width.
caption = The element container's caption.
shape = The element container's shape.
shadow = The element container's shadow.
align = The element container's alignment.
filter = The element container's filter effects; Hue, Invert, etc.
image = The element container's image url.
padding = The element container's outer padding.
margin = For the element container's custom positioning.
lineheight = The element container's text height space.
textshadow = Turn off the textshadow; input no.
textalign = The element container's text alignment.
fontsize = The element container's text font size.
fontfamily = The element container's text font family.
transition = The element container's transition in effect.
hovereffect = Enable hover effect; input yes.
hoverbackground = Choose the background overlay color; triggers when hovering over image.
hovercaption = Input caption that shows up in the center of the image on hover.
hovertransitionin = Choose a transition in effect for your caption.
hovertransitionout = Choose a transition out effect for your caption.
inview = Show the element container when in view; yes.

[cpimagebox image='http://codiepie.com/mantis/wp-content/uploads/2013/11/eli.jpg' fontsize='1.5em' fontfamily='Andika' shape='Circle' shadow='Inner-Shadow' textalign='center' width='100%' color='#686868' background='' lineheight='0' borderstyle='outset' borderwidth='12px' bordercolor='#a1d9dc' align='alignnone' padding='0' textshadow='No' transition='None' filter='Sepia' hovereffect='Yes' hoverbackground='rgba(166,173,109,0.5)' hovercaption='David Israelian' hoverlineheight='12' hovertransitionin='zoomIn' hovertransitionout='zoomOut'][/cpimagebox]

The Logged In and Logged Out Property

status = Display content based on if user is logged in or logged out.


[cploggedinout status='logged-in']Content...[/cploggedinout]

The Modal Properties

buttontitle = The modal button title.
buttontextcolor = The modal button text color.
buttonbackground = The modal button background color.
buttonsize = Choose one of the preset sizes; smallbtn, mediumbtn, largebtn etc.
buttonshadow = The modal button shadow.
buttonborderstyle = The modal button border style.
buttonborderwidth = The modal button border width.
buttonbordercolor = The modal button border color.
background = The pop-up window container background color.
color = The pop-up window container text color.
headertitle = The pop-up window header title.
headertextcolor = The pop-up window header text color.
headerbackground = The pop-up window header background color.
headerborderstyle = The pop-up window header border style.
headerborderwidth = The pop-up window header border width.
headerbordercolor = The pop-up window header border color.
windowsize = Choose one of the presets for the pop-up window size; mediumwindow, largewindow, etc.
shape = The pop-up window shape.
shadow = The pop-up window shadow.
borderstyle = The pop-up window border style.
borderwidth = The pop-up window border width.
bordercolor = The pop-up window border color.
filter = The pop-up window content filter effect; Hue, Invert, etc.
transitionin = Choose a transition in effect when modal button is clicked.
transitionout = Choose a transition out effect when modal button is closed.
overlaybackground = Choose a background overlay color for when the pop-up window is live.

[cpmodal buttontitle='Modal Medium Window' buttonsize='mediumbtn' buttonbackground='#496e90' buttontextcolor='#B1B782' buttonshadow='Inner-Shadow' buttonborderstyle='dotted' buttonborderwidth='7' buttonbordercolor='#a1d9dc' headertitle='Modal Header' headertextcolor='' headerbackground='#a1d9dc' background='#496e90' filter='None' shadow='None' shape='Semi-Round' windowsize='mediumwindow' transitionin='zoomIn' transitionout='zoomOut' overlaybackground='#a1d9dc']Some Content...[/cpmodal]

The Parallax Properties

Please Note To add a shortcode content in the parallax, place it inside the opening and closing shortcode tags.
content1 = The first/top content of the element container.
content2 = The second/middle content of the element container.
content3 = The third/bottom content of the element container.
textshadow = Input no to turn off text shadow for all elements inside container.
textshadow1 = The textshadow color of first content element.
textshadow2 = The textshadow color of second content element.
textshadow3 = The textshadow color of third content element.
transition1 = The transition in effect for first content element.
transition2 = The transition in effect for second content element.
transition3 = The transition in effect for third content element.
shadow = Add a shadow to element container; Inner-Shadow, Outer-Shadow, etc.
shape = Choose a shape for the element container; Semi-Round, Square, Circle etc.
align = The element container's alignment relative to the page.
fontstyle1 = The first content element's font style.
fontstyle2 = The second content element's font style.
fontstyle3 = The third content element's font style.
fontsize1 = The first content element's font size.
fontsize2 = The second content element's font size.
fontsize3 = The third content element's font size.
fontfamily1 = The first content element's font family.
fontfamily2 = The second content element's font family.
fontfamily3 = The third content element's font family.
textalign1 = The first content element's text alignment.
textalign2 = The second content element's text alignment.
textalign3 = The third content element's text alignment.
margin = Custom position for the shortcode content.
margin1 = Custom position for the first element content.
margin2 = Custom position for the second element content.
margin3 = Custom position for the third element content.
color1 = The first element content's text color.
color2 = The second element content's text color.
color3 = The third element content's text color.
scrolldirection = The parallax effect scroll direction for the shortcode content; left, up, down or right.
scrolldirection1 = The parallax effect scroll direction for the first element content; left, up, down or right.
scrolldirection2 = The parallax effect scroll direction for the second element content; left, up, down or right.
scrolldirection3 = The parallax effect scroll direction for the third element content; left, up, down or right.
background = The element container's background color.
contentback = Input the url to the image or html5 video for the parallax backdrop. Please keep all html5 video files the same name and same file directory. Once you input the first url, Codie Pie system picks up on all others. So don't type in more than one video file url.
width = The element container's width.
height = The element container's height.
shortcodeheight = The shortcode content's height.
filter = Choose a filter effect for the entire element container; Grayscale, Hue, Invert, etc.

[cpparallax width='100%' contentback='http://allfreecodes.com/store_files/media_back/samples/files/1.mp4'][/cpparallax]

The Portfolio Properties

titleall = Input your own text; this is the top filter category section text to view all categories, e.g All.
shape = The list item container's shape; Semi-Round, Circle.
effect = Place a filter effect while clicking through different categories, e.g. item fades to invert before it fades away; blur, fade or invert.
tooleffect = Choose a transition effect for the toolkit - lightbox, link and show love buttons.
listeffect = Choose a transition movement while clicking through categories; rotateX and rotateY.
grayscale = Choose yes to make the items turn gray while clicking through.
buttoncolor = Choose the filter category button background color.
buttoncoloractive = Choose the filter category button background active color.
imageback = Choose an overlay background color for the on hover effect.
orderby = Order portfolio posts by: menu_order, date, title etc.
order = Order ascending: ASC or descending: DESC.
category = Input the category slugs separated with commas.
byid = Call a specific post by ID; separated with commas.
limit = Limit the amount of posts.
columns = Choose the amount of posts per column; one, two, three, four.
loadmore = Input yes to enable the load more button.
love = Input yes to enable the show love button.
lovebutton = Choose a show love icon if you don't like the default heart.
filter = Choose a filter effect over the entire element container of all list items.
lightbox = Input yes to enable the lightbox effect when image is clicked.
transitionin = Place a transition in effect on the hover of the toolkit and title.
transitionout = Place a transition out effect on the hover out of the toolkit and title.

[cpportfolio titleall="All" shadow="Inner-Shadow" shape="Circle" stylefilter="None" filter="yes" effect="fade" tooleffect="fadeIn" listeffect="rotateX" grayscale="no" buttoncolor="#a1d9dc" headersize="h2" imageback="#a1d9dc" columns="three" category="boat,lake" limit="3" loadmore="yes" love="yes" lightbox="yes" transitionin="bounceIn" transitionout="None"][/cpportfolio]

The Price Table Properties

margin = Custom positioning for the overall container of tables.
tabletextcolor1 = The first tabel text color.
tablepresetcolor1 = The first table with your choice of background presets.
tablecolor1 = The first table, choose your own background color.
tableshape1 = The first table container shape.
glass1 = The first table container, add a glass effect.
pt1 = The first tabel container set the zoom level.
iconshape1 = The first table container set the icon shape.
iconfamily1 = The first table container choose an icon.
iconcolor1 = The first table container choose an icon color.
iconpresetcolor1 = The first table container choose an icon color preset.
iconbackground1 = The first table container choose an icon background color.
iconshadow1 = The first table container choose an icon shadow.
textshadow1 = The first table container choose textshadow over content.
title1 = The first table container title of package.
price1 = The first table container price of package.
description1 = The first table container description of package.
buttonhide1 = The first table container hide button, input yes.
buttonbackground1 = The first table container button background color.
buttoncolor1 = The first table container button text color.
buttonpresetcolor1 = The first table container button preset color.
buttontitle1 = The first table container button title.
buttonurl1 = The first table container button url.
buttontarget1 = The first table container button target.
buttonhover1 = The first table container button hover zoom effect; input Hover.
tablehover1 = The first table container table hover zoom effect; input Hover.
shadow1 = The first table container overall shadow.
tabletextcolor2 = The second tabel text color.
tablepresetcolor2 = The second table with your choice of background presets.
tablecolor2 = The second table, choose your own background color.
tableshape2 = The second table container shape.
glass2 = The second table container, add a glass effect.
pt2 = The second tabel container set the zoom level.
iconshape2 = The second table container set the icon shape.
iconfamily2 = The second table container choose an icon.
iconcolor2 = The second table container choose an icon color.
iconpresetcolor2 = The second table container choose an icon color preset.
iconbackground2 = The second table container choose an icon background color.
iconshadow2 = The second table container choose an icon shadow.
textshadow2 = The second table container choose textshadow over content.
title2 = The second table container title of package.
price2 = The second table container price of package.
description2 = The second table container description of package.
buttonhide2 = The second table container hide button, input yes.
buttonbackground2 = The second table container button background color.
buttoncolor2 = The second table container button text color.
buttonpresetcolor2 = The second table container button preset color.
buttontitle2 = The second table container button title.
buttonurl2 = The second table container button url.
buttontarget2 = The second table container button target.
buttonhover2 = The second table container button hover zoom effect; input Hover.
tablehover2 = The second table container table hover zoom effect; input Hover.
shadow2 = The second table container overall shadow.
tabletextcolor3 = The third tabel text color.
tablepresetcolor3 = The third table with your choice of background presets.
tablecolor3 = The third table, choose your own background color.
tableshape3 = The third table container shape.
glass3 = The third table container, add a glass effect.
pt3 = The third tabel container set the zoom level.
iconshape3 = The third table container set the icon shape.
iconfamily3 = The third table container choose an icon.
iconcolor3 = The third table container choose an icon color.
iconpresetcolor3 = The third table container choose an icon color preset.
iconbackground3 = The third table container choose an icon background color.
iconshadow3 = The third table container choose an icon shadow.
textshadow3 = The third table container choose textshadow over content.
title3 = The third table container title of package.
price3 = The third table container price of package.
description3 = The third table container description of package.
buttonhide3 = The third table container hide button, input yes.
buttonbackground3 = The third table container button background color.
buttoncolor3 = The third table container button text color.
buttonpresetcolor3 = The third table container button preset color.
buttontitle3 = The third table container button title.
buttonurl3 = The third table container button url.
buttontarget3 = The third table container button target.
buttonhover3 = The third table container button hover zoom effect; input Hover.
tablehover3 = The third table container table hover zoom effect; input Hover.
shadow3 = The third table container overall shadow.
tabletextcolor4 = The fourth tabel text color.
tablepresetcolor4 = The fourth table with your choice of background presets.
tablecolor4 = The fourth table, choose your own background color.
tableshape4 = The fourth table container shape.
glass4 = The fourth table container, add a glass effect.
pt4 = The fourth tabel container set the zoom level.
iconshape4 = The fourth table container set the icon shape.
iconfamily4 = The fourth table container choose an icon.
iconcolor4 = The fourth table container choose an icon color.
iconpresetcolor4 = The fourth table container choose an icon color preset.
iconbackground4 = The fourth table container choose an icon background color.
iconshadow4 = The fourth table container choose an icon shadow.
textshadow4 = The fourth table container choose textshadow over content.
title4 = The fourth table container title of package.
price4 = The fourth table container price of package.
description4 = The fourth table container description of package.
buttonhide4 = The fourth table container hide button, input yes.
buttonbackground4 = The fourth table container button background color.
buttoncolor4 = The fourth table container button text color.
buttonpresetcolor4 = The fourth table container button preset color.
buttontitle4 = The fourth table container button title.
buttonurl4 = The fourth table container button url.
buttontarget4 = The fourth table container button target.
buttonhover4 = The fourth table container button hover zoom effect; input Hover.
tablehover4 = The fourth table container table hover zoom effect; input Hover.
shadow4 = The fourth table container overall shadow.
tabletextcolor5 = The fifth tabel text color.
tablepresetcolor5 = The fifth table with your choice of background presets.
tablecolor5 = The fifth table, choose your own background color.
tableshape5 = The fifth table container shape.
glass5 = The fifth table container, add a glass effect.
pt5 = The fifth tabel container set the zoom level.
iconshape5 = The fifth table container set the icon shape.
iconfamily5 = The fifth table container choose an icon.
iconcolor5 = The fifth table container choose an icon color.
iconpresetcolor5 = The fifth table container choose an icon color preset.
iconbackground5 = The fifth table container choose an icon background color.
iconshadow5 = The fifth table container choose an icon shadow.
textshadow5 = The fifth table container choose textshadow over content.
title5 = The fifth table container title of package.
price5 = The fifth table container price of package.
description5 = The fifth table container description of package.
buttonhide5 = The fifth table container hide button, input yes.
buttonbackground5 = The fifth table container button background color.
buttoncolor5 = The fifth table container button text color.
buttonpresetcolor5 = The fifth table container button preset color.
buttontitle5 = The fifth table container button title.
buttonurl5 = The fifth table container button url.
buttontarget5 = The fifth table container button target.
buttonhover5 = The fifth table container button hover zoom effect; input Hover.
tablehover5 = The fifth table container table hover zoom effect; input Hover.
shadow5 = The fifth table container overall shadow.
count = The table count; three, four, or five.
transition = Choose a transition in effect for the overall container.
inview = Show price table container when in view.

[cppricetable inview='Off' margin='80px auto' transition='None' count='3' title1='Economy' price1='$5/month' description1='10 GB Storage 10 Emails Plus Support!' buttontitle1='SIGN UP!' buttonurl1='javascript:void(0);' buttontarget1='_self' buttonhover1='Hover' tablehover1='No' tablecolor1='#a1d9dc' tabletextcolor1='' tablepresetcolor1='' tableshape1='Semi-Round' glass1='Glass-All' pt1='None' iconfamily1='fa-user' iconshape1='Circle' iconpresetcolor1='None' iconcolor1='' iconbackground1='' iconshadow1='None' textshadow1='Text-Shadow' buttonhide1='Default' buttoncolor1='#ffffff' buttonpresetcolor1='None' title2='Deluxe' price2='$15/month' description2='20 GB Storage 20 Emails Plus Support!' buttontitle2='SIGN UP!' buttonurl2='javascript:void(0);' buttontarget2='_self' buttonhover2='Hover' tablehover2='No' tablecolor2='#dddddd' tabletextcolor2='' tablepresetcolor2='' tableshape2='Semi-Round' glass2='Glass-Title' pt2='pt2' iconfamily2='fa-group' iconshape2='Circle' iconpresetcolor2='None' iconcolor2='' iconbackground2='' iconshadow2='None' textshadow2='Text-Shadow' buttonhide2='Default' buttoncolor2='#ffffff' buttonpresetcolor2='None' title3='Premium' price3='$25/month' description3='35 GB Storage 35 Emails Plus Support!' buttontitle3='SIGN UP!' buttonurl3='javascript:void(0);' buttontarget3='_self' buttonhover3='Hover' tablehover3='No' tablecolor3='#a1d9dc' tabletextcolor3='' tablepresetcolor3='' tableshape3='Semi-Round' glass3='Glass-All' pt3='None' iconfamily3='fa-star' iconshape3='Circle' iconpresetcolor3='None' iconcolor3='undefined' iconbackground3='' iconshadow3='None' textshadow3='Text-Shadow' buttonhide3='Default' buttoncolor3='#ffffff' buttonpresetcolor3='None'][/cppricetable]

The Progress Bar Properties

title = The element container title located above element.
width = The element container width, stay within 95%, anything above that will set the container going past the window screen.
percentage = The percentage to load to, don't go beyond 100% or it'll break the container.
barcolor = The inner bar color.
barcolorpresets = Choose from the preset background colors for the inner bar.
barstyle = Choose from the animated preset bar fillers, Bubbles, Eye-Candy or Snake-Eye, Zebra.
background = Choose a background color for the bar.
backgroundpresets = Choose a background preset color for the bar.
labelbackground = Choose a background color for the bar label that holds the percentage of the load.
labelbackgroundpresets = Choose a background preset color for the bar label that holds the percentage of the load.
labeltextcolor = Choose a bar label text color.
textcolor = Choose the overall text color of the element container.
textalign = The element container text alignment.
textposition = Position of title text; input top or bottom.
fontsize = The element container's font size.
margin = Custom position the element container.
shadow = Add a shadow to the element container.
shape = Add a shadow to the element container.
transition = Add a transition in effect to the element container.
hidelabel = Hide the label that displays the percentage.
loadhide = Hide the progress bar once loaded; input yes.
position = Choose whether you'd like to have the position of the progress bar fixed like a loader or relative to other elements on the page; input fixed.
overlay = Enable an overlay background color on the load of the progress bar; input yes.
overlaycolor = Choose the overlay background color.
inview = Show progress bar if it is in view; input on.

[cpprogressbar width='100' percentage="100" title='I am a Progress Bar' background='#686868' barcolor='#ffffff' shadow="Inner-Shadow" shape="Circle"][/cpprogressbar]

The Sidebar Properties

name = The name of the sidebar.

[cpsidebar name='logged-in-fr']

The Sequential Animation Properties

title = The element container's title located above sequential animation.
description = The description located below sequential animation.
iconcount = The amount duplicated.
iconfamily = Choose an icon.
iconsize = Choose the preset of sizes 1-5.
iconshape = Choose the shape of the icon container.
iconshadow = Add a shadow to the icon container.
iconcolor = Choose icon color.
iconbackground = Choose icon background color.
iconbackgroundhover = Choose icon background color on hover.
iconpadding = Place some space in the icon container.
icontransition = Choose a transition in effect for the icon container.
transitionspeed = Choose the speed at which elements come in; 500 = .5 seconds, 1000 is 1 second.
width = Choose the element container's width.
height = Choose the element container's height.
background = Choose the element container's background color.
textcolor = Choose the element container's text color.
textalign = Choose the element container's text alignment.
textshadow = Choose to enable the element container's text shadow; input yes.
fontsize = Input the element container's font size.
fontfamily = Choose the element container's font family.
padding = Input the element container's outer padding.
margin = Custom position element container.
lineheight = Adjust the height space between text.
shadow = Add a shadow to the element container.
shape = Adjust the shape of the element container.
transitioncontainer = Choose a transition effect for the overall container of elements.
image = Input image url to load instead of an icon.
childiconfamily = Choose an arrow like icon to direct the animation sequence.
childiconsize = Input the iconsize of the child icon.
childicontransition = Choose a transition in effect for the child icon.
content1 = Enable render 4; input yes. Now input first content
content2 = Input second content.
content3 = Input third content.
content4 = Input fourth content.
render4 = Enable this for specific graphic animation; input yes.
inview = Enable this to show element container only when in view; input on.

[cpseqanime inview='On' title='' description='' content1='' content2='' content3='' content4='' render4='No' iconcount='6' iconfamily='fa-book' iconsize='5' iconshape='Circle' iconshadow='None' iconcolor='#a1d9dc' iconbackground='#686868' iconbackgroundhover='#3d3d3d' iconpadding='20px' icontransition='fadeIn' transitionspeed='500' width='90%' height='200px' background='' textcolor='' textalign='Center' fontsize='1.5em' fontfamily='Oswald' padding='20px' margin='0px auto' lineheight='' shadow='None' shape='Circle' transitioncontainer='None' image='' childiconfamily='fa-angle-right' childiconsize='3' childicontransition='fadeInUp'][/cpseqanime]

The ShareIt Properties

posts = If on post section; input yes.
desktop = If regular page section; input yes and posts no.

[cpshareit posts='no' desktop='yes']

The Show Posts Properties

showshare = Enable the social share; input yes.
showdate = Enable the date; input yes.
showlove = Show love button; input yes.
readon = Show the read on link; input yes.
caticon = Show category icons; camera for photo, film for video etc; input yes.
lightbox = Enable lightbox; input yes.
showcommentcount = To show comment count and link; input yes.
excerptlength = Limit the excerpt length in character; 120.
postsperrow = Posts per row; three for 30 percent width.
postlimit = Limit the amount of posts that display; input -1 for unlimited.
transition = Choose a transition in effect for the overall element container.
filter = Choose a filter effect for the overall element container; input Hue, Invert etc.
shape = Adjust the shape of the element container.
shadow = Add a shadow on the element container.
authortype = Choose Slate to display author meta below thumbnail image or Below Title above image thumbnail.
authorlink = Insert author link; input yes.
authorslateshadow = Add a shadow to the author slate; input Inner-Shadow, Outer-Shadow etc.
masonry = Enable masonry effect; input yes.
categories = Input category slugs separated with commas.
order = Choose ASC or DESC.
orderby = Order by date, rand for random, menu_order, title etc.

[cpshowposts showshare='yes' showdate='yes' showlove='yes' readon='yes' lightbox='yes' postlimit='12' shadow='None' shape='Square' categories='-1' orderby='date']

The Social Properties

background = The background color of the social icons.
color = The icon color.
margin = Custom position the element container.
shape = Adjust the shape of the icon container items.
shadow = Add a shadow to the mix.
transition = Choose a transition in effect of the element container.
icon1 = Choose the first icon.
iconurl1 = Choose the first icon url.
icon2 = Choose the first icon.
iconurl2 = Choose the first icon url.
icon3 = Choose the first icon.
iconurl3 = Choose the first icon url.
icon4 = Choose the first icon.
iconurl4 = Choose the first icon url.

[cpsocial background='rgba(0,0,0,0.7)' color='#ddd' margin='0px auto' shape='Square' shadow='None' transition='None' icon1='fa-facebook' iconurl1='https://facebook.com' icon2='fa-twitter' iconurl2='https://twitter.com' icon3='fa-youtube' iconurl3='https://youtube.com' icon4='fa-yelp' iconurl4='https://yelp.com']

The Success Story Properties

fontfamily = Choose a text typography.
fontsize = Adjust the text font size of items.
fontstyle = Adjust the text font style of items.
textcolor = Choose the text color.
imagesize = Choose from the presets; thumbnail, large, full etc.
imageshadow = Add a shadow to the image.
imageshape = Adjust the image shape; Semi-Round, Circle etc.
imagehover = Enable to hover zoom; input yes or Hover.
width = Choose the width of the element container.
padding = Add padding to the outer element container.
align = Adjust alignment of the element container.
lineheight = Adjust the space between text height.
textalign = Adjust text alignment; left, center or right.
textshadow = yes for textshadow and no to remove it.
containerbackground = Add a background color to the container.
background = Add a background to individual list items.
shadow = Add a shadow to the container element.
shape = Adjust the shape of the container element.
divider = Enable to add a sleek divider logic; input yes.
dividercolor = Choose a divider color.
filter = Add a filter effect on the overall element container; Hue, Invert, etc.
transition = Add a transition effect to the element container.
categories = Add your slug categories, separated with commas.
limit = Limit the amount of posts.
orderby = ASC or DESC.
order = Order by date, author, title etc.

[cpsuccessstories fontfamily='Andika' fontsize='' fontstyle='Regular' textcolor='' imagesize='medium' imageshadow='None' imageshape='Circle' imagehover='Yes' align='None' padding='' margin='' textalign='Center' textshadow='No' lineheight='' width='100%' transition='None' containerbackground='#a1d9dc' background='#a1d9dc' shadow='None' shape='Square' divider='Yes' dividercolor='#dddddd' filter='None' categories='' limit='' orderby='ASC' order='date'][/cpsuccessstories]

The Tabs's Properties

background = Choose the element container background color.
color = Choose the element container text color.
width = Choose the element container width.
height = Input the element container height.
margin = Custom position the element container.
shape = Adjust the shape of the element container.
shadow = Add a shadow to the container.
tabcolor = Choose the tab text color.
tabcoloractive = Choose the active tab text color.
tabbackground = Choose the tab background color.
tabbackgroundactive = Choose the active tab background color.
transitionin = Choose the transition in effect.
transitionout = Choose the transition out effect.
transitionlanding = Choose the transition in effect on landing.
title1 = Input the first title.
content1 = Input the first content.
title2 = Input the second title.
content2 = Input the second content.
title3 = Input the third title.
content3 = Input the third content.
title4 = Input the fourth title.
content4 = Input the fourth content.

[cptabs title1='Title 1' content1='Content 1' title2='Title 2' content2='Content 2' title3='Title 3' content3='Content 3' title4='Title 4' content4='Content 4' color='' background='#a1d9dc' margin='20px auto' shadow='None' shape='Square' width='100%' height='' tabcolor='' tabcoloractive='' tabbackground='#dddddd' tabbackgroundactive='#a1d9dc' transitionlanding='None' transitionin='bounceInDown' transitionout='bounceOutDown'][/cptabs]

The Toggler Properties

buttontitle = The button title.
buttonicon = The button icon.
buttontextcolor = Choose button text color.
buttonbackground = Choose button background color.
buttonbackgroundpreset = Choose from the button background preset.
buttonborderstyle = Select the button border style; dashed, dotted, solid, etc.
buttonborderwidth = Input the button border width.
buttonbordercolor = Choose the button border color.
buttontitlepadding = Adjust the button outer padding.
buttonshadow = Add a shadow to the button.
buttoncapacity = Adjust the button opacity to give it a glassy look.
textcolor = Choose the container text color.
background = Choose the container background color.
textshadow = Choose yes for textshadow or no to remove it.
fontsize = Input the overall font size.
fontweight = Adjust the font weight.
fontfamily = Choose a font family.
shape = Adjust the shape of the container.
shadow = Add a shadow to the container.
transition = Choose a transition in effect.
padding = Adjust the outer space of element container.
margin = Custom position the element container.
width = Choose the width of the element container.
lineheight = Adjust the height between texts.
aligncontainer = Align the container: alignleft, aligncenter or alignright.
aligncontent = Align content; left, right or center.

[cptoggler buttontitle='Toggle Image' buttonicon='None' buttontextcolor='#fff' buttonbackground='#dddddd' buttonbackgroundpreset='softyellow' buttonborderstyle='inset' buttonborderwidth='5' buttonbordercolor='#a1d9dc' buttoncapacity='fill up' buttontitlepadding='12px' buttonshadow='None' textcolor='#686868' background='#a1d9dc' textshadow='Yes' fontweight='300' fontsize='1.5em' fontfamily='Lato' shadow='' shape='Square' transition='None' padding='0' margin='0 auto' lineheight='' width='60%' aligncontainer='aligncenter' aligncontent='Center']

The Video Properties

title = The title located above the video.
youtube = Choose a youtube url to insert video.
youtubeautoplay = Autoplay youtube video.
vimeo = Insert vimeo url.
vimeoautoplay = Autoplay vimeo video.
vimeobyline = Video byline has more info about video.
vimeoportrait = Enalble vimeo portrait.
vimeotitle = Enable vimeo title.
mp4 = Add HTML5 mp4 video.
wemb = Add HTML5 webm video.
ogg = Add HTML5 ogg video.
controls = Add html5 controls.
mute = Mute the html5 video.
loop = Loop the html5 video.
html5autoplay = autoplay the HTML5 video.
iconfamily = Choose an icon for the video.
caption = The caption is located below the video.
background = Choose the element container background color.
textcolor = Choose the element container text color.
textshadow = Choose to enable or disable textshadow; no to remove yes to keep it.
fontfamily = Choose a font family for the overall container.
fontsize = Choose a font size for the overall container.
shadow = Add a shadow to the element container.
shape = Adjust the shape of the element container.
transition = Choose a transition in effect.
inview = Enable this; input on, element container appears only when in view.
poster = Add an image to load as a placeholder for the video.
padding = Input the outer padding of the element container.
width = Choose the width of the element container.
height = Choose the height of the element container.
aligncontainer = Align the container relative to page; alignleft, aligncenter or alignright.
aligncontent = Align content; left, center or right.

[cpvideo title="Disney Nature's Ocean" caption='HTML5 by VideoJS' poster='' youtube='' youtubeautoplay='' vimeo='' vimeoautoplay='' vimeobyline='1' vimeoportrait='1' vimeotitle='1' mp4='http://vjs.zencdn.net/v/oceans.mp4' webm='http://vjs.zencdn.net/v/oceans.webm' ogg='http://vjs.zencdn.net/v/oceans.ogv' html5autoplay='' controls='controls' loop='' mute='' width='60%' height='500' background='#a1d9dc' textcolor='#2b2b2b' iconfamily='None' fontfamily='Rajdhani' fontsize='2em' textshadow='No' shadow='None' shape='Semi-Round' transition='fadeIn' padding='20px' margin='0px auto' lineheight='' aligncontainer='aligncenter' aligncontent='Center'][/cpvideo]

codiePIE © 2019 - All-Rights-Reserved