Theme Files

Check File Integrity

Installing Themes

LapasPremium theme can be installed as a normal WordPress theme would. It is can be installed via WordPress Theme Uploader or via FTP method

Installing via wordpress uploader

Installing via wordpress uploader

The theme downloaded file needs to be extracted first before you can upload the extracted file via FTP

After the theme has succesfully uploaded into the server, you can activate the theme and upon activation.

Activating Theme

Extra Plugins

LapasPremium theme is bundled with several premium plugins that is required to be installed and activated to enable all the theme advanced features. You can follow these steps to install the bundled plugins easily.

Installing Plugins

Plugin installation page

Plugin installation process

Plugin Dependencies List

These plugins is required or recommended for the theme to work properly, it is bundled together with the theme and will be installed and activated when you finished the plugin installation process

Plugin Name Description
VicTheme Core The core plugin to provide the theme with VTCore Systems and HTML object classes.
VicTheme Headline Plugin for providing theme with headline elements, metabox and templating
Victheme Maps Plugin for providing theme with Google maps element, widgets for displaying maps, shortcode for building maps and integration to visual composer elements
Victheme Visual Bootstrap Plugin for linking visual composer with Bootstrap shortcodes provided by VicTheme Core
Victheme Visual Candy Plugin for linking visual composer with additional shortcodes provided by VicTheme Core
Victheme Visual Plus Plugin for providing visual composer with additional features such as advanced background selector for image, gradient and video
Victheme WooCommerce Plugin for providing extra functionality and shortcodes for WooCommerce
Victheme Demo Plugin for providing one click demo import capability to the theme
Victheme Slick Plugin for providing slick carousel widget
Victheme Portfolio Plugin for providing portfolio post type and visual elements
Display Widgets Plugin for providing managing widget visibility
Easy Theme And Plugin Upgrade Plugin extending wordpress plugin and theme install form for easy one click plugin and theme upgrade
Breadcrumb Navigation Plugin providing breadcrumb element
Contact Form 7 Plugin providing a simple form for contact form
Revolution Slider Plugin providing advanced slider elements
Layer Slider Optional plugin providing advanced slider elements replacing revolution slider
WooCommerce Plugin for providing the e-commerce part of this theme
Visual Composer Plugin providing easy drag and drop page builder based on shortcodes
Post Views Counter Plugin providing post view counter element.
WP Like Post Plugin providing element for liking wp post

Importing Demo Content

Importing demo content is only recommended to be performed in a brand new Wordpress installation. Importing on site with existing content and data can overwrite the old data.

Importing Demo Content

This import process will attempt to import and recreate the data as the demo site as close as possible. Some factor such as server connection, memory limit and PHP execution time will determine the success rate of the import process, especially when downloading image and video attachment.

Selecting Demo Site

You can choose different demo to import from, once imported the site will be locked with the selected demo and you can only change to different demo site after removing the content first.

Removing Demo Content

The undo process will remove all the mapped content that is created during importation, any recent changes to the imported content will be removed as well.

General Options

Logo Configuration

Favicon Icon

Header Options

Teaser Options

OffCanvas Options

Page Loading Options

Visibility Options

Footer Options

Page Not Found

Layout Options

Page Layout

Main Menu

Changing header will effect some of the schema and other configuration options as not all header style can handle the same grid regions or schema options. Make sure you resave the layout, general and schema options after changing the header style

Sidebar Position

This section in the layout options configuration form will allow you to the configure the position of sidebar element in different places

The settings will be honoured only with some the theme template, if the page is created using visual composer + visual composer template then the settings configured here will be ignored.

The sidebar will only visible if there are actually widgets inside them, a blank sidebar won't be displayed and the theme will make the content area beside the sidebar to use full width instead.

Header Region

The header grid region will mutate according to the header style settings. Please make sure this get reconfigured and resaved when you change the header style.

The grid settings will follow the Bootstrap grid rules as specified in the Bootstrap Grid System Rules. The total grid for each responsive level must not exceed 12.

Content Region

The grid settings will follow the Bootstrap grid rules as specified in the Bootstrap Grid System Rules. The total grid for each responsive level must not exceed 12.

Footer Region

The grid settings will follow the Bootstrap grid rules as specified in the Bootstrap Grid System Rules. The total grid for each responsive level must not exceed 12.

Full Footer Region

The grid settings will follow the Bootstrap grid rules as specified in the Bootstrap Grid System Rules. The total grid for each responsive level must not exceed 12.

Style Options

Color schema is a set of predefined CSS color styles and font styling that the theme provides, it is useful for user to change the theme color and styling easily by just selecting one of the pre-defined color schema.

Color Schemas

Using this section of the theme options, you can customize all the registered color schema values that will be applied to certain parts of the theme. For the remaining part that is not registered to color schema can be styled only via custom css.

Customize Schema

Shop Options

Shop configuration page will be visible when WooCommerce plugin is installed and activated, the panel will allow you to configure the theme templates for WooCommerce pages and elements.

Visibility

Product Archive

Product Single

Cart Single

Custom Css

The theme provides an easy way for user to input their custom css code via the Custom CSS GUI, the GUI menu entry of "Custom CSS" is found under the Wordpress Appearance menu.

Custom CSS

You can also define custom css in a file and use the theme css autoloader system to autoload the custom css file.

Custom CSS via File

Visual Composer

If you need to change the default configuration, eg. Allowing more content type that can use Visual Composer, You can visit the Visual Composer configuration page.

Configure Visual Composer

Visual Composer has 2 kind of edit mode, The Backend Editor and The Frontend Editor. Although both mode is supported by this theme, it is recommended to use the backend mode for reordering complex element.

Editing via Visual Composer

Use Custom Template - Visual Composer to get a clean blank template without the comment or sidebar region

Visual Composer Custom Template

Shortcodes

VicTheme Core plugin and bundled plugins provides all the shortcodes listed in this page

Bootstrap Alert Element

[bsalert
    alert_type="success|info|warning|danger"
    button="false|html entity for button text"
    id="some-id"
    class="someclass"]

  The label text

[/bsalert]
Attributes Valid Value Description
alert_type success, info, warning, danger The alert type color set as per bootstrap alert type color class
button false or text or html entity The dismissisable button
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Badge

[bsbadge id="some-id"
    class="someclass"]

The label text

[/bsbadge]
Attributes Valid Value Description
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Column

[bscolumn
    tag="div or other valid html tags"
    columns_mobile="X"
    columns_tablet="X"
    columns_small="X"
    columns_large="X"
    offset_mobile="X"
    offset_tablet="X"
    offset_small="X"
    offset_large="X"
    push_mobile="X"
    push_tablet="X"
    push_small="X"
    push_large="X"
    pull_mobile="X"
    pull_tablet="X"
    pull_small="X"
    pull_large="X"

    /** The following only available if victheme_bootstrap is enabled */
    isotope_child="none|bs-isotope-item|bs-isotope-stamp"
    textalign="left|center|right"
    fontcolor="css color font value"
    css_animation="top-to-bottom|bottom-to-top|left-to-right|right-to-left|appear"
    attributes_id="css attributes id"
    class="css classes"
    ]

 Content or shortcodes.

 [/bscolumn]
Attributes Valid Value Description
tag valid html tag, default to div HTML tags for wrapping the element.
isotope_child none|bs-isotope-item|bs-isotope-stamp This options will only take effect if the parent bsrow is configured to be the isotope parent wrapper, by setting as isotope item, the layouting will use isotope js to position the column elements using position absolute.
textalign left|center|right this options will add additional css class to the column wrapper to format the child element text alignment, it will rely on bootstrap text-* alignment class
fontcolor valid css color value this options will add inline style to format the text color of the element and its child element, due to the nature of css, some child element will not receive the color style if they has a higher order or overriden css rule attached to it
css_animation top-to-bottom|bottom-to-top|left-to-right|right-to-left|appear this options will only work if visualcomposer plugin is activated since it will use css class from visual composer stylesheet
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class
mobile 1 - 12 Column size for class col-xs-*
tablet 1 - 12 Column size for class col-sm-*
small 1 - 12 Column size for class col-md-*
large 1 - 12 Column size for class col-lg-*
mobile_offset 1 - 12 Column size for class col-xs-offset-*
tablet_offset 1 - 12 Column size for class col-sm-offset-*
small_offset 1 - 12 Column size for class col-md-offset-*
large_offset 1 - 12 Column size for class col-lg-offset-*
mobile_push 1 - 12 Column size for class col-xs-push-*
tablet_push 1 - 12 Column size for class col-sm-push-*
small_push 1 - 12 Column size for class col-md-push-*
large_push 1 - 12 Column size for class col-lg-push-*
mobile_pull 1 - 12 Column size for class col-xs-pull-*
tablet_pull 1 - 12 Column size for class col-sm-pull-*
small_pull 1 - 12 Column size for class col-md-pull-*
large_pull 1 - 12 Column size for class col-lg-pull-*

Bootstrap GylphIcon

[bsglyphicon icon="icon"]
Attributes Valid Value Description
icon valid bootstrap glyph icon name glyphicon icon name without the icon- preffix

Bootstrap Header

[bsheader
   tag="h1-h6"
   small="some text displayed as small text"
   id="some-id"
   class="someclass"]

The main title text

[/bsheader]
Attributes Valid Value Description
tag h1 - h6 The heading text html tags
small text The small text after the main heading
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Jumbotron

[bsjumbotron
    fullsize="true|false"
    id="some-id"
    class="someclass"]

some content can be inserted here

[/bsjumbotron]
Attributes Valid Value Description
fullsize true or false toggle to show the jumbotron element in full size or normal size
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Label

[bslabel
    label="default|primary|success|info|warning|danger"
    id="some-id"
    class="someclass"]

The label text

[/bslabel]
Attributes Valid Value Description
label success, info, warning, danger, default, primary The label color set as per bootstrap alert type color class
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap List Group

[bslistgroup
    id="some-id"
    class="someclass"
    mode="ul|div"
]

  [bslistobject
    type="li|a"
    active="true|false"
    mode="success|warning|info|danger"
    badge="some badge text"
    heading="some heading text"
    href="the url to link this object"]

    some content

  [/bslistobject]

[/bslistgroup]
Attributes Valid Value Description
mode ul | div
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap List Object

[bslistobject
    type="li|a"
    active="true|false"
    mode="success|warning|info|danger"
    badge="some badge text"
    heading="some heading text"
    href="the url to link this object"]

  somecontent

[/bslistobject]
Attributes Valid Value Description
type ul | a the type must follow the parent listgroup mode
mode success, info, warning, danger The color set as per bootstrap color class
active true or false Set this to active state
badge text the text will tranformed into bootstrap badge element
heading text the text for the list heading
href valid url link the object to the url

Bootstrap Media List

[bsmedialist
    id="some-id"
    class="someclass"]

  [bsmediaobject type="li" img="x" text="some header text"]somecontent[/bsmediaobject]
  [bsmediaobject type="li" img="x" text="some header text"]somecontent[/bsmediaobject]
  [bsmediaobject type="li" img="x" text="some header text"]somecontent[/bsmediaobject]

[/bsmedialist]
Attributes Valid Value Description
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Media Object

[bsmediaobject
    type="li|div"
    text="content text heading"
    pull="left|right"
    img="WP attachment image id or image src url"
    id="some-id"
    class="someclass"]

Some contents, other shortcode will be processed automatically

[/bsmediaobject]  
Attributes Valid Value Description
type li or div use li if this shortcode is wrapped within the bsmedialist
text string of text string of text for the content heading
pull left or right the image alignment to the left or right of content
img url to image or wordpress attachment id the image source
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Panel

[bspanel
    heading="text to serve as the panel heading"
    id="some-id"
    class="someclass"]

Some contents, other shortcode will be processed
automatically.

[/bspanel]
Attributes Valid Value Description
heading string of text text to be served as the panel heading
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Row

[bsrow
  tag="div or other valid html tag"
  id="some-id"
  class="someclass"
  data-something="something"

  /** The following only available if victheme_visualbootstrap plugin is enabled */
  style="valid html inline style"
  fontcolor="valid css color value"
  textalign="left|center|right"
  isotope="none|equalHeight|fitRows|masonry|packery"
  css_animation="top-to-bottom|bottom-to-top|left-to-right|right-to-left|appear"
  ]

 some content, preferably the [bscolumn] shortcode

[/bsrow]
Attributes Valid Value Description
tag valid html tag the html tag used for wrapping this element
data-* string value this will create a html5 data-* attributes
style valid html inline style allows user to inject html inline styling
fontcolor valid css color value allow user to define the default text color for the element and its children
textalign left|center|right this options will add bootstrap text-* css class for formatting the element and its children text direction
isotope none|equalHeight|fitRows|masonry|packery This options will format the row and its children to be an isotope js element, the children must have isotope marker enabled too for this to work properly.
css_animation top-to-bottom|bottom-to-top|left-to-right|right-to-left|appear this options will only work if visualcomposer plugin is activated since it will use css class from visual composer stylesheet
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Well

[bswell size="small|normal|large"
        id="some-id"
        class="someclass"]

some content can be inserted here

[/bswell]
Attributes Valid Value Description
size small or normal or large the size for the well element
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Bootstrap Button

[bsbutton
    size="lg|sm|xs"
    mode="default|primary|success|info|warning|danger"
    href="valid url"
    target="_parent|_blank|_self|_top"
    id="some-id"
    class="someclass"]

  Some text or other embedded shortcode can be placed here

[/bsbutton]
Attributes Valid Value Description
size lg|sm|xs the size for the button element
mode default|primary|success|info|warning|danger The styling of the button element accordingly to bootstrap button coloring scheme
href Valid url the target url to open when button is clicked
target _parent|_blank|_self|_top the target window that the button should trigger when clicked
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

FontAwesome

[fontawesome
    id="some-id"
    class="someclass"
    font="fontsize-in-px-or-em"
    icon="fontawesome-icon-name"
    border="boolean"
    spin="boolean"
    flip="horizontal|vertical"
    shape="custom-wrapper-shape"
    position="left|right|center"
    color="hex-color-for-icon"
    border_color="hex-color-for-border"
    background="hex-color-for-background"
    size="fa-font-size eg lg|2x|3x|4x|5x"
    rotate="90|180|270"
    padding="padding in pixel"
    margin="margin in pixel"
 ]
Attributes Valid Value Description
font font size in px or em Manual overriding the icon size by specifying the font size in pixel or em.
icon fontawesome icon name Specify the fontawesome icon name without the fa- prefix.
border true or false Turn on or off the border in the font wrapper element
spin true or false Turn on or off the CSS3 rotate options for the icon
flip horizontal or vertical Flip the font vertically or horizontally
shape circle or diamond Shape for the font icon wrapper
position left or right or center the icon position relative to parent, left and right will float the element while center will assume 100% width and centers the icon
color CSS color hex value Color value for the icon element
border_color CSS color hex value Color value for the icon border element
background_color CSS color hex value Color value for the icon background element
size lg or 2x or 3x or 4x predefined icon size, this will be overriden if font tag is specified.
rotate 90 or 180 or 270 rotate the icon element using CSS3 transformation
padding css padding rule give padding to the font element. example : 10px 10px 10px 10px
margin css margin rule give margin to the icon element. example : 0px 10px 0px 10px
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

jQuery Flip Countdown

[jqflipcountdown
   showhour="true|false"
   showminute="true|false"
   showsecond="true|false"
   am="true|false"
   tzoneoffset="numeric"
   speedflip="numeric"
   period="numeric"
   autoupdate="true|false"
   startdate="yyyy-mm-ddThh:ss"
   size="xs|sm|md|lg"
]
Attributes Valid Value Description
showhour true or false Show or hide the hour element
showminute true or false Show or hide the minute element
showsecond true or false Show or hide the second element
am numeric set the timezone offset number. example GMT +3 = 3
tzoneoffset horizontal or vertical Flip the font vertically or horizontally
speedflip numeric in miliseconds the flipping animation speed
period numeric in miliseconds Flipping timer delay before recalculating
startdate date in the format of yyyy-mm-ddThh:ss the starting time for the flipping
size xs | sm | md | lg the size of the flipping element
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

jQuery Flipster

 [jqflipster
   class="some class"
   id="someid"
   categories="true|false"
   style="carousel|cover"
   start="delta|center"
   enablekeyboard="true|false"
   enablemousewheel="true|false"
   enabletouch="true|false"
   enablenav="true|false"
   enablenavbuttons="true|false"
]

   [jqflipcontent
     links="Link URL"
     image="image src url|attachment id"
     caption="String forcaption text"
     category="String for category"
   ]


[/jqflipster]
Attributes Valid Value Description
categories true or false build or not to build the categorized links
style carousel or cover choose between carousel mode or coverflow mode
start numeric or "center" string choose the children to be the starting element, "center" will auto detect the center of the element or use numeric value to manually choose the starting center of the element
enablekeyboard true or false enable navigation by keyboard arrows
enabletouch true or false enable navigation by dragging on tablet
enablenav true or false enable navigation dots
enablekeyboard true or false enable navigation by keyboard arrows
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

jQuery Flipster

[jqflipcontent
    links="Link URL"
    image="image src url|attachment id"
    caption="String forcaption text"
    category="String for category"
]
Attributes Valid Value Description
links valid url string url to link the content to
image image source url or wordpress image attachment id the source of the content image
caption string of text the caption for the image content
category string of text the category for this content, this will be grouped and used to group the content if the parent element has categories attributes enabled
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

jQuery Dial (Knobs)

[jqknob
   width="xxxpx"
   displayinput="true|false"
   value="numeric"
   cursor="true|gauge"
   thickness="0.x"
   fgcolor="#xxxxxx"
   displayprevious="true|false"
   angleoffset="0 - 360"
   linecap="butt|round"
   anglearc="0 - 360"
   step="numeric"
   min="numeric"
   max="numeric"
   readonly="true|false"
   inputcolor="text color"
]
Attributes Valid Value Description
width numeric plus px eg. 100px the total width of the knob element in pixels
displayInput true or false display or hide the input elements
value numeric the actual value for the dial
cursor numeric or string "gauge" display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
thickness 0.1 - 1 the dial thickness as 1 is the thickest and 0.1 is the thinnest
fgcolor CSS Hex color value the dial color
displayprevious true or false display the previous value, only applicable if read only is set to false
angleoffset 0 - 360 starting angle in degrees | default=0.
linecap butt or round gauge stroke endings.
anglearc 0 - 360 arc size in degrees | default=360
step numeric step size
max numeric maximum value
min numeric minimum value
readonly true or false disable changing value
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

jQuery Shuffled Letters

[jqshuffleletter
   step="x"
   fps="x"]

  The shuffled text

[/jqshuffleletter]
Attributes Valid Value Description
step numeric the animation steps in miliseconds
fps numeric the frame per seconds for animation
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Slick Carousel Element

[wpcarousel
   class="someclass"
   id="someid"
   accessibility="true|false"
   autoplay="true|false"
   arrows="true|false"
   centermode="true|false"
   draggable="true|false"
   fade="true|false"
   pauseonhover="true|false"
   infinite="true|false"
   swipe="true|false"
   touchmove="true|false"
   vertical="true|false"
   cssease="ease|ease-in|ease-out|ease-in-out"
   easing="swing|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|..."
   lazyload="ondemand|progressive"
   autoplayspeed="Number in miliseconds"
   centerpadding="xxpx"
   slidestoshow="number"
   slidestoscroll="number"
   speed="number in miliseconds"
   touchthreshold="number"
 ]

   // For generic content
   [wpcarouselcontent]
     Some content here additional shortcodes is allowed
   [/wpcarouselcontent]

   // For testimonial
   [wptestimonial
     image="wp attachment id"
     name="string for name"
     position="string for position"]
       Some content for testimonial, additional shortcode inside this tag is allowed
   [/wptestimonial]

   // For client logo
   [wpclientlogo
     image="wp media attachment id"
     href="the url to link the image to"
   ]

[/wpcarousel]
Attributes Valid Value Description
autoplay true or false enable or disable the autoscrolling feature
arrows true or false display or hide the navigation arrow
centermode true or false enable the center is larger than other mode
draggable true or false mouse drag to scroll content
fade true or false use fading instead of sliding for animation
pauseonhover true or false pause the scrolling on mouse hover
infinite true or false display the previous value, only applicable if read only is set to false
swipe true or false swipe move to scroll the content
touchmove true or false touch to scroll the content
vertical true or false enable or disable the vertical scrolling mode
cssease ease or ease-in or ease-out or ease-in-out CSS3 Easing value
easing valid jQuery easing value define custom easing value for scrolling animation
lazyload ondemand or progressive lazy loading images
autoplayspeed number in miliseconds the autoplay pause time before scrolling again
centerpadding number + px example: 20px the padding size for the centered element
slidetoshow number the maximum number of slide to show at once in the frame
slidetoscroll number the number of slide to move on sliding action
speed number in miliseconds the sliding speed in miliseconds
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Slick Carousel Generic Content

[wpcarouselcontent]
   Some content here, additional shortcodes will be processed automatically.
[/wpcarouselcontent]

Slick Carousel Single Image Content

[wpcarouselcontent]
   Some content here, additional shortcodes will be processed automatically.
[/wpcarouselcontent]
Attributes Valid Value Description
image Wordpress attachment id the image source for the carousel content.
href valid url the url to link the imate to.
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Slick Carousel Testimonial Content

[wptestimonial
   image="wp attachment id"
   name="string for name"
   position="string for position"]
     Some content for testimonial, additional shortcode inside this tag is allowed
[/wptestimonial]
Attributes Valid Value Description
image Wordpress attachment id the image source for the carousel content.
name string the testimonee name
position string the testimonee job position
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Contact Information

[wpcontactinfo
   class="someclass"
   id="someid"
   icon="Valid fontawesome icon class name without fa- prefix"
   label="String for contact label"
   separator="String for separator"
   text="String for contact text"
]
Attributes Valid Value Description
icon valid fontawesome class without fa- prefix The icon on the side of the text
label string The text for the label element
separator string The text separator. for example : ":"
text string The text for the contact info
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Social Link Element

[wpsociallink
   class="someclass"
   id="someid"
   tumblr="Valid Url for link"
   facebook="Valid Url for link"
   google-plus="Valid Url for link"
   pinterest="Valid Url for link"
   linkedin="Valid Url for link"
   github="Valid Url for link"
   twitter="Valid Url for link"
   flickr="Valid Url for link"
   youtube="Valid Url for link"
   dribble="Valid Url for link"
   instagram="Valid Url for link"
   weibo="Valid Url for link"
]
Attributes Valid Value Description
social network string valid url link to point to the social network
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Social Sharing Links

[wpsocialshare
   class="someclass"
   id="someid"
   google="true"
   linkedin="true"
   pinterest="true"
   facebook="true"
   twitter="true"
]
Attributes Valid Value Description
social network string valid url link to point to the social network
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Google Maps

[google_maps
    address="String of valid postal address for geocoding"
    longitude="Longitude number"
    latitude="Latitude number"
    width="Map width in pixel"
    height="Map height in pixel"
    responsive="true|false"
    zoom="15"
    zoom_control="true|false"
    zoom_control_position="TOP_CENTER|TOP_LEFT|TOP_RIGHT|LEFT_TOP|RIGHT_TOP|LEFT_CENTER|RIGHT_CENTER|LEFT_BOTTOM|RIGHT_BOTTOM|BOTTOM_CENTER|BOTTOM_LEFT|BOTTOM_RIGHT"
    zoom_control_style="DEFAULT|LARGE|SMALL"
    pan_control="true|false"
    pan_control_position="TOP_CENTER|TOP_LEFT|TOP_RIGHT|LEFT_TOP|RIGHT_TOP|LEFT_CENTER|RIGHT_CENTER|LEFT_BOTTOM|RIGHT_BOTTOM|BOTTOM_CENTER|BOTTOM_LEFT|BOTTOM_RIGHT"
    map_type_control="true|false"
    map_type_control_position="TOP_CENTER|TOP_LEFT|TOP_RIGHT|LEFT_TOP|RIGHT_TOP|LEFT_CENTER|RIGHT_CENTER|LEFT_BOTTOM|RIGHT_BOTTOM|BOTTOM_CENTER|BOTTOM_LEFT|BOTTOM_RIGHT"
    map_type_control_style="DEFAULT|DROPDOWN_MENU|HORIZONTAL_BAR"
    scale_control="true|false"
    scrollwheel="true|false"
    streetview="true|false"
    maptype="HYBRID|ROADMAP|SATELLITE|TERRAIN"
    draggable="true|false"
    disable_zoom="true|false"
    title="string to act as the hover title, this will only works if no marker is defined"
    html="string to act as the popup content, this will only works if no marker is defined"
  ]

    [google_marker
      center="true|false"
      address="string valid address for geocoding"
      latitude="fallback latitude if geocoding failed"
      longitude="fallback longitude if geocoding failed"
      title="the hover title for the icon"
      icon="the full url for the icon image"
    ]

    some content for the popup content
    [/google_marker]

  [/google_maps]
Attributes Valid Value Description
address valid address format address to be converted to longitude and latitude by google maps
longitude valid longitude Longitude for the center of the map
latitude valid latitude Latitude for the center of the map
width numeric the initial width of the maps in pixel
height numeric the initial height of the maps in pixel
responsive true or false set the maps dimension to be responsive and follow the width of its container
zoom numeric the maps zoom level
zoom_control true or false display or hide the zoom control
zoom_control_position TOP_CENTER | TOP_LEFT | TOP_RIGHT | LEFT_TOP | RIGHT_TOP | LEFT_CENTER | RIGHT_CENTER | LEFT_BOTTOM | RIGHT_BOTTOM | BOTTOM_CENTER | BOTTOM_LEFT | BOTTOM_RIGHT the position for the zoom control
zoom_control_style DEFAULT | LARGE | SMALL set the zoom control styling
pan_control true or false display or hide the pan control
pan_control_position TOP_CENTER | TOP_LEFT | TOP_RIGHT | LEFT_TOP | RIGHT_TOP | LEFT_CENTER | RIGHT_CENTER | LEFT_BOTTOM | RIGHT_BOTTOM | BOTTOM_CENTER | BOTTOM_LEFT | BOTTOM_RIGHT the position for the zoom control
map_type_control true or false display or hide the map type control
map_type_control_position TOP_CENTER | TOP_LEFT | TOP_RIGHT | LEFT_TOP | RIGHT_TOP | LEFT_CENTER | RIGHT_CENTER | LEFT_BOTTOM | RIGHT_BOTTOM | BOTTOM_CENTER | BOTTOM_LEFT | BOTTOM_RIGHT the position for the zoom control
map_type_control_style DEFAULT | DROPDOWN_MENU | HORIZONTAL_BAR the map type control style
maptype HYBRID | ROADMAP | SATELLITE | TERRAIN the map type
scale_control true or false display or hide the scale control
scrollwheel true or false enable map zooming using mouse scroll
streetview true or false enable or disable street view
draggable true or false enable or disable map draggable feature
disable_zoom true or false enable or disable map zooming on click
title string string to act as the hover title, this will only works if no marker is defined
html string string to act as the popup content, this will only works if no marker is defined
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

Google Marker

[google_marker
      center="true|false"
      address="string valid address for geocoding"
      latitude="fallback latitude if geocoding failed"
      longitude="fallback longitude if geocoding failed"
      title="the hover title for the icon"
      icon="the full url for the icon image"
    ]

    some content for the popup content
    [/google_marker]
Attributes Valid Value Description
icon valid url the full url for the icon image
address valid address format address to be converted to longitude and latitude by google maps
longitude valid longitude Longitude for the center of the map
latitude valid latitude Latitude for the center of the map
title string string to act as the hover title, this will only works if no marker is defined
id valid css id optional css id
class valid css class multiple classes can be separated by space or comma optional css class

CSS Helper Class

The CSS Helper classes is located at assets/theme/css/styleclass.css and it is designed for use in Visual Composer. The classes can help you to format the Visual composer element by adding additional class to its element.

Headline Title

.headline-title

Headline Sub-Title

.headline-subtitle

Element Title

.element-title

Extra Large Title

.title-extra-large

Large Title

.title-large

Small Title

.title-small

Diamond Shape

.diamond 

Circle Shape

.rounded

Round Edge

.round-edge

Number List

.number-list 

Hiding form label

.label-hidden label 

No Padding

.nopadding 

Right Padding

.nopadding 

Remove Left padding

.nopaddingleft

Remove Right padding

.nopaddingright

Text Uppercase

.text-uppercase 

Extra Bold

.text-extra-bold 

Extra Large

.text-extra-large 

Bold

.text-bold or .bold 

Text Large

.text-large

Text Medium

.text-medium

Text Small

.text-small

Text Italic

.text-italic

Text Light

.text-light

Children Inline

.children-inline

Display Inline

.display-inline or .pull-inline

Vertical Middle

.vertical-middle

Vertical Top

.vertical-top 

Vertical Bottom

.vertical-bottom

Clear Both

.clearboth

Box Shadow

.box-shadow

No Overflow

.no-overflow

Action System

The action still utilizes WordPress native hook action system and you can still use the native WordPress action system if you don't want to use the VTCore actions system.

Action Hooks

/**
 * Example class for hooking into init action
 * If the actions name has underscore in it (_), the class name must
 * use double underscore in order for the autoloader class able find the
 * right file.
 *
 * Example :
 *  Action name : init_with_underscore
 *  Class name  : VTCore_Zeus_Actions_Init__With__Underscore
 *  File name   : init_with_underscore.php
 *
 * Arguments
 * ---------
 * if the actions caller has multiple function arguments, you must specify
 * the argument total number in the $arguments and pass the arguments
 * to the actions methods
 *
 * Example :
 *   Action caller           :  do_action('init_with_underscore', $argument1, $argument2, $argument3)
 *   The class variable      :  private $argument = 3;
 *   The class action method :  public function hook($argument1 = NULL, $argument2 = NULL, $argument3 = NULL) {}
 *
 * Weight
 * ------
 * You can specify the weight for the actions by adding $weight variable to
 * the class, This weight will be applied to the entire class.
 *
 * Example :
 *   Desired weight     : 20
 *   The class variable : private $weight = 20;
 *
 * @see VTCore_Wordpress_Models_Hook
 */
class VTCore_Zeus_Actions_Init
  extends VTCore_Wordpress_Models_Hook {

  // The default argument settings
  private $argument = 1;


  // The default weight settings
  private $weight = 10;

  // The method that will be invoked by
  // WordPress action hook
  public function hook() {

    // Insert the code block for this action as usual.

  }
}

Filter System

The filter system still utilizes WordPress native hook filter system and you can still use the native WordPress filter system if you don't want to use the VTCore filtering system.

Filters Hook

/**
 * Example class for hooking into the_excerpt filter
 * If the filter name has underscore in it (_), the class name must
 * use double underscore in order for the autoloader class able find the
 * right file.
 *
 * Example :
 *  Filter name : filter_with_underscore
 *  Class name  : VTCore_Zeus_Filters_Init__With__Underscore
 *  File name   : init_with_underscore.php
 *
 * Arguments
 * ---------
 * if the filter caller has multiple function arguments, you must specify
 * the argument total number in the $arguments and pass the arguments
 * to the filter methods
 *
 * Example :
 *   Filter caller           :  apply_filters('init_with_underscore', $argument1, $argument2, $argument3)
 *   The class variable      :  private $argument = 3;
 *   The class filter method :  public function hook($argument1 = NULL, $argument2 = NULL, $argument3 = NULL) {}
 *
 * Weight
 * ------
 * You can specify the weight for the filter by adding $weight variable to
 * the class, This weight will be applied to the entire class.
 *
 * Example :
 *   Desired weight     : 20
 *   The class variable : private $weight = 20;
 *
 * @see VTCore_Wordpress_Models_Hook
 */
class VTCore_Zeus_Filters_The__Excerpt
extends VTCore_Wordpress_Models_Hook {

  // The default argument settings
  private $argument = 1;


  // The default weight settings
  private $weight = 10;


  // This method will be invoked by WordPress Filter
  public function hook($excerpt = NULL) {
    return $excerpt;
  }
}

Schema System

This is intended for developer to create a new custom color schema programatically, it is not required for normal user to perform this method as the theme already provides a GUI for customizing color schema.

Schema Class

/**
 * Example Schema
 * This example schema has following data :
 *   Schema machine name    : example
 *   Folder name            : schemas/example
 *   Class name             : VTCore_Zeus_Schemas_Example_Register
 *   File name              : schemas/example/register.php
 *
 *
 */
class VTCore_Zeus_Schemas_Example_Register
extends VTCore_Zeus_Schema_Base {

  // This method is used to define the color schema properties
  protected function setContext() {

    $this->context = array(

      // Define the color schema information properties
      'schema' => array(
        'id' => 'example',
        'name' => __('Example schema', BASE_THEME),
        'color' => '#0c88fc',
        'description' => __('This is an example color schema.', BASE_THEME),
      ),

      // Define the color schema sections. this will be used in the
      // Theme options GUI and format the sections as an accordion entry
      'sections' => array(
        'global' => array(
          'title' => __('Style my element', BASE_THEME),
          'active' => 'example',
        ),
      ),

      // Define the color information.
      'color' => array(
        'my_custom_color_one' => array(
          'title' => __('My Custom Color One', BASE_THEME),
          'description' => __('Color for my custom element one' , BASE_THEME),
          'parent' => 'example',
          'selectors' => array(
            '.my-custom-css-selector',
            '#another-custom-css-selector',
          ),

         // Rules for background
        'background-color' => '',
        'background-gradient' => '',
        'background-image' => '',
        'background-repeat' => '',
        'background-size' => '',
        'background-position' => '',

        // Rules for fonts
        'font-color' => '',
        'font-family' => '',
        'font-size' => '',
        'font-style' => '',
        'font-weight' => '',
        'font-variant' => '',
        'font-stretch' => '',


        // Rules for border
        'border-width' => '',
        'border-style' => '',
        'border-color' => '',
        'border-radius' => '',

        // Rules for links, all the selector will be appended with "a"
        // to target the links
        'link-color' => '',
        'link-hover' => '',
        'link-focus' => '',
        'link-visited' => '',
        'link-border-color' => '',


        // Rules for formatting the h1 - h6 elements, all the selectors
        // will be appended h1 - h6 to target the heading elements
        'heading-color' => '',
        'heading-family' => '',
        'heading-style' => '',
        'heading-variant' => '',
        'heading-stretch' => '',
        'heading-weight' => '',
        ),

      ),
    );


    return $this;
  }

}

Custom Templating

This is intended for developer to create a new custom color schema programatically, it is not required for normal user to perform this method as the theme already provides a GUI for customizing color schema.

Custom Templating

Asset System

Asset system is a system for easily managing and loading additional CSS and Javascript file easily.

Assets System

Cache System

The Theme implements advanced caching system for assets, class, css, js and object which is auto enabled via VicTheme Core Plugin..

Clearing Cache

Credits

Credits

Thank you for the plugins authors that made this theme possible

  • JavaScripts

    • jQuery Easing Plugin - George McGinley Smith
    • jQuery EqualHeight - CSS Tricks
    • jQuery FotoRama - Artem Polikarpov
    • jQuery $.GoMap - pittss
    • jQuery hcsticky - Željko Galetić
    • jQuery Isotope - David DeSandro
    • jQuery resizeEvents - ericprieto
    • jQuery SlickNav - Josh Cope
    • jQuery toTop - Matt Varone
    • jQuery Vertical Center - VicTheme Team
    • jQuery VideoBg - Syd Lawrence
    • jQuery Viewport - Mika Tuupola
    • jQuery Flipcountdown - Chupurnov Valeriy
    • jQuery Flipster - Adrien Delessert
    • jQuery Slick Carousel - Ken Wheeler
    • jQuery Knob - Anthony Terrien
    • jQuery Bootstrap Colorpicker - Stefan Petre
    • jQuery Bootstrap Switch - Mattia Larentis
    • jQuery Jvette - Explodybits
    • jQuery JVFloat - Maman
    • jQuery SmoothScroll - kswedberg
    • jQuery Elevate Zoom - Elevate Web
    • jQuery NiceScroll - InuYaksa
  • CSS

    • BootStrap Framework - BootStrap Team
    • FontAwesome - Dave Gandy
  • Fonts

    • Roboto - Google Android Design
    • FontAwesome - Dave Gandy