Our brands

How To Use Live Css Skin Builder

live css skin builder

With Css Skin Builder, you can define css selector in a theme of site, then allow change style of all things in front end and save it to a CSS profile
Note:

Using Css Skin Builder, you can show a set of items in a compact space with an accordion layout.

I. Front-end Appearance

frontend theme

II. Configuration

1. Manage Live Css Tool

Please Go to Admin Panel >> Venustheme >> Live Css Editor >> Manage Live Css Tool

Manage-Live-Css-Tool

You can create unlimited selector for your live editor as below

manage-live-css-editor-2

The system provides you with these following function:

  • Show a list of all selectors item in the system
  • Mass Change Status/Delete Selector the list of items
  • Export to CSV/Excel
  • Add New Items
  • Import CSV
  • Quick Create Items

2. Add New Items

There are 2 options to do that

>> Option 1: Click on the “Add New Item” button on the top of page

add new item - live edioter

In the next page, you will see a form in which you can fill necessary information for form.

add-infomation-tab

Element Name: the name of item

Element Tab: Supports 3 types are:

** General
** Products
** Custom

Element Type: Support 6 types are:

1. Text

text- live-theme-edtor

2. Color Input

color-input--live-theme-editor

3. Image Pattern

image-patter-live-css-editor

4. Font Size

font-size-live-css-editor

5. Border style

border-style-live-theme-editor

6. Custom Css Code

css-code-live-theme-editor

Element Group: Each group is in proportion to each block on the page

  • Body Content
  • Top Bar
  • Header
  • Main Menu
  • Footer
  • Footer Top
  • Footer Center
  • Footer Bottom
  • Products
  • Powered
  • Modules in Sidebar
  • Module Blocks
  • Cart Blocks
  • Checkout
  • Custom

Css Selector: Input class name of html tag, each class is divided by comma“,”

Css Properties: List all css properties here. Each property is divided by comma “,”

Status: Turn on/Turn off

Position: the position of element in group

>> Option 2:
Click on the “Quick Create Items” button

quick-create-item

– 1 popup will appear, then you need to insert information for item, click on Save Batch to save information

– To add more item please click on Add Item

popup-image

3. Active live css tool on frontend

Go to Venustheme > Ves Live CSS Editor > Enable Live Css Tool, then change the field Enabled Live Css Tool to Yes

enable-live-css-editor

To allow Save Css Profile, please change the field Enabled Live Css to Yes. Profiles will store in skin folder of current theme – skin/frontend/THEME_PACKAGE/THEME_DEFAULT_LAYOUT/css/customize

Select Custom Css Profile: Go to Venustheme > Ves Live CSS Editor > Enable Live Css Tool, then select profile which you want apply for theme.

Related Posts

Share this Post!

Alena Dao
Alena Dao
“Good marketing makes the company look smart. Great marketing makes the customer feel smart.”

1 Comment

  1. Avatar
    Elancyl Cellu Slim November 10, 2015 at 3:25 am - Reply

    Thank you for the auspicious writeup. It in fact was a amusement
    account it. Look advanced to more added agreeable from you!

    By the way, how could we communicate?

Leave a Comment

Your email address will not be published.

Do NOT follow this link or you will be banned from the site!