Dirty Saloon - A Rugged One Page Wordpress Theme

Dirty Saloon – A Rugged One Page WordPress Theme

November 18, 2013 by PremiumCoding - No Comments

Dirty Saloon is a rugged and bold WordPress Theme in wild west design. The idea was to combine an old vintage design of Wild West with a Flat and modern design.

It is a one page premium  Wordpress Theme  in wild west design. It is very flexible, with a clean & crisp design and is suitable for any kind of blog. It features a premium Page Builder which will makeyour life a lot easier when creating new Pages for your Site.

Theme comes with a Revolution Slider which is the best selling Premium WordPress Plugin for creation of Slideshows. It is one of the most advanced and highly customizable slideshows ever created. See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs. This is an extra $15 of value (price of the plugin)

Dirty Saloon has a convenient Administration panel which provides tons of options to manage and modify any aspect of the theme – it is well suited for both beginners with no coding knowledge and developers.

The theme allows you to change all the main colors of the Theme (background color for titles, color of title fonts, color of hover elements, color of shadow used on text) along with the background. This means that you can change all the colors and looks of the theme with just a few clicks.

Unlimited home pages will allow you to present your site in a way suited for your company. Simply create any kind of Home Page with the Aqua Page Builder.

DIRTY SALOON DEMO

We are offering a free sneak preview of our premium Wordpess Theme.

Download the DEMO CONTENT:

DIRTY SALOON DEMO CONTENT

It has been stripped of some funcionality and is thus missing the following:

  • smooth scroll
  • revolution block
  • post block
  • portfolio block
  • features block
  • shortcodes
  • documentation

LIVE PREVIEW

Dirty Saloon - A Rugged One Page WordPress Theme

Dirty Saloon Business WordPress Theme Features

  • AQUA PAGE BUILDER
  • Google Web Fonts
  • Video, Gallery, Audio, Standard and Link Posts Templates
  • Revolution Slider
  • Clean & Crisp Design
  • CSS3 Features and Animations
  • Detailed written help file
  • Full Width Google Maps Contact Page
  • Use your custom logo and favicon icon.
  • Unlimited Home Page Templates
  • 5 Post Templates (Standard, video, link, gallery, audio)
  • Filterable portfolio items.
  • Team Page

SCREENSHOT

Click on the image for a larger preview!

Dirty Saloon - A Rugged One Page WordPress Theme

AQUA PAGE BUILDER

Aqua Page Builder is a powerful WordPress plugin that allows you to create an unlimited number of template variations for use in your WordPress themes. It follows the same user interface used by the Menus & Widgets admin pages – making you feel right at home with the UI.

Similar to the Widgets &amps Menus, Aqua Page Builder features the drag and drop interaction to build its templates.

Since its official release over 3 months ago, Aqua Page Builder plugin has received over 10000 downloads across the globe. If you don’t know what Aqua Page Builder (henceforth AQPB) is, then I’d recommend you to watch this short video which demonstrates some of its awesome features. http://www.screenr.com/iI87

Screenshot taken directly from our Theme is below:

REVOLUTION SLIDER

Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

Some video Tutorials to help you get started with the Slideshow. Also please note that you will get the demo txt file to recreate the same Slideshow as in Live preview in seconds:

VIDEO TUTORIALS

AJAX LOADING

Dirty Saloon is using an advanced AJAX loading of the Projects and Posts on the front page. You can turn in on/off within the Page Builder. If you click on one of the Projects it will open live on the Front Page. From there you can choose to either close it or read it in full details (user will then be taken to the single static page of the recent Project or Post). With this functionality a user can easily check all the Projects and recent Posts without leaving the Home Page.

HOW TO REGISTER ON OUR SUPPORT FORUMS

Support is handled via our Envato support forum. It is designed in a way so only Envato users that have bought some of our plugins or Themes can register. You have to use the purchase code in the process. This has been causing some problems so please check the screenshots below to see where to get the purchase code.

Click on the image for a larger preview!

After you click on the License Certificate you will then be able to see the code in the file which will look like in the screenshot below:

QUICK GUIDE

There are two ways of installing the Theme for your WordPress installation.

INSTALLATION VIA FTP

Extract the themeforest package you recieved to any folder on your harddrive. The archive contains several folders. You will need to copy the “Dirty Saloon” folder which contains the theme data to your wordpress installations theme folder on your server. Example of a destination folder: http://yourserver/wordpress/wp-content/themes/. The resulting file structure will look like this: http://yourserver/wordpress/wp-content/themes/Dirty Saloon/. Next go to your WordPress installation admin panel to appearence/themes. You will see theDirty Saloon theme listed along with other themes. Press Activate and the theme will be active in a moment.

INSTALLATION DIRECTLY FROM YOUR WORDPRESS INSTALLATION

Go to Appearance/Themes and click on the tab Install Themes. Now click on the upload button and choose the zip called cowboy.zip. After the Theme uploads to the server simply click on Activate and your brand new theme will be ready to use.

HOW TO MAKE THE THEME LOOK LIKE OUR LIVE PREVIEW

To make the theme look like our live preview and for it to function properly it should be installed in the following order:

  1. Install the Dirty Saloon WordPress Theme
  2. Install Revolution slider and our shortcode/builder plugin (found in the plugins directory in the files for download)
  3. Import Demo content (found on our support portal)
  4. Import Demo Settings for the Revolution Slider (found on our support portal)
  5. Setting up the Home Page

These are the basic steps, which I will explain further below.

1. THEME INSTALLATION

For Theme installation please see this video tutorial. It explains how to install a new WordPress Theme from a zip file, just in case of Dirty Saloon theme, the file you need to install is Dirty Saloon.zip (this is the Theme).

2. REVOLUTION SLIDER

Revolution slider is the premium plugin that comes with the theme. You can find it in the plugins directory of the package you installed from Themeforest. Install it via the Add new Plugin. After the plugin is installed, you will notice a new tab in the left menu of the WordPress Dashboard (at the bottom of it). We will return to the Slider in step 5 where the settings and demo content will be installed.

3. Importing of the demo content

This is where the exciting stuff happens. For demo content import we first need to install a plugin called WordPress Importer. Go to Tools -> Import and select WordPress. You will be prompted to install a plugin. After the plugin is installed simply select the XML file that you downloaded (unzip it first) from our portal and you are done (with all attachments). If all works smoothly then the Theme is almost ready to look like live preview.

We have prepared a XML file with demo content to help you get started with the Theme. Pay a visit to our support forum and look for the topic called Dirty Saloon - Responsive WordPress Theme. Now download the appropriate zip file. Please note that we have put the demo content on our support forums with the sole purpose of preventing the pirates to get the demo content also.

4. Importing Demo Settings for Revolution Slider 

It’s time to import the Settings for the Revolution Slider. Click the Revolution Slider Tab at the bottom of the WordPress Dashboard. Now click the Import Slider button. Now select the TXT file that you downloaded from our support portal (unzip it first) and click OK. The slider will be added with all the Slides and will be ready to use.

5. Setting up the Home Page

Go to Settings / Reading in your WordPress Dashboard and add the Static Page from the list of Pages (if you imported all the content properly there should be several pages, just like in our live demo).

For more information please check our support portal at:

http://themesupport.premiumcoding.com

RECOMMENDED / NEEDED PLUGINS

For full functionality of the Theme you will have to install some plugins. Below is a short description of where and how you can install the plugins:
1. page-builder-pmc-shortcode – PAGE BUILDER AND SHORTCODE PLUGIN (Theme’s plugin)
   - this is our plugin which adds shortcodes and page builder for the Theme (this is a must have)
2. revslider – REVOLUTION SLIDER
   - this plugin adds the Revolution Slider, it’s a premium plugin from Codecanyon and is a plugin we will
     update when there are newer versions
3. contact-form-7.3.5.3 – CONTACT FORM
   - this is a plugin that you will need of you want to add the contact form (can be seen on the contact blog). Plugin can be downloaded from WordPress repository
4. twitter-widget-pro.2.6.0 – TWITTER PLUGIN
   - this is a plugin that you will need if you want to add the Twitter block (in our live demo the block
     just above the footer). Plugin can be downloaded from the plugin’s official website

HOW TO USE THE AQUA PAGE BUILDER

Aqua Page Builder is a powerful WordPress plugin that allows you to create an unlimited number of template variations for use in your WordPress themes. It follows the same user interface used by the Menus & Widgets admin pages – making you feel right at home with the UI.

Similar to the Widgets &amps Menus, Aqua Page Builder features the drag and drop interaction to build its templates.

Since its official release over 3 months ago, Aqua Page Builder plugin has received over 10000 downloads across the globe. If you don’t know what Aqua Page Builder (henceforth AQPB) is, then I’d recommend you to watch this short video which demonstrates some of its awesome features. http://www.screenr.com/iI87

The video will demonstrate how easy it is to use the builder and create pages with it.

AQUA PAGE BUILDER DOCUMENTATION

This page will serve as the main documentation page on how to use the Aqua Page Builder plugin. Depending on which theme you have purchased, each theme may have added their own custom blocks. This page therefore will only cover the basic usage of the plugin and some of its included blocks. If you need help with custom blocks included in a theme, please contact the author directly instead to ask for help.

The plugin is available to download for free on the WordPress.org’s plugin repository. Visit the plugin page.

If you purchased a theme from Themeforest that supports Aqua Page Builder, the plugin file should be included in 

plugins

 folder of the main download package named aqua-page-builder.zip. If that’s not the case then you download the plugin from its Github page.

Install from plugin page (Recommended) 1. From your WordPress admin dashboard, navigate to 

Plugins > Add New

 2. In the Search box, type in “Aqua Page Builder” 3. Find Aqua Page Builder in the search results, then click Install 4. Follow the instructions to activate the plugin

Installing zip file bundled with theme

If you downloaded a theme that bundled Aqua Page Builder with the download package, please follow these steps to install:

  1. From your WordPress admin dashboard, navigate to 
    Plugins > Add New
  2. Choose the “Upload” option, located below the page title. (refer image below) : Upload plugin
  3. Navigate to the folder where the aqua-page-builder.zip is located and upload the file
  4. After upload is finished, activate the plugin and you’re done.

Install using zip file downloaded from Github

If you chose to download the plugin from Github, please follow these steps to install:

  1. Unzip the zip file downloaded from Github (download link →)
  2. Rename the unzipped folder to 
    aqua-page-builder
  3. Upload the folder into the 
    /plugins

     folder of your WordPress installation

  4. Go to your WP Admin > Plugins then in the list of plugins you should see Aqua Page Builder. Activate it and you’re done.

Creating a new template

After you have successfully installed & activated the plugin, you should see the the link to the Aqua Page Builder page in Appearance > Aqua Page Builder.

To create a new template: 1. Click on the “+” (plus) sign. 2. Fill in the Template Title field and click the 

Create Template

 button.

Please note template names should be unique, therefore you cannot have two templates named, e.g. 

Home

Adding a block

To add a block to the main building panel, drag the blocks from the 

Available Blocks

 container on the left of screen to the location you want on the building panel. The block will be automatically opened and you will be able to edit it to your liking.

Resizing a block

Depending on which block you’re currently editing, some blocks can be resized and some do not. To resize a block, simply hover on either sides of the block, a “Resize Handle” cursor icon will appear to indicate that the block is resizable. Click, and drag the resize handle to the width you like.

Deleting a block

There are two ways to delete a block.

  • Method 1 - Drag the block to the 
    Available Blocks

     container.

  • Method 2 - Open the block to show its content, and on bottom left you should see an anchor link titled 
    Delete

     which you can click to delete the block.

Please note that all changes will not be saved until you clicked the Save Template button.

Save Template

To save a template, click the Save Template button.

Using the template

To use your created templates in your pages, copy the template shortcode located in the input field next to the template name. Paste this shortcode into the pages where you’d like your template to appear.

Screenshot taken directly from our Theme is below:

PAGE BUILDER BLOCKS

Clear - defines a padding between blocks. In our demo it is set to 40px. You can also define background color.

Revolution Slider - all you have to input here is the alias of the Revolution Slider that you created (how to set up the slider is explained in the chapter Revolution Slider).

Start Content - this is the block that defines from where the non full width content starts (please note that Revolution Slider can be full width or boxed and this is set from the Plugin settings of the Slider).

Featured Block - This is the block that defines the featured squares found below the Revolution Slider.

End Content -  this is the block that defines where the non full width content stops

Column - this block is only needed if you want to add content within columns. In this case first drag the number of columns you wish to have and size them properly (by dragging them with your mouse). Now add the blocks you wish to use within these columns (so block is inserted inside the column). Use drag and drop to do so.

Portfolio Feed - This is the block that set up the recent portfolio part of the Page.

Number of portfolio post to show - this defines how many portfolio items are being pulled in. In our case we use 12 items, which means 4 slides of 3 portfolio items.

Text - this is the block that is used for the plain text.

Team block - with this block you add the team member. The parameters that have to be filled are:

  • Name
  • Position
  • Image
  • Image for icon
  • Social networks (you can add all or none, it’s up to you)

Pricing List - a block that adds the price list.  The parameters that have to be filled are:

  • Title Left (left of the icon)
  • Title Right (right of the icon)
  • Icon (in the middle of the title)
  • Text
  • Price

Twitter - a block that adds the twitter feed. Simply enter your twitter username and choose how many recent tweets you would like to have displayed.

Image - this is a block to add simple images. Upload the image via the native WordPress upload form and set the title and height of the image.

HOW TO SET UP THE REVOLUTION SLIDER

Revolution Slider is a new premium slider available in both jquery (for your standard html sites), and as a plugin for your WordPress powered website.

  • It offers an impressive feature set including:
  • Unlimited Slides
  • Unlimited Caption Layers
  • CSS Animation with a fallBack to jQuery
  • Vimeo & YouTube video
  • Drag and Drop layering

Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

Some video Tutorials to help you get started with the Slideshow. Also please note that you will get the demo txt file to recreate the same Slideshow as in Live preview in seconds:

VIDEO TUTORIALS

SLIDE EDITING

Revolution slider taps into your media library for photos, videos, or links placement inside sliders.
After a slide is added, it can be edited using the slider settings page where you can control things like slide transitions, slide change speed, shadowing, and slide navigation.
It comes packed with dozens of standard slide transitions you’ve come to expect from a quality slider, plus the ability to edit CSS of each individual slide. Slides can also be displayed as thumbnails, in nav bar style, or just as simple bullets.
After pressing the “Create New Slider” button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).
You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (please do not use special characters or spaces here, this defines the shortcode for you to use in your content).
The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.
The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).
The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.
Revolution Slider Panel Settings

DRAG AND DROP FUNCTIONALITY

Rather than having to hard code layer position with CSS, or be forced to set x-y coordinates inside the actual slide, Revolution Slider lets you place your layers using your mouse. You can drag and drop layers anywhere on the visible slide, and even layer them on top of each other.

This allows you to create some really unique sliders when combining text items that fly in with stationary images and video. It also allows you to create a virtual video wall, by which your slider can contain multiple videos on the same screen.

SLIDER RESPONSIVNESS

Perhaps the plugin’s most impressive feature is its responsive nature. With many sliders, the code throws off formatting on mobile displays no matter how “responsive” the theme might be. But with Revolution Slider, multiple size displays can be configured in the slider settings panel for more customization based on various screen sizes, mobile devices, or to make the slider change fit better with certain web components.
The images below show the slider in both vertical and horizontal mode on my Android device, but it works just as well on the iPhone.

HOW TO SET UP THE NAVIGATION

When going to Appearance / Menus you will see the structure of the templates navigation. You can easily edit menu labels, and move them using drag and drop. On the left column you have the possibility to add menu items using “custom links”, “pages” or “categories”. The newly added item will appear at the bottom of the menu structure and can be moved to its desired location. Make sure to always save the menu after making changes.

The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Scroll back to the Menu Editor.
  6. Click the Save Menu button.

ADDING ITEMS TO THE MENU

The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Scroll back to the Menu Editor.
  6. Click the Save Menu button.

 

DELETING A MENU ITEM

  1. Locate the menu item that you want to remove in the menu editor window
  2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item/box will be immediately removed.
  4. Click the Save Menu button to save your changes.

CUSTOMISING MENU ITEMS

The Navigation Label

This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.

The Title Attribute
This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.

  1. Click on the arrow in the top right-hand corner of the menu item to expand it.
  2. Enter the values for the Navigation Label and Title Attribute that you want to assign to the item.
  3. Click the Save Menu button to save your changes.

CREATING MULTI LEVEL MENUS

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.
The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.

  1. Position the mouse over the ‘child’ menu item.
  2. Whilst holding the left mouse button, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.

 

There are 3 menus that you have to set. Main menu, Top Navigation Menu and Footer menu. Responsive menu will only be visible on small resolutions (like on mobile devices).

SETTING UP POSTS (VIDEO, LINK, GALLERY)

Dirty Saloon supports the latest feature of WordPress that allows you to add specific posts that contain video, links or gallery. Videos and Gallery will appear on the front of the Blog page so visitors can run the video or look at the gallery without clicking on the post itself. Below are instructions of how to set it up:

Video Post - you have to add at the top of the post the following shortcode . The rest of the content is added in a standard way. Choose Video from the Format list on the right.

Link Post -  you have to add at the top of the post the following shortcode  [pmc_link]http://premiumcoding.com[/pmc_link]. The rest of the content is added in a standard way. Choose Link from the Format list on the right.

Audio Post - This post will enable you to have a small audio player in the blog and post. Simply select Audio post and input the link to the audio file and set the Title of the song.

Gallery Post - Gallery is added via WordPress native media upload form. Simply add the images and then insert the gallery into the post. Choose Gallery from the Format list on the right.

Standard Post - Choose Standard from the Format list on the right and add the content.

SETTING UP PAGES

Pages are created with the Page Builder. Simply create the page you wish to have and then copy the page shortcode to the new Page you will create. Now simply add that Page to the menu and you are done. Follow the video tutorials above for more detailed instructions.

THEME OPTIONS

HOME SETTINGS

Here you can set which elements should be displayed. You can choose between quote text, featured items, recent products, featured products,  recent portfolios, recent posts and your major brands / advertisers. Also select how many recent posts and portfolio items you wish to display on the front page. You will notice that you can set this for either just posts, just portfolio items or both at the same time. Settings will be valid automatically for each setting accordingly, based on which template for the front page you select.

HOME CONTENT SETTINGS

Here you can set the upper menu (mobile number, mail,…) . All other blocks are set in the Page Builder.

GENERAL SETTINGS

There are only two elements that can be set in main settings. Upload your Logo and favicon. You can use the upload form or simply enter the URL to the image. Here is also the place to enter the Google Analytics code to track your traffic. When you create a Google Analytics account you will get a code that you need to add to your website. Copy and paste it here under the Google Analytics text field.

STYLING OPTIONS

Styling options will allow you to add and edit your background and select the Theme’s leading color.

The most important setting in the styling area is the Theme’s leading color. This is the color that will consistently repeat throughout the whole Theme. Simply enter the color in hexadecimal format or select it with the color picker.

Shadow Color is the color of the shadow used on fonts. If you have dark font on a light background color then a white shadow will look good. If you have white font on darker background then a black shadow will look good.

Shadow opacity defines how transparent the shadow is.

BODY BACKGROUND

It can be a simple color (be sure to uncheck the Enable Background Image parameter if you wish to use only color).

Check Enable Background Image if you wish to use a custom background pattern instead of a plain color. After you have checked this settings simply click on the background pattern that you wish to use.

If none of the background patterns is suitable you can also upload your own. Simply upload your own pattern and the Theme will override the settings above and use your custom background pattern.

TYPOGRAPHY SETTINGS

You can set all main typography settings in this section. First define the font family, size, color and style of the body font. All body font (content text, links, paragraphs,…) will now use this settings unless specified otherwise in style.css file.

Now define the font family and color for the headings. Sizes are defined for each heading seperately (H1, H2, H3 and H4, H5, H6).

SOCIAL OPTIONS

Social options section allows you to add and edit your social icons. Currently there is support for Facebook, Twitter, Pinterest, Dribble and email. First you need to check which ones you want on your Theme. After that simply enter the links to your social profiles.

404 ERROR PAGE

This is the page which will show everytime your visitor writes a wrong URL or if simply the page that should be on your website doesn’t exist. Enter the title and description text and you are ready to go.

FOOTER OPTIONS

Footer settings section allows you to enter a short sentence about copyright or some other notice.

TRANSLATION OPTIONS

Theme allows you to translate all the main aspects of the Theme (buttons, social icons,…). Simply enter your translation and save.

SHORTCODES

Dirty Saloon comes with over 70 premade shortcodes. To add them while writing a post or a page simply click on the yellow folder icon that says Theme Shortcodes. To see all available shortcodes please check our live preview.

SOURCES AND CREDITS

I’ve used the following images, icons or other resources as listed.

SUPPORT

For support please visit our support portal and register as described above.