Back to top

Thank you very much for purchasing

Venedor - Ultimate Multi-Purpose Wordpress Theme!

This document discribes simple guide for the installation and use of Venedor - Ultimate Multi-Purpose Wordpress Theme - We encourage you to read this document thoroughly before start or if you are experiencing any difficulties.

If you get any problems with Venedor, please follow us on themeforest comment form or email us through Themeforest profile page.
We're always ready to make you happy with our products!

Getting Started


 

Getting Started

To install this theme you must have a working version of Wordpress already installed. For information in regard to installing the Wordpress platform, please see the Wordpress installation guide -
http://codex.wordpress.org/Installing_WordPress

Note:

  • We recommend you to backup your original files and database data before activation.

 

Install Theme

  1. Extract the theme package(downloaded file from themeforest) on your computer and navigate inside "Theme Files" folder.
  2. When you are ready to install a theme, you must first upload the theme files.
    • FTP Upload

      Using your FTP program, upload the unzipped theme folder "venedor" into the /wp-content/themes/ folder on your server.

    • Wordpress Upload

      Navigate to Appearance > Add New Themes > Upload.

      Click Install Themes and click the Upload button.

      Navigate to find the "venedor.zip" file on your computer and click "Install Now"

  3. Go to Appearance > Themes and activate "Venedor" theme.
  4. Change the permission of wp-content/themes/venedor/_config to 777.

 

Update Theme

  1. Extract the theme package(downloaded file from themeforest) on your computer and navigate inside "Theme Files" folder.
  2. When you are ready to update a theme, you must first upload the theme files.
  3. After upload, you should click again "Save Changes" button in "Theme Settings" and "Theme Design" in WP Admin page

 

Install Plugins

Venedor theme need to install the many plugins. Some are required and some are optional.

  • WooCommerce - WordPress eCommerce plugin (Required)
  • Easy Bootstrap Shortcodes - Use for bootstrap (Required)
  • WPBakery Visual Composer ($28 value) - Drag and drop page builder for WordPress. Take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. (Required)
  • AddThis Social Bookmarking Widget - Use for the social sharing in product, post, porfolio pages (Optional)
  • Contact Form 7 - Use for contact form (Optional)
  • Really Simple CAPTCHA - Really Simple CAPTCHA is a CAPTCHA module intended to be called from other plugins. It is originally created for my Contact Form 7 plugin. (Optional)
  • Regenerate Thumbnails - Allows you to regenerate all thumbnails after changing the thumbnail sizes. (Optional)
  • Revolution Slider ($18 value) - Revolution Slider is Premium responsive slider. (Optional)
  • LayerSlider ($17 value) - LayerSlider is the most advanced responsive WordPress slider plugin with the famous Parallax Effect and over 200 2D & 3D transitions. (Optional)
  • Subscribe2 - Notifies an email list when new entries are posted. (Optional)
  • YITH Woocommerce Compare - Allows you to compare more products with woocommerce plugin, through product attributes. (Optional)
  • YITH WooCommerce Ajax Search - Allows your users to search products in real time. (Optional)
  • YITH WooCommerce Wishlist - Allows you to add Wishlist functionality to your e-commerce. (Optional)
  • YITH WooCommerce Ajax Navigation - Allows user to filter products in Shop page without reloading the page. (Optional)

Install and Activate all bundled plugins

You should install and activate the plugins.

Venedor theme embedded the many plugins.

  • Post types order - Sort the orders of posts, porfolios, faqs, etc (Optional)
  • Sidebar Generator - Generate multiple sidebars (Optional)
  • Multiple Featured Images - Add the multiple featured images in posts, portfolios (Optional)

Configure Post Type Order

After install theme, you should configure post type order.

Configure Addthis Social

After activate "AddThis Social Bookmarking Widget" plugin, you should input Addthis username, password and profile ID.

Important: If you don't have addthis account, you can create addthis account in https://www.addthis.com/register?profile=wpp.

Important:

If you are installed addthis plugin 4.0 and updated successfully addthis profile id, you can control addthis plugins on Addthis online site (https://www.addthis.com/dashboard#gallery/pub_id).

You should setup "Sharing Buttons" on Addthis dashboard if addthis sharing buttons are not showing in the product page, post page, etc...

 

Setup Woocommerce

Install Woocommerce Pages

After activate woocommerce plugin, you should install woocommerce pages.

Change Product Image Sizes

You can change the image sizes in WooCommerce > Settings > Products.

Regenerate Thumbnails

After change the image sizes, you'll need to resize all images with "Regenerate Thumbnails" plugin.

 

After install Woocommerce plugin, you should change the Permalink Settings.

  1. Go to Settings > Permalinks.
  2. Change Common Settings to Post Name or other.
  3. Change Product permalink base to Product or other if you installed woocommerce plugin.
  4. Save Changes.

 

Import Demo - Traditional Method (optional)

Import Demo Content

You can import easily demo content in "Theme Import/Import" page.

Note: It can take a few minutes to import everything. Please be patient and wait for it to complete. After load, you will see a "Successfully Imported!" message above "Import" button.

Note: We didn't include the menus in demo content so you should configure the menus. Please see Menus at the top of documentation.

After import, you should configure again the menus in Appearance/Menus and the widgets in Appearance/Widgets.

In Main Menu, you should select "Popup Type" to "Wide" in "Custom" menu. And you should select "Don't show a link" and add "Columns" to "4" and "Block Name" to "menu-block" in "Theme Features" sub menu. And save menu.

Please see "Menu" in top menu.

You should select the frontpage in Settings/Reading. For example, if you want to use Blug Orange demo, you should select "Home - Blue Orange" page.

Import LayerSlider

You can import demo sliders for LayerSlider with "layerslider.zip" inside "Dummy Data" folder.

Import Revolution Slider

You can import demo sliders for Revolution Slider with "revslider_homeslider_blue.zip", "revslider_homeslider_brown.zip", "revslider_homeslider_pink.zip", etc... inside "Dummy Data" folder.

 

Import Demo - Alternative Method (optional)

Warning!

You site database will reset entirely using this method.
  1. Install and activate All-in-One WP Migration plugin
  2. Download the demo backup file to your computer.
  3. Upload backup file to wp-content/ai1wm-backups folder.
  4. Go to All-in-One WP Migration > Backups on admin sidebar.
  5. Click on the Restore button. You should wait a few seconds and click Continue button. You will see a success message after it completes.
  6. You will then be automatically logged out. You need to login to the wp admin using the following account:
    Username: admin, Password: admin
  7. You can change your username and password back to the unique credentials.

 

Change Demo Version

After install theme, you can change demo version settings and design.

  1. Please go Theme Import > Theme Type on admin sidebar.
  2. Please change theme settings and theme skin and click "Save Changes".
  3. Please go Theme Settings on admin sidebar.
  4. Please click "Reset All".
  5. Please click "Save Changes".
  6. Please go Theme Design on admin sidebar.
  7. Please click "Reset All".
  8. Please click "Save Changes".

If you imported demo content, please select the front page againg in Settings > Reading on admin sidebar

 

Theme Translate

You can translate all the texts using Codestyling Localization plugin.

You can manage and edit all gettext translation files (.po/.mo) directly out of your WordPress Admin Center without any need of an external editor. It automatically detects the gettext ready components like WordPress itself or any Plugin / Theme supporting gettext, is able to scan the related source files and can assists you using Google Translate API or Microsoft Translator API during translation. This plugin supports WordPress MU and allows explicit WPMU Plugin translation too. It newly introduces ignore-case and regular expression search during translation. Produces transalation files are 100% compatible to PoEdit.

You can download this plugin from here. Please visit the official website for further details and the latest information on this plugin.

Venedor theme include default PO and MO file in "languages" folder.
You can translate using POEdit tool. You can download this tool from here.

More details: Translating With Poedit.


Theme Import

Venedor theme offer 6 types of theme settings and design. You can import configuration of theme settings and theme design.

Important: After save changes, you should click "Reset All" and "Save Changes" in Theme Settings, Theme Design.

 

Theme Settings

You can change theme settings.

Theme settings had "General", "Plugin Settings", "Header", "Breadcrumbs", "Footer", "Homepage", "Blog & Single Post", "Portfolio", "Image Sizes", "Category(woocommerce)", "Product(woocommerce)", "Image Zoom(woocommerce)", "Import / Export" sections.

 

Theme Design

You can change theme design.

Theme design had "General", "Body", "Header", "Breadcrumbs", "Footer", "Block, Sidebar, Table, Form", "Testimonial", "Banner", "Category(woocommerce)", "Product(woocommerce)", "Custom CSS", "Import / Export" sections.


Post

How to create a post:

  1. Go to Posts > Add New.
  2. Add title, insert content and configure post options. Please see Content Type Options about post options.
  3. Select categories.
  4. Upload or select featured images.
    Note: You can change the number of the featured images in Theme Settings > Blog & Single Post > Single Post > Number of Slideshow Images.
  5. Publish.

Post Layout

You can set post layout in Theme Settings > Blog & Single Post > Post Layout.

 

Page

How to create a page:

  1. Go to Pages > Add New.
  2. Add title, insert content and configure page options. Please see Content Type Options about page options.
  3. Select page parent and template.
  4. Publish.

 

Product

How to create a product:

  1. Please see the following documentation: Managing Products.
  2. Please see Content Type Options about product options.

 

Portfolio

How to create a portfolio:

  1. Go to Portfolios > Add New.
  2. Add title, insert content and configure portfolio options. Please see Content Type Options about portfolio options.
  3. Select categories.
  4. Select skills.
  5. Upload or select featured images.
    Note: You can change the number of the featured images in Theme Settings > Portfolio > Number of Slideshow Images.
  6. Publish.

Portfolio Layout

You can set portfolio layout in Theme Settings > Portfolio > Portfolio Layout.

 

FAQ

How to create a faq:

  1. Go to FAQs > Add New.
  2. Add title, insert content and select category.
  3. Publish.

 

Block

"Block" content type let you create "HTML Blocks" that can be inserted to posts, portfolios, faqs, pages, widgets and theme options.

To insert a block when edit post, portfolio, faq, page, widget, etc, you can use a shortcode like [block id="15"] or [block name="theme-features"].

You can input the block name in Content Top, Content Bottom of Content Type Options if you want to add the blocks at the top and bottom of the page content.

How to create a block:

  1. Go to Blocks > Add New.
  2. Add title and insert content.
  3. Publish.

 

Content Type Options

When edit the post, page, portfolio and product, you should configure content type options.

  • Breadcrumbs - You can disable breadcrumbs.
  • Page Title (only page) - You can hide page title.
  • Layout - You can select page layout as "Wide Width" (only page), "Full Width", "Left Sidebar", "Right Sidebar".

  • Sidebar - You should select sidebar if layout is "Left Sidebar" or "Right Sidebar". If you didn't select sidebar, layout will be "Full Width".
  • Banner Type - You can select banner type.
    • LayerSlider
    • Revolution
    • Banner
    • Product Slider
  • Banner Width - You can select banner width as "Wide Width" or "Content Width".

    Venedor theme included standard sidebars "Home Sidebar", "Blog Sidebar", "Woocommerce Sidebar".

  • LayerSlider - You should select layerslider if banner type is "LayerSlider".


  • Revolution Slider - You should select revolution slider if banner type is "Revolution Slider".


  • Banner - You should edit banner if banner type is "Banner". You can edit using html and shortcode.


  • Product Slider - You should add product ids if banner type is "Product Slider".


  • Slideshow Type (only post) - You can select slideshow type as "Images", "Video & Audio", "None". Default is "Images".
  • Portfolio Type (only portfolio) - You can select portfolio type as "Images", "Video & Audio", "None". Default is "Images".
  • Video & Audio Embed Code (only post, portfolio) - You should input embed code if slideshow type, portfolio type is "Video & Audio".
  • External URL (only post) - You should input eternal url if post format is "Link".
  • Portfolio Link (only portfolio) - You can input external porfolio link.
  • Infinite Scroll (only portfolio page) - You can enable infinite scroll in portfolio page.
  • Portfolio Columns (only portfolio page) - You can select portfolio columns in portfolio page. Default is "4 Columns".
  • Portfolio Category (only portfolio page) - You can select portfolio category to show in portfolio page.
  • Portfolio Filters (only portfolio page) - You can show category filters in portfolio page.
  • FAQ Category (only faq page) - You can select faq category to show in faq page.
  • FAQ Filters (only faq page) - You can show category filters in faq page.
  • Content Top - You can input block name to show in "Page Content Top" area.


  • Content Bottom - You can input block name to show in "Page Content Bottom" area.


  • Custom Tab Title 1 (only product) - You can add custom tab in product tabs.
  • Custom Tab Content 1 (only product) - You can add custom tab in product tabs.
  • Custom Tab Title 2 (only product) - You can add custom tab in product tabs.
  • Custom Tab Content 2 (only product) - You can add custom tab in product tabs.


 

Taxonomy Options

You can configure taxonomy options when edit taxonomy such as "Category", "Product Category", "Portfolio Category". You can see details in "Content Type Options".

Note: Product Category has a new banner type "Featured Products". If you set banner type to "Featured Products", you can see the featured products in current category.


Page Tempates

  • Default Template - standard page template
  • Faq - faq page template
  • Portfolio - portfolio page template

Note: You can select the page layout in "Page Options".


Important (Optional): You can select the following options for portfolio and faq page.

 

Setup Homepage / Blog

  1. Go to Settings > Reading
  2. Select "A static page"
  3. For Front page select the Homepage page.
  4. For Post page select a page. This could be any blank page. WordPress will render it as a blog.

 

Blog Layout

You can set blog layout in Theme Settings > Blog & Single Post > Blog > Main Layout and post layout in Theme Settings > Blog & Single Post > Blog > Post Layout.

Blog Layout

Blog Post Layout

 

Contact Form Edit

You should install Contact Form 7 and Really Simple CAPTCHA plugin. When edit the contact form in Contacts, you can use the following example code.

<div class="row"><div class="col-lg-6 col-md-12">
<div class="row"><div class="col-lg-12 col-md-6">
<p class="input-field"><label for="contact-name"><span class="fa fa-user" />Name<abbr title="required" class="required">*</abbr></label>[text* your-name id:contact-name placeholder "Name"]</p>
<p class="input-field"><label for="contact-email"><span class="fa fa-envelope" />Email<abbr title="required" class="required">*</abbr></label>[email* your-email id:contact-email placeholder "Email Address"]</p>
</div><div class="col-lg-12 col-md-6">
<p class="input-field"><label for="contact-subject"><span class="fa fa-file" />Subject</label>[text your-subject id:contact-subject placeholder "Subject"]</p>
<p class="fileUpload input-field upload-field"><label for="contact-subject"><span class="fa fa-upload" />Attach File</label><input type="text" id="contact-file-upload" placeholder="No file choosen." disabled="disabled" />[file file-465 id:contact-file]</p>
</div></div>
</div><div class="col-lg-6 col-md-12">
<p class="textarea-field"><label for="contact-message"><span class="fa fa-edit" />Your Comment</label> [textarea your-message id:contact-message placeholder "Comment"]</p>
<div class="row"><div class="col-sm-8">
<p class="input-field nolabel">[captchar captcha-839 placeholder 'Enter the code']</p>
</div><div class="col-sm-4">
<p>[captchac captcha-839]</p>
</div></div>
<p>[submit "Submit"]</p>
<p>Your email address will not be published. Required fields are marked *</p>
</div></div>

 


Shortcode Overview

You'll find a lot of shortcode examples by browsing the theme demo site.

You can easily add shortcodes when edit content.

  • Container

    [container animation_type="" animation_duration="" class=""]Insert Content[/container]

  • Content Box

    [content_box title="" desc="" animation_type="" animation_duration="" class=""]Insert Content[/content_box]

  • Title

    [title size="" title="Title" title_fontsize="" title_transform="none" desc="Description" desc_fontsize="" show_line="true" line_pos="middle" line_width="40px" line_color="" align="center" color="" shadow="" animation_type="" animation_duration="" class=""]

    text-transform: none | uppercase | capitalize | lowercase
    size: "large" | ""
    show_line: true | false
    line_pos: top | middle | bottom
    align: left | center | right
    color: #ffffff
    shadow: 0px 0px 0px #ffffff

  • Background

    [background image="http://image_url" padding="30px" parallax="0.5" animation_type="" animation_duration="" class=""]Insert Content[/background]

    parallax: 0 ~ 1

  • Block

    [block id="Block ID" class=""] or [block name="Block Name" animation_type="" animation_duration="" class=""]

  • Brands

    [brands title="Brands" single_item="false" items="6" items_desktop="4" items_desktop_small="3" items_tablet="2" animation_type="" animation_duration="" class=""]Insert Brand Shortcode[/brands]

  • Brand

    [brand title="Brand" image="http://image_url" link="" target="" animation_type="" animation_duration="" class=""]

  • SW Slider

    [sw_slider pagination="false" navigation="true" animation_type="" animation_duration="" class=""]Insert Slide Shortcode[/sw_slider]

    pagination: true | false
    navigation: true | false

  • SW Slide

    [sw_slide class=""]Insert Content[/sw_slide]

  • Quote

    [quote animation_type="" animation_duration="" class=""]Insert Content[/quote]

  • Counter Circle

    [counter_circle filledcolor="" unfilledcolor="" size="220" speed="1000" strokesize="11" percent="60" desc="" desc_link="" desc_fontsize="" desc_color="" class=""]Insert Title[/counter_circle]

  • Counter Box

    [counter_box value="100" unit="" class=""]Insert Title[/counter_box]

  • Fontawesome

    [fontawesome icon="" size="/lg/2x/3x/4x/5x" fontsize="" color="" animation_type="" animation_duration="" class=""]

    size: "" | lg | 2x | 3x | 4x | 5x

  • Feature Box

    [feature_box title="Title" image="http://image_url" size="124" link="" align="center" border="true" show_bg="" animation_type="" animation_duration="" class=""]Insert Content[/feature_box]
    or
    [feature_box title="Title" icon="FontAwesome Icon Name" icon_bg="" size="124" link="" align="center" border="true" show_bg="" animation_type="" animation_duration="" class=""]Insert Content[/feature_box]

    align: left | center | right
    border: true | false

  • Testimonials

    [testimonials title="Testimonials" type="Banner" color="" shadow="" single_item="false" items="3" items_desktop="3", items_desktop_small="2" items_tablet="2" animation_type="" animation_duration="" class=""]Insert Testimonial Shortcode[/testimonials]

  • Testimonial

    [testimonial title="Title" photo="http://photo_url" link="" target="" name="Name" date="" animation_type="" animation_duration="" class=""]Insert Content[/testimonial]

  • Persons

    [persons title="Team Members" animation_type="" animation_duration="" class=""]Insert Person Shortcode[/persons]

  • Person

    [person name="Name" photo="http://photo_url" role="Role" facebook="http://facebook_url" twitter="http://twitter_url" dribbble="http://dribbble_url" pinterest="http://pinterest_url" instagram="http://instagram_url" linkedin="http://linkedin_url" tumblr="http://tumblr_url" youtube="http://youtube_url" email="example@site.com" phone="" animation_type="" animation_duration="" class=""]Insert Content[/person]

  • Person Boxs

    [person_boxs title="Team Members" cols="4" animation_type="" animation_duration="" class=""]Insert Person Box Shortcode[/person_boxs]

  • Person Box

    [person_box name="Name" photo="http://photo_url" role="Role" animation_type="" animation_duration="" class=""]

  • Persons Slider

    [persons_slider title="Team Members" animation_type="" animation_duration="" class=""]Insert Persons Slide Shortcode[/persons_slider]

  • Persons Slide

    [persons_slide name="Name" photo="http://photo_url" link="" target="" role="Role" class=""]

  • Map

    [map address="Address1|Address2|Address3" type="roadmap/satellite/hybrid/terrain" width="100%" height="300px" zoom="14" scrollwheel="true" scale="true" zoom_pancontrol="true" animation_type="" animation_duration="" class=""]

  • FAQ

    [faq cats="0" filter="false" animation_type="" animation_duration="" class=""]

    cats: cat_id1,cat_id2,...

  • Recent Posts

    [recent_posts title="Recent Posts" desc="Description" show_title="true" show_excert="true" show_meta="true" items="6" animation_type="" animation_duration="" class=""]

  • Recent Portfolios

    [recent_portfolios title="Recent Projects" desc="Description" show_title="true" show_cats="true" items="6" animation_type="" animation_duration="" class=""]

  • SW Bestseller Products

    [sw_bestseller_products title="Title" desc="Description" products="8" view="slider" orderby="date" order="desc" single="true|false" animation_type="" animation_duration="" class=""]

  • SW Featured Products

    [sw_featured_products title="Title" desc="Description" products="8" view="slider" orderby="date" order="desc" single="true|false" animation_type="" animation_duration="" class=""]

  • SW Sale Products

    [sw_sale_products title="Title" desc="Description" products="8" view="slider" orderby="date" order="desc" single="true|false" animation_type="" animation_duration="" class=""]

  • SW Latest Products

    [sw_latest_products title="Title" desc="Description" products="8" view="slider" orderby="date" order="desc" single="true|false" animation_type="" animation_duration="" class=""]

  • Pre

    [pre animation_type="" animation_duration="" class=""]Insert Pre Code[/pre]

 

Easy Bootstrap Shortcodes

This theme included Easy Bootstrap Shortcodes. You can edit the content using easy bootstrap shortcodes.

How to use in Visual Composer: You can add the easy bootstrap shortcodes within Visual Composer Text Block shortcode.

 

LyerSlider Shortcode

You can use layerslider shortcode.

[layerslider id="slider_id"]

 

Revolution Slider Shortcode

You can use revolution slider shortcode.

[rev_slider slider_slug]

 

Contact Form 7 Shortcode

You can use contact form 7 shortcode.

[contact-form-7 id="contactform_id" title="Title"]

How to edit contact form: Please see Pages/Contact Form Edit.

 


Widget Areas

This theme register standard widgets.

  • Homepage Sidebar
  • Blog Sidebar
  • Portfolio Sidebar
  • Woocommerce Sidebar
  • Content Bottom Widget 1
  • Content Bottom Widget 2
  • Content Bottom Widget 3
  • Content Bottom Widget 4
  • Footer Top Widget
  • Footer Widget 1
  • Footer Widget 2
  • Footer Widget 3
  • Footer Widget 4

 

Venedor Widgets

This theme has many widgets.

  • Contact Info Widget


  • Facebook Like Widget


  • Flickr Widget


  • Twitter Tweets Widget



  • Recent Posts Widget


  • Recent Portfolio Widget


 

Subscribe 2 Widget





Custom Styles

You can use custom styles when edit the page.

/* Margin */
.m-xs { margin: 5px; }
.m-sm { margin: 10px; }
.m { margin: 15px; }
.m-md { margin: 20px; }
.m-lg { margin: 30px; }
.m-xl { margin: 40px; }
.m-xlg { margin: 50px; }
.m-xxl { margin: 60px; }
.m-n { margin: 0; }
.m-l-none { margin-left: 0; }
.m-l-xs { margin-left: 5px; }
.m-l-sm { margin-left: 10px; }
.m-l { margin-left: 15px; }
.m-l-md { margin-left: 20px; }
.m-l-lg { margin-left: 30px; }
.m-l-xl { margin-left: 40px; }
.m-l-xlg { margin-left: 50px; }
.m-l-xxl { margin-left: 60px; }
.m-l-n-xxs { margin-left: -1px; }
.m-l-n-xs { margin-left: -5px; }
.m-l-n-sm { margin-left: -10px; }
.m-l-n { margin-left: -15px; }
.m-l-n-md { margin-left: -20px; }
.m-l-n-lg { margin-left: -30px; }
.m-l-n-xl { margin-left: -40px; }
.m-l-n-xlg { margin-left: -50px; }
.m-l-n-xxl { margin-left: -60px; }
.m-t-none { margin-top: 0; }
.m-t-xxs { margin-top: 1px; }
.m-t-xs { margin-top: 5px; }
.m-t-sm { margin-top: 10px; }
.m-t { margin-top: 15px; }
.m-t-md { margin-top: 20px; }
.m-t-lg { margin-top: 30px; }
.m-t-xl { margin-top: 40px; }
.m-t-xlg { margin-top: 50px; }
.m-t-xxl { margin-top: 60px; }
.m-t-n-xxs { margin-top: -1px; }
.m-t-n-xs { margin-top: -5px; }
.m-t-n-sm { margin-top: -10px; }
.m-t-n { margin-top: -15px; }
.m-t-n-md { margin-top: -20px; }
.m-t-n-lg { margin-top: -30px; }
.m-t-n-xl { margin-top: -40px; }
.m-t-n-xlg { margin-top: -50px; }
.m-t-n-xxl { margin-top: -60px; }
.m-r-none { margin-right: 0; }
.m-r-xs { margin-right: 5px; }
.m-r-sm { margin-right: 10px; }
.m-r { margin-right: 15px; }
.m-r-md { margin-right: 20px; }
.m-r-lg { margin-right: 30px; }
.m-r-xl { margin-right: 40px; }
.m-r-xlg { margin-right: 50px; }
.m-r-xxl { margin-right: 60px; }
.m-r-n-xxs { margin-right: -1px; }
.m-r-n-xs { margin-right: -5px; }
.m-r-n-sm { margin-right: -10px; }
.m-r-n { margin-right: -15px; }
.m-r-n-md { margin-right: -20px; }
.m-r-n-lg { margin-right: -30px; }
.m-r-n-xl { margin-right: -40px; }
.m-r-n-xlg { margin-right: -50px; }
.m-r-n-xxl { margin-right: -60px; }
.m-b-none { margin-bottom: 0; }
.m-b-xs { margin-bottom: 5px; }
.m-b-sm { margin-bottom: 10px; }
.m-b { margin-bottom: 15px; }
.m-b-md { margin-bottom: 20px; }
.m-b-lg { margin-bottom: 30px; }
.m-b-xl { margin-bottom: 40px; }
.m-b-xlg { margin-bottom: 50px; }
.m-b-xxl { margin-bottom: 60px; }
.m-b-n-xxs { margin-bottom: -1px; }
.m-b-n-xs { margin-bottom: -5px; }
.m-b-n-sm { margin-bottom: -10px; }
.m-b-n { margin-bottom: -15px; }
.m-b-n-md { margin-bottom: -20px; }
.m-b-n-lg { margin-bottom: -30px; }
.m-b-n-xl { margin-bottom: -40px; }
.m-b-n-xlg { margin-bottom: -50px; }
.m-b-n-xxl { margin-bottom: -60px; }