[print-me]

Style Kit Guide

This guide is intended to help novices and pros alike, but assumes you know a little CSS. It offers best practices advice aimed at Style Kits intended for sale or client projects with regard to format and naming conventions. If you’re just getting started with using CSS to customize WordPress sites, see How to Customize Your Site with CSS

What is a Style Kit?

Style Kits are mainly some CSS styles and an exported page layout. They offer you a quick and inexpensive way to add custom styling and pre-built layouts to your Layers site without needing a full child theme.

Style Kits are comprised of three main parts:

  • Page builder layouts and their widget’s settings
  • Custom CSS code
  • The content (XML)

We offer a sample style kit at the end of this article so you can see how they work and are put together. Use the menu at right to jump directly to Importing if you just need help setting up an existing Style Kit.

Creating StyleKits

Setup Your Layers Page Layouts

We recommend starting on a fresh WordPress install with no pre-existing content. We also recommend setting up your demo on a live server before doing the export so others can reference what the intended outcome should be, and images come over in the content import without additional tweaking or manual upload.

  1. Build your pages starting with a blank page. When designing for the general public, only Layers widgets should be used, as 3rd Party widget data is not saved by our export function.
  2. Add custom styling that is specific to the widget or page layout using the Advanced option of the widget Design Bar.
  3. On the Page Editor view in your admin, ensure the page’s Title and Slug match and clearly describe the kind of layout it is. Example: Portfolio, Features, Team Members, etc.
  4. Export the page

If your kit is intended for commercial distribution, you must setup a demo on a live server before exporting the data. This ensures any demo images can be transferred by the remote server and saves your end-users the extra step of importing the image assets manually.

The below steps outline how to export individual builder page layouts for backup, or to create a preset as part of a Style Kit.

  1. From the WordPress Dashboard, click on Layers → Layers Pages
  2. Click the page you wish to export
  3. Click the Export button at bottom-left
    • export-page
  4. Choose where you wish to save the file, edit the file name if desired, and click Save
  5. You will have a .json file on your hard drive containing the exported layout.

 

Build Your Custom CSS

We strongly recommend using the DevKit plugin to help generate Layers-compliant CSS, especially if you intend to modify the mobile views. This incredibly useful plugin enhances the customizer with extended CSS editing and responsive mode testing. Learn More here

The following will help you decide where to best place custom styling and if the Advanced option in the widget should be used vs the main CSS area.

Advanced Widget CSS

Each widget has an Advanced option on the Design Bar for creating a custom class. This class is added to the main container of the widget, so any properties applied to the class alone will only affect that container (or any other widget with the same class assigned) and not necessarily everything in it. This allows you to apply a style to just this widget or page layout.

This is the only way you can add a custom class name to builder elements in Layers without touching HTML. Without it,  you would need to use much more complex selectors to target specific elements or widgets. Targeting elements in CSS by ID is also not a good idea, as those IDs may be in use already with inline styles, anchors or Javascript.

Best of all, custom classes and styles added to the Advanced options in widget setups are saved along with the other data when exporting a page file and make importing the styling aspect a little more foolproof. See our Advanced Custom CSS Tutorial for a detailed walkthrough of using this feature to customize your presets. Our example kit uses advanced techniques to replace the large button in widgets with an app store image. Note that this requires extra work by whoever imports the kit to change the file path in the CSS and is intended to demonstrate the potential and limitations kits have compared to child themes.

Custom CSS added to the main CSS area is not associated with any one page, so needs manual export and import, explained next.

Custom CSS

Custom CSS is used to add global custom styling to the CSS tab under the main Customizer menu if you need to provide additional styling changes.

When building your custom CSS, keep the following in mind:

  • Never copy entire styles from the inspector or core stylesheets – your declarations should contain only changed properties and new additions.
  • Use waterfall formatting to make it easier to read and edit.
  • Lint your CSS before finalizing it and saving it to your kit.
  • If your custom css is really extensive, it may be time to consider a child theme. Style kit CSS should be as simple as possible and focused on basic styling changes like colors or element styles. It should not contain advanced CSS like transforms, layout hacks or hard-coded font sizing that might interfere with the user’s font or widget choices in the normal Layers options.

Kits intended for commercial distribution should not include Custom CSS that requires the end-user to edit image or font paths. Make sure any assets like this are optional with clear instructions, or linked to a hosted file.

To prepare your Custom CSS for your kit, simply copy it into a plan-text document named css.txt. Mac Users, hit Shift+Cmd+T in TextEdit to switch to plain-text mode.

Export WordPress Content

Including a content XML is an important step in ensuring the base pages used for your presets and the images used in the widgets can be easily imported by the user. Before exporting your content, check the following:

  • There are no tags under Posts →Tags
  • If your content includes demo posts, ensure any categories you created are relevant to your kit, otherwise create only one, such as “Demo”. This makes customization and cleanup of the content easier for end-users and reduces the risk of having a duplicate category with a bad slug.
  • Pages other than Layers builder pages should not use “Home”, “Portfolio”, “Shop” or “Blog” as the page title.
  • Empty the trash on your posts and page indexes
  • Remove all comments
  • Ensure all plugins are deactivated to avoid import of CPT data, etc

If your kit is intended for commercial distribution, you should setup a demo on a live server before exporting the data. This ensures any demo images can be transferred by the remote server and saves your end-users the extra step of importing the image assets manually.

Export the content from Tools → Export and name the file your_kit-content.xml where your_kit is your kit name. Example: kittn-content.xml

Create the Readme

Your readme should include general information about you as the author, a link to the demo, if one exists, and some basic instructions for use. Below is a general outline of what it should contain:

Kit Description


Demo URL:

 

For detailed Documentation, go to https://docs.layerswp.com/doc/how-to-import-a-style-kit/

 

Quick Setup:

1. Import the content.xml file from Tools > Import > WordPress and select “Download & Import File Attachments”. If you get failure messages on the image import:

Click on Media in your admin menu and verify the demo images imported. If not, click Add New and browse to the Images folder inside the kit folder, select all and click Open to upload them.

2. Go to Layers > Layers Pages and click one of the imported pages to edit it. Click the Upload & Import button and upload the page’s preset.json file. Example home_preset.json.

3. Wait until the Import Complete message appears, then click Build Your Page. Review the layout and click Save Settings.

4. Click Back on the Customizer nav and expand the CSS panel. Open the css.txt file and copy the contents. Paste into the CSS panel in the Customizer and Save

5. Repeat for additional layouts.

6. Proceed to customize your general Layers settings.
This kit uses the following Layers Settings:

 

Your Layers Settings

 

Recommended Plugins:

 

List any plugins used on your demo

Pack It Up

Your kit should use a simple structure like this one:

  • folder
    • images
    • css.txt
    • layout-one.json
    • layout-two.json
    • kit-content.xml
    • readme.txt
  1. Test the import process on a live server to ensure everything works!
  2. Re-export all the data if your original files were staged locally. This ensures others can import images without uploading them manually.
  3. Zip the folder and name it kitname_layers-style-kit.zip where kitname is your Style Kit name.

Test It

Finally, import your kit on a fresh Layers setup to ensure it works and work out any issues in the user experience. See full instructions below for help.

Example StyleKits

The following kit demonstrates how a style kit is put together for transfer to a client or general distribution to the public.

screenshot

Download Example    See the Demo

 

StyleKits can also be as simple as just some custom CSS. See the following demo and About link for example:

Delight StyleKit Demo

 

Importing StyleKits

The following guide will walk you through the import of the following main parts of your style kit:

  • WordPress content export in the form of an .xml file
  • Layers page presets in the form of .json file(s)
  • Custom CSS in the form of a .txt file

stylekit

 

Note: If you only have a zip file, you must unzip your style kit to an easy-to-find location, such as your desktop, before continuing.

 

Step 1: Import Content

  1.  From your WordPress admin panel, click on Tools → Import
    • If you are prompted to install the WordPress Importer, go ahead and install/activate it.
  2. Choose WordPress from the Import screen
  3. Browse to the location of your style-kit files and select the content.xml file and click Open
  4. Click Upload File and Import
  5. Select your name from the Assign Authors drop-down, and check “Download and import file attachments”! If you get an error on the image import, we’ll address that in step 8
  6. Click Submit
    • The import will begin and may take a few minutes. If you see several failure messages on importing media, this is normal and can be ignored.
  7. When complete, you will see a success message.
  8. Click on Media in your admin menu and check for the demo images. If they are not there, click on Add New
  9. Browse to your Style Kit’s folder and open the image folder. Select all the images and click Open to upload them manually.

 If your kit did not come with an XML file, go to Pages →Add New, name your page and select the Layers template from the Page Template drop-down. Save your page and continue.

Step 2: Import Page Layouts

  1. Go to Layers → Layers Pages and locate the page you want to work on first. Click its title to enter the editor.
  2. Click on the Upload & Import button in the Import Layout box, located in the center column under the Build Page button
    • page-import
  3. The Media Library will open. Click the Upload Files tab, then either browse to the page’s preset.json file, or drag and drop it into the window
    • upload-files-media-library
  4. When complete, click the Upload & Import button in the lower-right
    • You may need to wait several seconds for the import to complete. While the file uploads, nothing may appear to be happening in the editor – be patient! This should not take longer than a minute.
  5. When the upload is complete, the box will refresh with a green border and a success message.
    • import-complete
  6. Click Build Your Page
  7. Your preset layout should appear, complete with images and all widgets set. You will need to configure your global settings and save some of your widgets to finalize the design:

Step 3: Customize

Your style kit likely comes with some custom styling in the form of a txt file. The code in this file is added to your main Layers setup and helps add final touches. Importing this code is not required for the style kit to work, but is most likely the core component of what makes the style kit look the way it does.

  1. On your computer, browse to the location of your Style Kit files and open the css.txt file
  2. Copy the contents
    • copy-css
    • Important note for Mac users: TextEdit opens a new document in rich text mode by default, but you can easily convert it to plain text by going to Format > Make Plain Text in the TextEdit menu bar. Alternatively, you can use the keyboard shortcut Shift-Command-T.
  3. Back in WordPress, you should be at the main Visual Customizer screen. If you already clicked Edit Layout, simply click the back arrow at top-left.
  4. Click the CSS tab near the bottom to expand the Custom CSS field
  5. Paste in the copied code.
    • vc-global-custom-css
  6. If you haven’t set up the rest of your site options yet, now is a good time to choose your Header, Navigation, Content and Footer options. For detailed help on these sections, see the Layers Setup Guide.
  7. Expand the Font section and set any recommended fonts specified in your Style Kit’s readme.txt file, or choose your own!
  8. Finally, click on Edit Layout and expand the page’s Body panel at the top.
  9. Customize the widget text as desired, then click Save & Publish

Note: If you do not edit the widgets or change settings in a widget preset that is using the Masonry layout, the layout may appear different from the Style Kit demo until you customize and Save.

 

 

Last Updated: