Stack - WordPress Theme

Contents

1. Stack - Introduction & Getting Started

2. Stack - How To Install Your Theme

3. Stack - Installing Theme Plugins

4. Stack - Installing WooCommerce

5. Stack - Importing Demo Data (One Click Method)

6. Stack - Importing Demo Data (Fallback Method)

7. Initial Theme Setup

8. Stack - Theme Options Overview

9. Stack - Using Visual Composer

10. Assigning Visual Composer to Portfolio/Ebor Mega Menu Pages

11. Stack - Applying Gradients to a Section

12. Stack - Custom Visual Composer Blocks Overview

13. Stack - Portfolio Overview

14. Stack - Team Overview

15. Stack - Ebor Mega Menu Overview

16. Stack - Post Type Options Overview

17. Stack - Creating Tabbed Sections

18. Stack - VC Rows Special CSS Classes

19. Stack - Using Google Maps

20. Stack - Troubleshooting Your Installation

21. Setting Up Your Instagram Feed

22. How do I reorder categories/posts etc?

23. Common Issue Troubleshooting

24. Theme support Policy

25. How To Rate Your Theme

26. Stack - Using Variant Page Builder

27. Stack - Developing with Stack

28. Stack Update Details

29. Stack - Tweaks and Knowledgebase

30. Stack - Creating Single Page Menus

31. Stack - Contact Form 7/Form Classes and Styling

1. Stack - Introduction & Getting Started

2. Stack - How To Install Your Theme

Installing your new theme is very straight forward and should be familiar to anyone who has worked with WordPress to any degree before, however we will outline the process here for you to ensure a trouble-free installation.

To begin, head to your WordPress dashboard and navigate to Appearance in the main menu, from the sub-menu on this page you will then need to select Install Theme, followed by the Upload button. You can see these steps in the animation below.

Its importing you upload the correct zip. By default most users will download the entire package when purchasing a theme, this needs to be unzipped and within this you will see various files and folders covering documentation, demo-data and of course the theme itself - typically the zip you need to upload will have a name similar to ;themename.zip - this is the one to upload here.

Once the upload has taken place, you will need to hit the Activate button to begin using your awesome new theme.

If your working with a fresh installation of WordPress, one final step you may wish to follow is to set your sites permalinks to something a bit nicer to look at (for a details overview of this settings you can view our Blog Post). To apply 'pretty permalinks' to your WordPress installation, just head to Settings > Permalinks and set the option to 'Postname'.

3. Stack - Installing Theme Plugins

When you first install the theme you'll see a popup on your dashboard from the theme asking you to install a number of plugins.

Allow the theme to install these for you. The plugins which are installed are dependent of the theme, the images below are for illustrative purposes only. 

TIP - You can install all plugins at the same time by checking the box at the top of the this list, see below for an example HOWEVER, its advisable to only install the Page Builder you wish to use only, as the demo data provided is in two separate package (one for Variant and another for VC to avoid duplication)

Once done (the process should take no more than a few minutes) You will see a confirmation notice similar to the image below. 

Now you have the themes plugins installed, you can continue to the next stage of the setup and import the demo data without any issues.

4. Stack - Installing WooCommerce

Your theme is ready for WooCommerce if you need eCommerce in your theme. There’s 2 steps to set this up, but you should also consider installing my demo data with WooCommerce pages and posts to make your life easier after setting up the plugin.

Install WooCommerce

 

Go to “plugins” => “add-new” => “install” and search for WooCommerce & then run the installer.

Run the Woo Setup Wizard

 

Once activated, WooCommerce will take you to a setup screen - simply follow along each set of options and the plugin will install and setup the pages for you the pages for you.

Install WooCommerce Demo Data

By far the easiest way to use WooCommerce is to first install the WooCommerce demo data and then configure it to your needs, you already have all the required WooCommerce pages installed so now we just need to populate them.

Head to the Demo XML Data folder in your download, the data we’re after is called woocommerce.xml

For details on importing this data, head to the Installing the demo data section of this documentation.

WooCommerce is now set up

That’s all you need to do to get a fully functioning shop within your theme, with the WooCommerce pages installed and with the WooCommerce demo data installed you’re ready to rock.

You may want a little more help with how to use WooCommerce though, well your theme does not modify any of the default WooCommerce methods of working, so by far the best resource for WooCommerce now is that already written by WooThemes themselves, below is a selection of links worth visiting;

Adding and managing productsGetting Started

Full details of how to add and manage your product base;

Adding and managing products

Handling digital downloads;

Digital Downloads

Handling Coupons

Coupons

Finally, if you really need some 101 help with WooCommerce, WPTuts did a great mini-series which you should take a read of;

WooCommerce 101

5. Stack - Importing Demo Data (One Click Method)

We have created a very simple system which can help you get your new theme setup like the demo in just a few clicks, however its crucial that you install all of the themes required plugins prior to beginning the import.

IMPORTANT NOTICE

When setting up stack you have the choice of two page builders - Variant and Visual Composer, its important to select the builder you wish to use and then install the relevant demo data for that page builder. If you were to install Visual Composer and then install the Variant demo data, the process will not work as expected and you will need to restart.

Once you have selected and installed all of the plugins needed + the page builder you want to use, you can go ahead and start importing the data. To begin single click import, you need to head to Appearance > Import Demo Data - you will be greeted by the following choice

From here, simply click the data package you want to setup, and hit 'Import'. Bare in mind, the import process can take anywhere from 5 to 60 minutes (depending on the speed of your server etc) - you must not navigate away from the page whilst the import takes place (though you are free to open a new tab and browser other areas of your WP dashboard).

6. Stack - Importing Demo Data (Fallback Method)

I have created a folder labeled "Demo XML Data" which contains an export for the Live Preview. The place to upload this XML file is in WordPress under Tools > Import.

Once you've arrived on the Import page, you will click on the "WordPress" link: Wordpress - Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.

The first time you do this you will get a pop-up prompting you to install the "WordPress Importer". You will need to click "Install Now". Then You will have installed the plugin and need to click "Activate Plugin & Run Importer".

From here you will just need click "Choose File" and select the demo-data.xml file. Then click "Upload file and import".

You will then be prompted to Assign Authors. You can read the description at the top as this explains everything. Note: Make sure you Import Attachments.

Check the box "Download and import file attachments". This will download attachments for images included in the Live Preview demo.

You now just need to wait for the importer to finish. This might take a few minutes depending on your hosting server speed.


7. Initial Theme Setup

Ok, so far we have installed the theme, we have installed the plugins and imported the demo data, whats next? 

The final step in getting your new theme setup and ready for you to edit as you wish is to setup your home page and menu. To begin, head to Settings > Reading, here you will need to set your Front Page.

By default WP is set to show your latest posts, however to make your theme just like our demo you should select a static front page from the pages provided in the demo data.


Please note - is important to set the Posts Page here also (you should find a blog page in the demo data)

Finally, if you have not done so already, its highly advisable to update your permalink settings. To do this, head to Settings > Permalinks and select any option other than default. We recommended 'postname' - as you can see below.


8. Stack - Theme Options Overview

The theme offers many options and customization possibilities - to access them simply head to Appearance > Customize within your WordPress dashboard and explore.

Dont see the option you want? Let us know and we will see what we can do. We love feedback here at TommusRhodus

9. Stack - Using Visual Composer

10. Assigning Visual Composer to Portfolio/Ebor Mega Menu Pages

Since Visual Composer 4.8 - the process of activating VC for use on custom post types such as Portfolio items or Mega Menu Items (depending on your theme) has slightly changed.

The area can now be found under the Role Manager Tab within the Visual Composer settings area

Once here, navigate to the Post Type dropdown and switch from Pages Only to Custom - this will then allow you to check each post type you wish to enable Visual Composer on.


11. Stack - Applying Gradients to a Section

12. Stack - Custom Visual Composer Blocks Overview

13. Stack - Portfolio Overview

14. Stack - Team Overview

Heads Up!

Team posts are automatically show at /team/ on your site, though you can use the page builder to add these to a page instead.

Team posts work just like blog posts. Ensure each team post has a featured image set. You’ll also want to set a job title, and some social icons for each team member using the additional inputs underneath the WP Editor/

15. Stack - Ebor Mega Menu Overview

Our mega menu system offers a very simple to use method of creating stunning dropdowns in no time. The process of creating a mega menu is covered above, but for further details do continue reading.

Creating a Mega Menu

To begin, you will need to create your sub menus (the menus you will want to show within a mega menu column), so head to Appearance > Menus and create 1 to 4 menus - these will be used in the next step, so be sure to create all the menus you need (enough to fill the number of columns you wish to display)

Next, head to Ebor Mega Menu within your WP admin, and select Add New

Within the Mega Menu editing screen you will see a regular content area (area A marked below) as well well as a special meta box (B on the image below) and a featured image area (C)

The content area is used to place text etc to the left of a mega menu item, the featured image area is used as the background for this text and finally you can select the menus you created in 1st step and assign hem to Menu Column 1 > 4

16. Stack - Post Type Options Overview

17. Stack - Creating Tabbed Sections

A powerful feature available in Stack is the all-new tabbed content areas. These allow you to create complex but stunning tabbed areas and are incredibly flexible to use. The video above details how it all works, however you will also find details below.

Step 1 - Add The Block To Your Page

To begin, add the 'Tabs Sections' block to your page 

Step 2 - Adding and Setting Up Tabs

Once the Tabs Sections block is added, you will need need to add a Row within this block, like you see below.

As you will also see in the above animation, as we are using a row as a pseudo tabbed area, you need to open the newly added row settings (via the edit icon) and within the Row Type field, type 'tab' - you can also add the title you would like for the Tab in the Tab Title field above.

Depending on your chosen background style for the tab, you may wish to also add one of the complimentary CSS classes such as 'imagebg' - for details on this please see https://tommusrhodus.ticksy.com/article/9990/

Step 3 - Adding More Tabs

Adding more tabs is simply a case of repeating the above step, just click the + icon and add another row as you wish. Remember, each row is a new section within the Tabbed Content area.


18. Stack - VC Rows Special CSS Classes

Stack uses a few key CSS classes which can be used within Rows to alter the background, orientation and text-alignment - using them is very simple, you just take the class from the list below and add it to the custom class area within a rows settings (seen below)

We will now detail the available classes and what they do.

bg--primary

Quite simply, this will give the row a background based on your primary color selection in the theme options

bg--primary-1

Quite simply, this will give the row a background based on your primary color selection in the theme options

bg--secondary

This will give a row a slightly different, but still light background, ideal for creating visual heirachy on long pages containing many sections

bg--dark

This gives you a darker row (with light text). This is perfect for breaking up your pages sections and giving things more visual appeal.

imagebg

Use this class if your using a background image or gradient for a row or section to make the text within white.

remove-column-padding

This class allows the columns within a row to have 0 padding

space--lg

This class adds more spacing around a row

unpad--bottom

Remove padding/spacing from the bottom of a row

text-center

Center align row text



19. Stack - Using Google Maps

IMPORTANT NOTICE - GOOGLE MAPS API

When using any of the Map API blocks in Variant or Visual you will see a field for your Api Key 

It is essential that you do this, failure to create your own key will result in issues, so ensure you supply your own key if you wish to use the API map sections.

Creating Iframes

When using the Google Maps page builder block, you will need to use the iframe supplied by Google to create your map.

Creating this iframe is simply, but not very clear.

Simply hit the menu icon on the upper left of the screen, then hit Share and within the popup that appears, select the embed tab - this will give you the iframe code as needed

20. Stack - Troubleshooting Your Installation

  1. Demo data installed correctly, but there's no imges? You either forgot to import attachments when installing demo data, or your server is configured to not allow incoming attachments. You'll need to go through the theme, posts, portfolios and set featured images accordingly.
  2. Seeing a red warning where a revolution slider should be? You just need to import the demo slider included in your themes Demo XML Data folder provided in your package (see video above).
  3. No Menus?! Help! This is simple, go to appearance -> menus and set your registered menus to a theme location.
  4. I'm getting 404 errors on posts & pages. See the permalinks section of this documentation.
  5. My site is slow to load & pages. See this article.

21. Setting Up Your Instagram Feed

For Stack, Foundry, Padre, Somnus, Machine, LaunchKit, Union, Meetup, Pivot, Acomb and Fulford Users - use the following video guide in conjunction with this article.

For Lydia, Lumos, Kwoon, Hygge, Malory, Kubb and Finch Users - use the following video guide in conjunction with this article.

Due to recent changes in the Instagram API - the process for setting up an instagram feed has become a little trickier, but this guide will help with every step of the way. Essentially you need to create a Client (so Instagram know who you are), and then an access token (the thing that gives your site permission to show images)

IMPORTANT NOTE - You will need to follow these steps using the account you wish to display in your feed, you are not able to show another users feed so using one account (your own for instance) to display anothert users images (your client, for example) will not work.

Step 1 - Creating A Client

To begin, you will need to visit https://www.instagram.com/developer/, where you will be greeted by the following screen.

Hit the 'Register Your Application' button to continue to the next step. On the next screen (seen below) hit 'Register a New Client'

Next, you need to fill in the form provided - most of it is self-explanatory, the key thing to remember is to enter the following in the Valid Redirect URL field

http://www.tommusrhodus.com/instagram/

Ok, step 1 is done, you now have a client, and more crucially, you now have the Client ID you need for the next part. Copy this Client ID into a notepad, you will need it again soon.

Step 2 - Edit Client

Now you have a client, your going to need to allow it to authorise use of your images. To do this, hit the Edit link to begin editing your clients settings.

Once in the settings, head to the Security tab and Uncheck the Disable Implicit OAuth option and hit save.

Step 3 - Putting It All Together

Remember that Client ID from before? Your going to need it here.

To create the Token needed (to enter into the theme options) you will need to copy this url into whatever text/code editor you wish

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID-HERE&redirect_uri=http://www.tommusrhodus.com/instagram/&response_type=token&scope=public_content

Replace the CLIENT-ID-HERE text with your actual client ID and then copy the whole URL (complete with your own ID) into your browser.

Next, you will be asked to Authorise access, just hit the Authorise button and continue to the final step.

Once done, you will be presented with this screen.

Copy the Token provided into the theme settings and your done

TROUBLESHOOTING

1. Receiving a 400 error? You must ensure the redirect URL you are entering is EXACTLY as follows (trailing slash included)

http://www.tommusrhodus.com/instagram/

2. Please note that sadly, the way in which Instagram have changed their API means that HashTag based feeds are currently unavailable. We're happy to have created a system to get user feeds back up and running and will re-add HashTag feeds in the future if we can. Your understanding that we're doing everything within our power is appreciated.

3 - When creating your client for the above steps, you MUST make the clients using the account which contains the images you wish to display. You cannot create a client based on one account, and then expect the feed to be able to show another users images - since the Instagram update this simply cannot work.

22. How do I reorder categories/posts etc?

Sadly, by default, WordPress has no easy method built into it for taking control of things such as the order of your Posts, categories (Portfolio, Team, Classes etc based on your theme) - Thankfully there is a very handy plugin which can help - Intuitive Custom Post Order

To install the plugin, simply head to Plugins > Add New and search for Intuitive Custom Post Order - once installed, you will need to head to Settings > Intuitive CPO to set things up. Once there you will see the following screen (the items will vary depending on your theme)

Simply Tick the box next to the content you wish to control and hit save.

Now you can quickly and easily re-order your items by simply dragging them within the WP Dashboard - you can see this wonderful plugin in action below. 

23. Common Issue Troubleshooting

Im seeing a 'stylesheet missing' error when trying to upload the theme
Im setting a max_upload_size error when trying to upload the theme
Where is my Visual Composer/Revolution Slider license?
I cant import the demo data, why?
Im getting a 404 error when viewing my portfolio/team etc
My site is slow to load, why?
Iv received an email saying there is an update, what do I do?
I want to translate the theme into my language/change some wording - what do I do?
Why are my page builder blocks not appearing on my blog page?


Im seeing a 'stylesheet missing' error when trying to upload the theme

This means your uploading the wrong zip package. When downloading your theme you have the option to download the full package, or the installable theme itself.

We suggest to download the whole package, then unzip this to locate your theme.zip file (theme name will change based on your purchased theme.


Im setting a max_upload_size error when trying to upload the theme

Some hosting, especially budget shared hosting, may impose file restrictions for uploads to your WP site. In some cases, installing this plugin and work very well https://wordpress.org/plugins/increase-upload-max-filesize/ however if it fails to work then you will need to contact your hosts to they can make the necessary changes from there end as this is something we cannot help with from a theme point of view.


Where is my Visual Composer/Revolution license?

Premium plugins such as Revolution Slider and Visual Composer may request a purchase code during use. This code is used to provide direct updates and support from the plugins creator and as such is not required or supplied for use with our themes. Our frameworks have been carefully create to ensure your running the latest compatible version at all times, so you have no need to worry. Please note that we manually update our bundled plugins after thorough testing as some plugin updates have bugs that we are unhappy to ship to our customers, you will receive updates when we are happy with the plugin. If you truly require auto-updates from these plugins you’ll need to purchase a personal license, please note this is the same for each theme on themeforest that bundles plugins.


I cant import the demo data, why?

Some budget hosting such as godaddy etc are quite poor and offer little in the way of resources so a large task such as importing a whole demo and images etc can be a little too much for them. In cases like this, the 1st thing you should try is the Fallback method - it uses special plugins to lighten the load and helps in 99% of cases.

if the issue persists, then you will need to contact your hosts who can hopefully increase your servers performance to suit the task.


Im getting a 404 error when viewing my portfolio/team etc

WordPress is a rock solid platform in most cases, but sometimes, when working with a new theme for instance, it needs a little nudge to update all of its core settings etc. If your seeing a 404 error or such when trying to view your projects (or team members, clients etc - depending on your theme)

To do this, simply head to Settings > Permalinks and select 'postname' from the options listed - even if this option is already selected, hit save anyway (this is the nudge we mentioned earlier) - Once done, you should be able to view all your content with no issues.

Should any issues remain, this indicates an issue with your server (the theme has no control of this) so you will need to contact your hosts for further support.


My site is slow to load, why?

As you saw when viewing the demos of our themes, our themes are capable of being blisteringly fast, however you may ocationally notice your site is not loading as fast as you hoped – here you can find some tips for ensuring your new site loads as quickly as possible http://www.tommusrhodus.com/speeding-up-wordpress/


Iv received an email saying there is an update, what do I do?

To update your theme to the latest version, you should re-grab the theme files from the downloads page of your themeforest account. You should then use the this article: http://www.tommusrhodus.com/updating-wordpress-theme-themeforest/


I want to translate the theme into my language/change some wording - what do I do?

Like most WP themes, our theme is translatable via the provide PO file - you can read more about this process here http://www.tommusrhodus.com/wp-basics-translating-your-wordpress-theme/ as well as check out this handy video guide for this task 



Why are my page builder blocks not appearing on my blog page?

Basically the way WP works means that archive pages, such as blog categories, search results and the page you nominate to be your blog page under Settings > Reading are controlled by WP so any page builder (Variant, Visual Composer etc) can no longer be used as WP itself handles the page. 

For this reason you will find options for you blog layout within the theme options (Appearance > Customize > Blog Settings) where you can pick the layout, title etc as you wish


24. Theme support Policy

Hey There! Please Read The Following:

These Tickets are not for Customisation requests (theme modification, behaviour changes, moving elements, 3rd party plugin integration etc.) Any ticket relating to customisation will be politely forwarded to -- http://www.tommusrhodus.com/contact/ -- and then your ticket will be closed.

"style.css is missing" scroll to the bottom of this message for the answer.

Want your site to load more quickly? A good web host is the best way to do this, we recommend and use WPEngine for all our theme demos.


I run support Weekdays 9am - 5pm GMT. You can expect a response within 12 - 48 hours, Monday to Friday unless there is a national holiday. Here is a list of UK national holidays: https://www.gov.uk/bank-holidays. Note that "bumps" to tickets put you to the back of my queue, be patient, every ticket is answered promptly.


What these tickets are for:

Help using theme features, bug reports & reasonable feature requests for future updates. Need to update your theme? See here: http://www.tommusrhodus.com/updating-wordpress-them...

What these tickets aren't for:

Any issues relating to 3rd party plugins not recommended by the theme, theme customisations, or theme changes your client requires.

What counts as customisation?

If you want to change the appearance or functionality of the theme by editing or extending the theme's code, then that is customisation, and will not be supported through these tickets. Likewise if your client has a function request that does not exist in the theme, these tickets are not the place to have the theme extended for this.

Do you need customisation work?

If that's exactly what you're here for, you can fill out a custom work form here; http://www.tommusrhodus.com/contact/

Things to check when leaving a ticket:

  1. You must leave a link to your site, if not we will ask you to do this anyway and it will result in a delay to your ticket.
  2. Please be descriptive when leaving a ticket, use screenshots if possible, "doesn't work" is not an acceptable descriptive term and you will be asked to explain further.
  3. Disable all non-theme-recommended plugins, undo any code changes, and ensure you're using a default, unmodified version of the theme files. You'll find a lot of the time this fixes your issue.
  4. Tickets without a validated purchase will not be answered. Properly validate your purchase.
  5. If you have a modified theme, or are using a child theme for modification, we cannot help with bugs. Please present bugs to us within the default, unmodified theme, and we will help every time!
  6. Please note Envato's Licensing covers 1 URL per 1 purchase of a theme: http://themeforest.net/licenses/regular - ticket profiles covering multiple URLs with 1 license code, will be stopped until the remaining licenses are provided.

Cheers & Thanks again for your purchase!


A quick point on theme support: All of my themes are tested and thoroughly scrutinised by themeforest support staff and are confirmed 100% working, if you're having any issues you should be 99.9% sure it's a user error, or a bug I will be happy to fix with you. With this in mind, please keep your tone calm & professional, you will always get the same from me. Any tickets left with vulgar language, or with threatening, unprofessional language will be promptly closed and/or deleted. All tickets left with a calm, professional tone will receive awesome support, as always.


"style.css is missing", no it isn't, one of two things has happened and I can help you with both:

  1. You've bought a HTML template. Was your purchase under $17? Then you've not bought a WordPress theme, you've bought a HTML template, contact Envato support, they can help: http://support.envato.com
  2. You've uploaded the main theme .zip, instead, unzip this, inside you'll find documentation and another .zip called themenameWPTheme.zip <= this is what you should be installing.

25. How To Rate Your Theme

26. Stack - Using Variant Page Builder

To begin editing your page with the Variant Page builder simply click the Variant link available in your WP page editing area or the 'Edit with Variant' link in your WP Admin bar.

You will notice that the available sections panel has opened. Add some sections to your page by clicking on the section thumbnail. You will see that once a section is added to the page, it also gets added to your layout map in the sidebar. Try adding some different content sections and reordering them by dragging their titles up and down in the layout map on the sidebar.

Add a navigation by clicking the 'Navigation Styles' button in the sidebar, select your desired style from the list to add it to your page.

Once you have added sections to your page and edited content. Click the Save icon in the menu and you will see a 'Saved' promt pop up to confirm your new page is ready to go.

Right Clicking within Variant

Many elements such as icon/buttons etc can be edited by simply right clicking on them. This will bring up a inline context menu where you can replace icons/edit URLs etc

27. Stack - Developing with Stack

Pages using Variant not showing images after moving domain

Please note this applies to Variant users only. If you have recently moved domain or moved your site from local to web hosting, there is a small chance you may experience some missing images/404s for certain images. This will be noticeable right away, as images will no longer appear if you have been affected.

If your noticing the issue at all, please do create a ticket and we will be happy to assist.

Adding Custom Variant Blocks

If your looking to create your own bespoke blocks, or even to simply modify one of the blocks provided - the process is very simple when working with Stack.

1 - Setup a Child Theme

This almost goes without saying when working with WP themes but if your not already using one, you will need to setup a child theme to begin, for details on this see http://www.tommusrhodus.com/wp-basics-the-world-of-child-themes/

2 - Create variant_templates folder

Within your new themes folder, create a sub-folder called 'variant_templates' - this will be where your new/edited variant blocks will reside.

3 - Copy The Function Provded Within variant_init.php

At the very end of the file you will see this function

function variant_add_extra_sections($sections) {
    //List your extra sections filenames (don't add .php)
    $extra_sections = array(
        'extra-example-section'
    );
 
    // combine the two arrays
    $sections = array_merge($extra_sections, $sections);
 
    return $sections;
}
add_filter('variant_add_sections', 'variant_add_extra_sections');

Copy this to your child theme, and add your new section names to the array like so as you create/edit your sections.

function variant_add_extra_sections($sections) {
    //List your extra sections filenames (don't add .php)
    $extra_sections = array(
        'extra-example-section',
        'extra-example-section-2',
        'extra-example-section-3'
    );
 
    // combine the two arrays
    $sections = array_merge($extra_sections, $sections);
 
    return $sections;
}
add_filter('variant_add_sections', 'variant_add_extra_sections');

4 - Copy An Original Section To Your Child Theme

Now you can copy over any of the blocks you wish to edit (or simply use as a starting point) and edit as you wish.

5 - Add each new block name as shown above and your all set.

The markup within each block is quite simple - lets take a look at cover-image-1 for example

<!--META-->
<section class="vim" id="variant-cover-image-1" vbr="Cover Image 1" vbp="covers">
<section class="cover space--lg unpad--bottom bg--secondary switchable text-center">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="mt--2">
                    <div class="wysiwyg">
                        <h1>Streamline your workflow</h1>
                        <p class="lead">
                            Build lean, beautiful websites with a clean and contemporary look to suit a range of purposes.
                        </p>
                    </div>
                    <a class="btn btn--primary type--uppercase" href="#customise-template">
                        <span class="btn__text">
                            Launch The Builder
                        </span>
                    </a>
                    <div class="wysiwyg"><span class="block type--fine-print">or <a href="/">view the demos</a></span></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-5">
                <img alt="Image" src="<?php variant_page_builder_demo_img('device-3.png'); ?>">
            </div>
        </div><!--end of row-->
    </div><!--end of container-->
</section>
</section><!--end of meta Section container-->

Essentially the outer wrapper (seen below) is the markup so the builder knows the content within is a 'block' so be sure to keep this in place (whilst editing the title and id as you wish) when creating or customising your own sections.

<section class="vim" id="variant-cover-image-1" vbr="Cover Image 1" vbp="covers"></section>


28. Stack Update Details

tags are removed from the variant content editor to ensure a consistent experience. If you need to add JS or CSS to your site you should use a child theme or a plugin such as https://en-gb.wordpress.org/plugins/custom-css-js/ 

Variant - Simple Lightbox Link Editing - You can now specify your lightbox image links via the WP url editor (this means you can use one image to display your project, and link to another image in the lightbox if you wish)

Stack 1.0.6 New Features (April 18th 2017)

WooCommerce 3 Feature Support Added - Stack no offers support for WooCommerce's new 'zoom on hover' function as well as a neat slider for your product gallery images. To use this simply update your WooCommerce version and your all set. For an example please see http://stack-variant.tommusdemos.wpengine.com/product/apple-ipad/

Social Icons Added To Top Bar - You can now add your social links to the top bar (above the main menu area) - to begin simply head to Appearance > Customize > Header Settings > Header Social Settings and add your profiles as you wish.

You can also enable/disable the new social icons area via Appearance > Customize > Header Settings > Sub Header Settings 

Visual Composer - New Modal/Notification Settings - Modal blocks can now have the trigger button disabled which is ideal if your not using a manually triggered modal.

Variant - New Careers Section Added - You will now find a new Careers block which can be used to display your careers in any page - this block also includes an option to display a particular category only also.

Stack 1.0.7 New Features (April 19th 2017)

Header Overrides Now Available for Search, and Custom Post Archives - By popular demand, we have now added override controls for areas which, untill now, would only use the global header setting. To control which header style is used simply head to Header Settings > Archive Header Settings in the theme options and tweak each available override as you wish.


New Target Controls - You can now set the target (for example if you want a link to open in a new window) for the footer and sub header buttons. These new fields can be found under each relevant button option within the theme options.

Automatic Updates Added - You can now update your theme from within the admin area, just like a theme from wordpress.org - for details on this process please see 

Easy Digital Downloads Support Added - We have added basic integration of EDD, however these styles will be further developed within a future update.

Stack 1.0.8 New Features (May 9th 2017)

Variant - Form Blocks Form Override Added - Form blocks, which typically use Contact Form 7 for there forms by design, can now easily be overridden with your own form plugins shortcode should you wish to use an alternative form plugin.

Variant - New Blog Layouts Added - We have expanded our blog layouts with even more choice! We have now added a stylish "Simple List + Sidebar" option.

Dropdown Menu Width Theme Option Added - You can now choose from 3 neat widths for you menu dropdowns - to do this head to Header Settings > Layout Settings and use the option provided 

Typed Text Speed Option Added - You can now control the speed of the typed text effect to suit your needs. This new option can be found under Site Settings > Typed Text Settings

Variant + Visual Composer - Hide On Mobile Etc Fixed - You can now fully control which items are shown and visible on mobile/desktop etc via the included options, which up until now have not been working as they should.

Stack 1.0.9 New Features (May 17th 2017)

New Header Layouts Added - We have added a trio on nav styles to our already massive list of options. You will now find the new 'Overlay header with dark text & logo', 'Overlay header & top bar with dark text & logo' and 'Centered overlay header with dark text & logo' within the available header layouts in both the theme options and page override areas.

Additional Header Override Added - You can now forgo the nav entirely with a page and simply use an in-page navigator instead.

Post Author Box/Bio Added - By popular demand we have added a traditional style author box which can be used in your blog posts (as well as a new option to disable it if you wish also)

New Social Media Icons Added - To keep up with the ever-changing world of social platforms, we have update the list of available icons to included even more of your favourite social sites.

Basic Sensei Plugin Support Added - We have added some basic support for the Sensei WP plugin, this will be expanded on in a future update.

Visual Composer - Modal/Notification Blocks Button Style Setting Added - When using the modal blocks within VC, we have added an option to control the button style used to launch the modal - this allows you to use a nice bold primary button to really grab attention

Variant - In Page Navigator Removed - This block has now been removed from Variant - so to use an in-page navigator please use the page overrides mentioned above.

Stack 1.1.0 New Features (May 19th 2017)

New Theme Option - Enable/Disable Header Cart Icon on mobile/desktop - You can now head to Appearance > Customize > Header Settings > Sub Header Settings to enable or disable the cart icon (if your using WooCommerce of course) on both mobile and desktop menus.

New Theme Option - Choose Between Dropdown Filters and Horizontal Filters - You can now select an alternative filtering style for your filterable items such as blog feeds etc, simply head to Site Settings > Global Settings and choose your desired style.

New Theme Option - Enable/Disable 1st Active Tab and Accordions - By default, tabs and accordions will show the 1st item in full upon page load - you can now disable this (to have the 1st item hidden/all accordions closed by default) via Site Settings > Global Settings in the theme options.


Stack 1.1.1 New Features (May 25th 2017)

New Theme Option - Custom Map Markers - You can now upload your own custom map marker for use throughout your site! This new option can be found in the all new theme options area, Appearance > Customize > Site Settings > Maps.

New Shop Layouts Added - In response to customer suggestions, we have added two new shop layouts you can choose from, Shop Standard + Sidebar and Shop Tiles + Sidebar, perfect for a more traditional shop home layout.

New Feature - Top Level Menu Items can be clickable. If you have set your drop-downs to respond on hover (rather than on click) your top level menu items can now be clickable.

Variant - New Block Added - We have added an all new Team Carousel block to variant, for even more flexibility for displaying your staff.

Variant - Hide Feeds by Settings Posts Per Page to 0 - Now in variant, if you wish to hide a feeds content you can now set the number of posts per page in the feeds settings to 0.

Stack 1.1.2 New Features (June 11th 2017)

New Header Styles Added - Logo Only - As requested by our lovely users, we have now added a super-minimal header layout which shows the logo only to our already expansive list of header styles. To use them you will find the new 'Logo Only' header styles available under Appearance > Customize > Header Settings > Header Layout

Variant - Features 5 Editing - The Features 5 block now provides a full WP WYSIWYG editor for simple content editing.

Stack 1.1.3 New Features (June 16th 2017)

New Single Product Layout Added - You can now switch from the default layout (where the sidebar is below the main content) to all all new more traditional layout with the sidebar to the right of the main content. To select this head to Appearance > Customize > Shop Settings and use the dropdown provided

Disable Product Star Ratings In Product Feeds - Another user request, we have added the option to disable the ratings within the various feeds. To do this head to Appearance > Customize > Shop Settings and use the dropdown provided

Search Results Now Show The Featured Image - By popular demand we have implemented featured images into the search results.

New Blog Layout Added - You can now use the magazine layout without the integrated CTA area! This can be selected via Appearance > Customize > Blog Settings > Blog Layout if you wish to use this new layout.

Visual Composer - New Map Zoom option Added. The styled map and map + image blocks now include a field to control the zoom level within the map, this can be found within the blocks settings (via the edit/pencil icon)

Visual Composer - Timing Option Added to Client Carousel - The client carousel block now includes a timing option so you can slowdown/speedup things as you wish. 

Variant - New Background Colour Added to ALL Sections - You can now choose your primary colour (set via the theme options) as a section background colour within all applicable sections.

Variant - New Text Alignment Options - All applicable sections can now justify the text if you wish, this can be done via the sections settings.

Variant - New Feature Blocks Added - 3 new feature styles can now be found within variant, Features Large 14, Features Small 14 and Features Small with Background

Stack 1.1.4 New Features (June 19th 2017)

Variant - New Blog Layout Added - We have added a new variation of the Magazine blog layout to the Variant post feed block which removes the CTA should you wish to not use it.

Variant - New Blog Carousel Added - By popular demand (we love your feedback here at TommusRhodus Themes) we have added a snazzy new blog carousel block to Variant, you will find this under the 'blog' items within Variant

Variant - Carousel Controls Added To Relevant Blocks - New controls which allow you to tweak the timing etc have been added to the Blog, Team and Product Carousel blocks.

Stack 1.1.5 New Features (June 27h 2017)

New Option - In Page Scroll Offset Control - We have now added a brilliant new option for those of you using in-page links, you can now control the scroll offset so you can set the scroll point with pin-point accuracy. This new option can be found under Site Settings > In Page Scrolling Settings in the themes options.

Header & Footer Social Icon Areas Updated - In response to our awesome users invaluable feedback, these areas can now show up to 10 icons each!  

New Gallery Formats Added - You can now pick from two new layouts for your media galleries, Stack Masonry and Stack Lightbox.

New Background Image Options For Breadcrumbs/Title Areas - You can now setup a background image for the breadcrumb area for team, career, blog and portfolio archives, as well as single pages.

Variant + Visual Composer - Comments Block Added - We have added a very useful block for those of you who wish to allow user comments on your page builder based based pages. This new block can be found under the 'Text' block filter within Variant as well as within the usual block array when adding content to your VC pages.

Stack 1.1.6 New Features (July 1st 2017)

New Max Width Theme Options - You can now control the global maximum width for your content. To do this simply head to Appearance > Customize > Site Settings and tweak as you wish.

Traditional Add To Card Option Added - We have also added a more traditional text based add-to-cart button, you can switch to this via Appearance > Customize > Shop Settings in your WP admin area.

Stack 1.1.7 New Features (July 10th 2017)

New Page Template Added - By popular demand, we have added a new traditional page template 'Page left Sidebar'. You will find this available under Page Templates when creating/editing pages.

New Footer Styles Added - You can now choose from primary-bg footers (so they use your primary bg colour as the background) from the theme options and page overrides.

New Instagram Widget Settings - You can now specify the number of images and number of columns used within the Instagram Widget.

Variant - New Local Video Block Added - You can now use locally hosted videos with the newly add Video Cover 7 block.

Stack 1.1.8 New Features (July 19th 2017)

New Portfolio Layouts Added - For those of you wish do not wish to use either page builder for creating your single projects, you can now select from a split (image left/text right), feed (image on top/text below) or blank (no image) for single portfolio items. To select, head to Appearance > Customize > Portfolio Settings > Single Portfolio Settings


Stack 1.1.9 New Features (July 27th 2017)

Parallax Now Works on Mobile - We have re-tweaked the parallax engine and its now working well on mobiles!

Variant - New blocks added - We have now added a Blog Comments block, and 3 new fullwidth elements (fullwidth slider, fullwidth post carousel and fullwidth ken burns slider). 

Variant - New Fullwidth Blocks added - You will now find fullwidth versions of the Ken Burns Slider, the Regular Slider as well as the blog carousel within the huge range of available Variant Blocks.

Variant - Comment Block Moved - You will now find the comments block within the 'Blog' category within Variant.

Stack 1.1.9 New Features (July 27th 2017) HOTFIX

This small release is a hotfix to remedy a couple of small issues relating to the Typed Text and Mobile Backgrounds.

Stack 1.2.0 New Features (August 2nd 2017)

Careers Post Type Slug is Now Changable - By popular demand we have added the option to change the 'careers' post type slug. To do this, head to Settings > Stack Post Type Options and tweak as you wish. Dont forget to then head to Settings > Permalinks and re-save your permalinks to ensure the changes take effect fully.

Stack 1.2.1 New Features (August 8th 2017)

Counter added to Header Cart Icon - We have added a neat AJAX cart counter to the cart. This is enable automatically so simply update to this version to benefit from this nifty new feature.

Compatibility Added for Title and Nofollow For Links Plugin - Some of you who have used WP for some time may be missing a certain function which was removed years ago from WP: the ability to set titles etc for link - this can be resolved with an awesome little plugin below, which Stack now fully supports https://en-gb.wordpress.org/plugins/title-and-nofollow-for-links/

Stack 1.2.2 New Features (September 6th 2017)

Shop Archives Breadcrumb Area can now have a custom Background Image - We have added a new option to allow you to set a custom bg image for the shop archive pages breadcrumb area - to access this new option head to Appearance > Customize > Shop Settings 

Logo Alt Text Option Now Available - Within the logo settings you will now find a new option to customize the alt text as you wish.

Mega Menu Top Level Items can Now be a Link - When using the hover dropdown option, you can now have the top level menu items (which untill now has been a trigger for the mega menu dropdown) can now be a custom link.

Video Posts Now Support Vimeo - The neat overlay effect you see here http://stack.tommusdemos.wpengine.com/a-video-post/ now supports vimeo videos! Simply paste your video url into a post with the video format selected and your featured image will be overlayed for you automatically.

Header Social Icons now show Title Text - For those keen on SEO, the social links now show a html title, perfect for those search engines.

New Breadcrumb layout and global Setting - Stack now offers the choice of numbered/text based pagination - you can control this via Appearance > Customize > Site Settings > Global Settings 

Footer Short 3 Now Includes a Menu - This popular footer layout now supports a menu for even more flexibility

Stack 1.2.3 HOTFIX (September 20th 2017)

This was a small update which fixes a small bug with the parallax script and one of the blog layouts.

Stack 1.2.4 (October 4th 2017)

Careers Post Type Visual Composer Template Override Added - For those wishing to enable/disable the blank Visual Composer template (so you can freely use VC to craft your own creations for single Career items) you will now find a new override option under Visual Composer Settings in your theme options.

Careers Feed Can now Display a Single Category - Similar to the category selector available in the blog/portfolio feeds etc, you can now specify a category of career items to display when using the Career feed block.

Cache Busting Improvements - As browsers and WP plugins caching has becomre more aggressive, refreshing assets can be a pain when updating/making changes. We have now added the theme version number to all theme resources in an aim to reduce the number of full browser caches clears needed. 

Stack 1.5 (November 3rd 2017)

New Blog Layout – we have added two brand new blog feeds to the already expansive selection. These are a portfolio style blog, and a detailed row of posts.

New Gallery Options – you can now create an awesome carousel + lightbox gallery for really showing off your images at there best

New Header Layouts – By popular demand, the centered header style can now also display the top bar.

New Lighter Font Icon file option – Another user requested feature here. Whilst most users love the choice of 1000+ icons we provide in Stack, understandably having so many icons available adds to the overall page size which in some cases is not ideal. As of Stack 1.5 you can now disable this so only a core set of icons is loaded which can further decrease page loading speeds (though beware that most icons – other than the few which are core to Stack’s design will no longer be available of course)

Shop Header Override Added – You can now specify and alternative header layout for your WooCommerce powered shop pages, similar to what is offered for Portfolio items etc.

Embedded Videos now load much faster – Thanks to @khromov via GitHub, the inline embeds now cache there requests making the load times considerably quicker

29. Stack - Tweaks and Knowledgebase

Increase the size of the menu fonts on mobiles

@media all and (max-width: 768px) {
    .bar-1 .menu-horizontal>li>.dropdown__trigger, .bar-1 .menu-horizontal>li>a {
        font-size: 14px;
    }
}

Center Align Modal Button

.modal-instance:not(.block) {
    width: 100%;
    text-align: center;
}
.modal-instance:not(.block) .btn, .height-80 .modal-instance:not(.block) .btn:hover {
    background: #4a90e2;
    border-color: #4a90e2;
}

Creating Section IDs and Linking To Them In The Menu (Single Page Style)

To create an in page link, you will need to give each section you wish to link a unique id by editing its title like you see below

Once done, head to Appearance > Menus and start adding your new menu items, These items will need to be Custom Link items, pointing to your new unique ID, like this 

Make the twitter widget only show 1 tweet in the footer.

footer .tweets-feed-2 li:last-child { display: none; }

Reduce Logo Size On Mobile

To reduce the logo on mobiles place the following CSS in your custom css area and tweak as you wish

@media all and (max-width: 768px) {
    .bar .logo {
        max-height: 60px;
    }
}

Make labels that are pill shaped into boxes with rounded corners

.label { border-radius: 6px; }

Change the shape of the back to tope button and change its colours

.back-to-top {
    border-radius: 6px;
    background: red;
    border-color: blue;
}
.back-to-top i {
  color: blue;
}

Increase the size of the logo in the footer

footer .logo {
    max-height: 40px
}

Customize Form Placeholder Text Colour

input[type]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
     color: #b3b3b3 ;
}
input[type]:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder {
     /* Firefox 18- */
     color: #b3b3b3 ;
}
input[type]::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
     /* Firefox 19+ */
     color: #b3b3b3 ;
}
input[type]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
     color: #b3b3b3 ;
}

Remove Cart From Mobile Menu

@media all and (max-width: 768px) {
    .cart-link {
        display: none;
    }
}

Add A Little Space To Single Team Pages on Mobile

@media all and (max-width: 768px) {
    .single-team .space--sm .team-1 {
        margin-left: 0;
        margin-right: 0;
    }
}

Product Tags display underneath Product Price and Name

.card-7 .card__body .card__title h6, .card-7 .card__body .card__title h5 {
    max-height: none;
}
.card-7 .card__body .card__price {
    position: absolute;
    top: auto;
    right: 2.4375em;
    text-align: right;
    bottom: 2.4375em;
}

Align Mobile Menu Icon With Logo

This can happen if you have a very tall, or oddly proportioned logo - to tweak the positioning you can use the following

.hamburger-toggle i {
    postition: relative;
    top: 22px;
}

Swap Menu/Utility Areas when Using the Centered Bar Header Layout

To swap the menu and utlity area's around (so the menu is to the right instead) - within your child theme, take the relevant header file from within the 'inc' folder 

<div class="col-md-5 col-md-pull-2">
    <?php get_template_part('inc/content-header', 'nav'); ?>
</div>
<div class="col-md-5 text-right text-left-xs text-left-sm">
    <?php get_template_part('inc/content-header', 'buttons'); ?>
</div>

And swap the template part calls around.

Hide the Back to Top Button

.back-to-top {
    display: none !important;
}

Add More Social Icons the the Footer

To add more icons to the footer you will need to edit a few files. Within admin/theme_options.php you will see the following

//Footer Icons
for( $i = 1; $i < 6; $i++ ){
    $ebor_options->add_setting('select', 'footer_social_icon_' . $i, 'Footer Social Icon ' . $i, 'footer_social_settings_section', 'none', 20 + $i + $i, $new_social_options);
    $ebor_options->add_setting('input', 'footer_social_url_' . $i, 'Footer Social URL ' . $i, 'footer_social_settings_section', '', 21 + $i + $i);
}

Replace

for( $i = 1; $i < 6; $i++ ){

with

for( $i = 1; $i < 10; $i++ ){

Basically, changing 6 (which equals 5 icons) to 10 (which equals 9 icons)

Then within the file inc/content-footer-social.php

You will also see

for( $i = 1; $i < 6; $i++ ){

Replace hat with

for( $i = 1; $i < 10; $i++ ){

And your all set

Show Product Categories Under Product Titles within Product Grid Displays

.product .block h5 + span {
    clear: left;
    display: block;
}
.product .block  span {
    display: inline-block;
}

Add Translated Language Files To Child Theme

To ensure your translations are not lost when updating your theme, copy your translated language folder to your child theme, then add this to functions.php 

// Load translation files from your child theme instead of the parent theme
function stack_child_theme_locale() {    load_child_theme_textdomain( 'stack', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'stack_child_theme_locale' );

Remove Overlay from Mega Menu Images

.dropdown .dropdown__content>.pos-absolute[
    class*='col-'][data-overlay]:before {    background: transparent;
}

Variant - Make Cover Slider Full Height

@media all and (min-width: 992px) {
    .cover.height-70.slider {
        height: 100vh;
        min-height: 100vh;
    }
}

Using the Section Navigation

To assign a section navigator to a page, first activate it for you page via the page overrides section provided.

Then, give either your VC sections or Variant blocks a unique ID and the navigator will pick this up and make a ‘dot’ for each for you

Reverse The Currency/Price Within Pricing Tables

To reverse the order of these (so the currency is after the price) you can use the following CSS

.pricing-1 .h1 {
    display: inline-block;
}
.pricing .h1 .pricing__dollar {
    float: right;
}
.pricing-1 .h2 strong {
    direction: rtl;
    unicode-bidi: bidi-override;
}

Add More Spacing Below Each Footer Widget On Mobile

If you wish to provide more spacing between the footer widgets on mobole place the following CSS in your custom css area and tweak as you wish

@media all and (max-width: 768px) {
    .footer-2 .col-sm-6.col-md-3 {
        margin-bottom: 20px;
    }
}

Adding Social Icons a Menu

Go to menus and ensure the "custom css class" is available for menu items. To do this, click on the Screen Options tab in the upper right corner and activate the CSS Class field as seen here 

Once done, create a custom menu item with, for example, a facebook link and title of Facebook (of whatever social network you want from this list of icons http://stack.tommusdemos.wpengine.com/pages/icons-cheatsheet/) then pop this into the newly added CSS field

socicon icon--xs socicon-facebook


How to Use Variant with Custom Post Types

If your wishing to use the awesome power of Variant to create your single custom post type pages, simply add

?variant-active=true

After your posts URL when viewing it to activate the editor (see example)

http://www.domain.com/post-type/title/?variant-active=true

Place the Slide In Side Bar to the Left

To have the side menu appear from the other side of the page, place the following CSS in your custom css area and tweak as you wish

.notification.side-menu.notification--reveal[data-animation="from-right"] {
    animation: from-left 0.3s linear 0s forwards;
    -webkit-animation: from-left 0.3s linear 0s forwards;
    -moz-animation: from-left 0.3s linear 0s forwards;
}
.notification.side-menu {
    right: auto;
    left: 0;
}

Remove Iconsmind font file

To remove the icon pack we provide, place the following in your child themes function file

function remove_stack_items() {
    wp_dequeue_style('ebor-iconsmind');
     wp_deregister_style('ebor-iconsmind');
}
add_action( 'wp_enqueue_scripts', 'remove_stack_items', 500);

Using WPMLs Language Switcher

To activate WPMLs language switcher in the top bar in the header (as seen in the demo) - head to Appearance > Customize > Header Settings > Sub-Header Settings you will find the option "Show WPML dropdown in top bar?" 

Please note, WPML will need to be installed and active for this option to appear.

For details on setting up WPMLs switcher so you can specify your own languages etc, see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/

Allow Top/Utility Menu to Display Dropdowns

To add support for basic dropdown menus for this menu area (which typically only support a single level menu) add the following to your custom css area

.header--top-bar .menu-horizontal .sub-menu {
    display: none;
    position: absolute;
    background: #FAFAFA;
    z-index: 100;
    padding: 10px;
    text-align: left;
}
.header--top-bar .menu-horizontal .sub-menu li {
    margin: 0;
}
.header--top-bar .menu-horizontal .sub-menu li a {
    opacity: .5;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    color: #252525;
    font-weight: 500;
}
.header--top-bar .menu-horizontal .menu-item-has-children:hover .sub-menu {
    display: block;
}
@media all and (max-width: 768px) {
    .header--top-bar .menu-horizontal .sub-menu {
        position: relative;
    }
    .header--top-bar .menu-horizontal .sub-menu {
        left: 0;
        width: 100%;
    }
}

Add Bullets to List Items within Articles

.article__body ul, .wpb_text_column ul {    
    list-style-type: disc;
}

30. Stack - Creating Single Page Menus

Creating a single page style menu is simple with Stack - the main logic basically means you simply need to give any section you wish to link to a unique ID, which you then link to via Appearance > Menus. The full process is outlined below.

Assigning Section IDs in Variant

You can apply your own section IDs via the Section Title area as seen here.

To do this, simply edit the section you wish to link to, and replace the title with a unique name/id (be sure to keep it simple, no spaces, underscores or hyphens)

Keep a note of any IDs you apply, as you will need to add these to your menu as outlined below

Applying a Section ID with Visual Composer

To give an area and unique ID, simply head to the row settings (the pencil icon) and under Row ID, enter your unique name/ID (be sure to keep it simple, no spaces, underscores or hyphens)

Adding Custom IDs To Your Menu

To apply your new section IDs to your menu, head to Appearance > Menus - here you will see the Custom Links box available to add to the menu, this is what you will use here.

Simply enter a hash (#) followed by your ID, give your menu item any title you want, and add to your menu.


31. Stack - Contact Form 7/Form Classes and Styling

The forms within Stack are created using Contact Form 7 - one of the finest free form plugins for WP, however out of the box, you may notice forms not created/imported via the Demo Data look a little unstyled - the reason for this is Stacks forms use simple HTML and CSS Classes to apply the styling you see in the demo.

What does this mean? Well, to create stylish, styled forms you will need to apply a few key CSS classes to your form elements - for an example of what this looks like, see the example form code below.

<div class="row"><div class="col-sm-6">
    <label>Your Name:</label>
    [text* your-name placeholder "First / Last Name"]
</div>
<div class="col-sm-6">
    <label>Email Address:</label>
    [email* your-email placeholder "you@example.com"]
</div>
<div class="col-sm-12">
    <label>Message:</label>
    [textarea your-message x4 placeholder "Message"]
</div>
<div class="col-sm-12">
    [submit class:btn class:btn--primary "Send Enquiry"]
</div></div>

You will notice overall, the code looks the same as any other form created with CF7, however you will see the submit button has a couple of CSS classes added to it. These classes give the button the stylish look to see in the demo so if your wish to recreate this, add the classes 

btn--primary

and

btn

And your all set.

How to Add a Class to A form Element

Adding a custom css as easy with CF7, to do this you can use the field provided when creating your form element, or manually add the class (or classes) if you wish. For an example of this see the animation below

Want To Use The Demo Forms without using the Whole Demo Data package?

If you want to benefit for the huge number of example forms we provide, but dont wish to import the entire Demo Data, you can download the form xml data here.

To import this, head to Tools > Import in your WP admin and import the xml file accordingly