“Touchy, by Bonfire” Plugin Documentation by “Bonfire Themes”


“Touchy, by Bonfire”

By: Bonfire Themes

First off, thank you for purchasing the Touchy plugin! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!


Table of Contents

  1. Installation
  2. Set up the 'call' and 'email' buttons
  3. How to use icons on accordion menu
  4. Adding a descriptive sub-menu item ("text" class)
  5. Color customization
  6. Have a question?

A) Installation - top

Installing the plugin couldn't be simpler.

  1. In your WordPress installation, go to Plugins > Add New
  2. Click on Upload
  3. Use the form there to upload the touchy-by-bonfire.zip file
  4. On the next screen, activate the plugin.

Once you've activated the plugin, the Touchy menubar will automatically appear on your site. Simply create a menu under Appearance > Menus as you normally would, and then attach it to the "Touchy, by Bonfire" location.

Read the next steps for instructions on how to insert your phone number and email address to the main menu bar, how to add icons to the drop-down menu items, as well as how to (optionally) color customize every aspect of the menu.


B) Set up the 'call' and 'email' buttons - top

After installing the plugin, click on Touchy Settings in the sidebar. On this page, insert your email address and phone number. Easy peasy!


C) How to use icons on accordion menu - top

As of update 1.3, you can add a wide variety of icons to Touchy's drop-down menu. To do so, you simply need to insert the icon code infront of the actual menu item's Navigation Label. The icon code is <i class="fa fa-iconname"></i>, where "fa-iconname" can be replaced with an icon name available on this cheat sheet here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

For example, let's say you want to link to your Twitter account. In that case, the full Navigation Label can be: <i class="fa fa-twitter"></i>Twitter
Or perhaps you'd like to link to page that lists your podcasts. In case, this would work: <i class="fa fa-microphone"></i>Podcasts
Or, as a final example, you wish to link to a gallery page: <i class="fa fa-camera-retro"></i>Image gallery

Icons can be added to both top-level and sub-menu items.


D) Adding a descriptive sub-menu item ("text" class) - top

To add a text-only sub-menu item to your menu (great for short intros, descriptions etc..), all you have to do is give the menu item the "text" class. To do so, simply write "text" into the sub-menu item's "CSS Classes (optional)" field (you may need to enable that field by clicking on "Screen Options" in the top right corner of the screen and then ticking "CSS Classes").

And that's all there is to it. Now whatever you type into the "Navigation Label" field will be formatted into a description.


E) Color customization - top

Touchy allows you to change every aspect of its color scheme. This is done through the built-in WordPress customization tools:

  1. Head to Appearance > Customize > Touchy plugin colors
  2. On the page that opens, click on Colors and change the following options as you see fit:
    • Touchy > BACK button background
    • Touchy > BACK button icon
    • Touchy > BACK button background hover
    • Touchy > BACK button icon hover
    • Touchy > CALL button background
    • Touchy > CALL button icon
    • Touchy > CALL button background hover
    • Touchy > CALL button icon hover
    • Touchy > EMAIL button background
    • Touchy > EMAIL button icon
    • Touchy > EMAIL button background hover
    • Touchy > EMAIL button icon hover
    • Touchy > MENU button background
    • Touchy > MENU button icon
    • Touchy > MENU button background hover
    • Touchy > MENU button icon hover
    • Touchy > Menubar separator
    • Touchy > Accordion menu background
    • Touchy > Accordion menu item background hover
    • Touchy > Accordion menu separator
    • Touchy > Accordion sub-menu separator
    • Touchy > Accordion expand icon (down)
    • Touchy > Accordion expand icon (up)
    • Touchy > Accordion menu item
    • Touchy > Accordion menu item hover
    • Touchy > Accordion expanded menu item
    • Touchy > Accordion expanded menu background
    • Touchy > Accordion sub-menu item with "text" class
    • Touchy > Accordion sub-menu item
    • Touchy > Accordion sub-menu item hover
    • Touchy > Content overlay (when menu open)

Once done, hit the Save & Publish button.


F) Have a question? - top

Should you have a questions, then you can easily reach us through our CodeCanyon profile here (use the contact form located in the bottom-right corner of the page): http://codecanyon.net/user/BonfireThemes


 

Go To Table of Contents