Burbank

Theme Documentation

Hello there...

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me via Support page. Thanks so much!

By: Dannci & Themnific | Support*

* Please note, that theme support does not include:

  • Customization and installation services
  • Support for third party software and plug-ins
  1. Theme Overview
  2. Theme Installation
  3. Default Setup
  4. Homepage Setup
  5. Styling (Admin panel)
  6. Custom Templates
  7. Custom Widgets
  8. Images
  9. Post Settings
  10. Plugins
  11. Demo Import
  12. Translation

 

Theme Instalation

Installation via WP Dashboard:
  1. Unzip/extract the main (downloaded) theme package – to get burbank.zip file,
  2. Go to Appearance >Themes,
  3. click on “Add New” > and “Upload theme”,
  4. click on ‘Browse’ button, find burbank.zip file on your computer and press 'Install Now',
  5. Activate theme,
  6. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!
  7. Refresh admin page and 'Burbank - admin panel' button will appear;
  8. Go to Burbank - admin panel (theme options) and setup theme.

 

Installation via FTP:
  1. Unzip/extract the main (downloaded) theme package / twice / to get main theme folder ‘burbank’,
  2. Using FTP client (e.g. Filezilla) upload 'burbank' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
  3. Go to Appearance >Themes, find Burbank theme and activate theme,
  4. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!
  5. Refresh admin page and 'Burbank - admin panel' button will appear;
  6. Go to Burbank - admin panel (theme options) and setup theme.

 

You have to install/activate required plugins (Redux and Elementor). You can do this by visiting Appearance » Install Plugins inside wp dashboard.

Default Setup

1. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!

2. Then go to Burbank - admin panel

img

and hit "Save Changes" button to set default style settings:

img

You can change styling options later.

 

2. Following message may be visible after theme activation:

img

Click on 'Begin activating plugins' link and install and activate 'Redux Framework' (if not installed yet), Elementor and 'Shortcode Ultimate' plugins. Or you can do this by visiting Appearance » Install Plugins

 

4. IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly! In this case use following plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails (from previous theme).
After plugin installation start regeneration in Tools > Regen. Thumbnails. This process can take a while and you cannot close tab/window until regeneration is done.

 

 

 

Homepage Setup

  1. In 'Pages' section create new page > name it 'Home'
  2. Select 'Builder' template for this page and save the page:
    img
  3. Go to Settings > Reading and created 'Home' page set as Static page > Front page,
    img
  4. Empty homepage is created now! In next steps, we'll create homepage content using 'Elementor'.

 

Elementor

Important!

I recommend creating few classic blog posts before you start creating templates in Elementor. Set 'featured images' for all your posts.

  1. Go to Pages section and edit 'Home' page, which we have created in previous steps:
    img
  2. Make sure that 'Builder' template is selected for this page, then hit 'Edit with Elementor' button:
    img
  3. In 'Elementor edit mode' hit on 'Add new section' button and add 'two columns' block:
    img
    img
  4. Using Drag&Drop resize columns to e.g. 70% (for wide column) and 30% (for narrow column):
    img
  5. Click on the + sign in wide column and then you can drag blocks from the left menu; e.g. add 'Themnific: Blog List' block to this wide column:
    img


  6. Click on the + sign in narrow column, then drag Sidebar block from the left menu into it:
    img
    Select 'Sidebar' section (you need to set widgets for 'Sidebar' section in Appearance > Widgets)
    img
  7. This way you can drag other blocks into columns.
  8. Optional:
    - You can put sidebar on the left side and 'Blog List' widget on the right,
    - Hover over the whole section to see pretty blue icons, 1. click on 'edit section' , 2. in left dialog set 1000 This will be the width of the container:
    img
  9. Important!
    Adjust padding for responsive mode! When you are building any layout using 'columns' in Elementor; click on small 'Desktop' icon in the Advanced tab; 'Tablet' and 'Mobile' icons will appear.
    Then click on 'Tablet' and 'Mobile' icon and check your layout on small screens. If necessary, adjust padding/margin values for the responsive mode.
    img
    img

Adding Hero image

 

  1. Add new section and add two column layout:
    img
    img
  2. Hover over the section and click on 1st blue icon to edit section:
    img
  3. Switch to the Style tab and add background image
    img
    img
  4. Then just click on + sign in the left column and drag; e.g. Heading block into it.
    img.
  5. Click on heading and in Content / Style / Advanced tabs customize the appearance (size, colors, font, padding etc.).
    img
    img
  6. After all these, adjust overall padding (spacing) of the 'hero' section.
    1. edit section,
    2. switch to the Advanced tab,
    3. adjust top and bottom padding of the section.
    img

 

Adding Full-width Carousel

 

  1. Add new section and add one column layout:
    img
    img
  2. Hover over the section and click on 1st blue icon to edit section:
    img
  3. In left section select 'Full Width' and 'No Gap' options
    img
  4. Then just click + sign and drag Themnific: Carousel block into it.
    img

 

 

Blog Template

  1. If you want to create Blog (or News) page, create empty page (Default template),
  2. name it 'Blog' (or similar),
  3. go to Settings > Reading and set this page as 'Post page'
    img

 

 

Theme Setup - Admin panel

img

Theme comes with extensive options panel with functions divided to these sections:

img

General Settings:
  1. Upload your Main logo image,
  2. Enable/disable 'Uppercase' fonts.

img

 

Blog Settings:
  1. Enable and setup main slider,
  2. Enable and setup carousel.

img

 

 

Primary styling:
  1. Select font family (with color, style and width) for main body text,
  2. Choose colors for typographic elements: body, wrapper, containers (ghost color), text/links, hover, borders etc.

img

 

Header Styling & Settings:
  1. Setup color scheme (background, font, links and border colors) for header,
  2. Set other colors for header elements (sub- menus etc.),
  3. Set custom margins and width limitation for logo image.

img

 

Footer Styling:
  1. Select font family with color, style and weight for footer,
  2. Choose colors for typographic elements: footer background, text, links, hover, borders etc.,

img

 

Other Styling:
  1. Set font styling for 'Meta' sections (date, category etc. post information)
  2. Choose background color for elements (buttons, lines etc.),
  3. Select text/link color for elements (buttons, lines etc.),
  4. Set color scheme for image backgrounds.

img

 

 

Headings Typography:
  1. Select Font-family for all headings (h1- h6) and 'post titles',
  2. Select font weight for all headings (h1- h6) and 'post titles',
  3. Select Font-size for all headings (h1- h6) and 'post titles',
  4. Select font color for all headings (h1- h6) and 'post titles',

img

 

Post Settings:
  1. Turn On/Off partial post sections.

img

Social Networks Settings:
  1. Enable "Social Networks" section,
  2. Enter the full URL of social network, your profile or account (enter full URL: http:// or https:// including).

img

 

 

If you are finished click on "Save changes" button!

 

 

 

Custom Templates

 

  1. Create a page by going to Page > Add New.
  2. In Page Attributes section select custom page template (Full Width page etc.)
  3. Click the Publish button to publish your page.

 

Custom Widgets

Theme comes with few custom widgets (marked as Burbank).

Go to Appearance > Widgets and setup your sidebar and footer widget areas. Widgets are very easy to setup.

Please note that:

widgets are suitable for usage in Elementor page builder only! You can ignore them in this 'Widgets section'.

Following widgets are used in theme demo:

img

In theme demo may be used custom widgets which come with 3dr party plugins (Twitter, Newsletter etc.).
Please see 'Plugins' chapter for more info about these plugins.

 

 

Images

IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly!

In this case use this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails from previous theme.
After plugin installation start regeneration in Tools > Regen. Thumbnails This process can take a while and you cannot close tab/window until regeneration is done.

Images and thumbnails are generated automatically.

To display thumbnails correctly upload images via WP interface using "Set featured image" button.
After image upload set featured image.

 

Featured Images - Minimal Sizes
  1. Main Slider section: 1660x850px;
  2. Blog template (Small images): 520x321px;
  3. Single post: 758px of width;

 

 

Post Settings

In post add/edit screen is located custom 'Themnific Post Options' tab:

doc

In this tab is possible to set (for every post):

- type of post's sidebar (sidebar position)

- option to disable featured image on the single post.

 

 

Plugins

 

Elementor

Elementor plugin will help you create awesome layouts for your pages.

Go to Appearance » Install Plugins inside wp dashboard and install and activate Elementor plugin.

Basic setup of this plugin is very easy; go to Elementor > Settings and disable default color and fonts:

Save changes and that's it.

 

 

Recent Tweets Widget

Theme is compatible with Recent Tweets Widget plugin. Plugin is used in demo site.

In search field (Plugins > Add New) insert 'Recent Tweets Widget' and Install plugin.

Plugin widget can be set in Appearance > Widegts:

Note!: You need to get "consumer and secret" codes for Recent Tweets Widget:

  1. Go to https://dev.twitter.com/apps/new and log in, if necessary
  2. Enter your Application Name, Description and your website address. You can leave the callback URL empty.
  3. Accept the TOS, and solve the CAPTCHA.
  4. Submit the form by clicking the Create your Twitter Application
  5. Copy the consumer key (API key) and consumer secret from the screen into widget fields

 

 

MailChimp for WordPress

You can easily create newsletter subscribe form with 'MailChimp for WordPress' Plugin: Plugin Homepage

Into search field (in Plugins > Add New) paste MailChimp for WordPress and Install this plugin

Plugin can be set in MailChimp for WP section:

In demo is used subscribe form with following markup: https://pastebin.com/L2cFPYyP

 

 

Top 10 – Popular posts plugin for WordPress

Into search field (in Plugins > Add New) paste Top 10 – Popular posts plugin for WordPress and Install and activate this plugin.

After plugin activation setup 'Popular Posts [Top 10]' widget in Appearance > Widgets with following, highlighted options:

In demo is used subscribe form with following markup: https://pastebin.com/L2cFPYyP

 

Shortcodes Ultimate

You can generate different shortcodes using 'Insert shortcode' button in all Post/Page screens:

img

 

AddToAny Share Buttons

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'AddToAny Share Buttons' and Install this plugin.

Plugin can be set in Settings > AddToAny:

Theme is compatible with Simple Share Buttons Adder too.

 

WP Featherlight – A Simple jQuery Lightbox

In search field (Plugins > Add New) insert 'WP Featherlight' and just install and activta the plugin.

 

Contact Form 7

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Contact Form 7' and Install this plugin

You can create own contact form(s) in main wp menu > Contact.

You can display created 'contact form' on any page using shortcode.

Please read plugin documetation for more info about this very flexible plugin.

 

 

WP Review

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'WP Review' and Install this plugin.

In Settings > WP Review set own colors scheme that matches overall color scheme of your site.

When you are creating or editing any post, below the 'content' section is visible Review section. You can add your review "stuff" here.

 

 

Demo Import

 

Make sure that Burbank theme, Elementor plugin and other required and recommended plugins are installed and activated before the demo import.

One Click Demo Import

Install and activate 'One Click Demo Import' plugin.

After that import full demo content easily in Appearance > Import Demo Data. img

Just hit 'Import' button and wait until import is done (it can take few moments).

 

 

Important!

Due licenses all imported images are for testing purposes only and cannot be used on your live website!!!

You can download free photos for your commercial & personal works on sites like:

http://picjumbo.com/

http://pixabay.com/

https://unsplash.com/grid

 

Translation

This theme is translation/localization ready and comes with burbank.pot file. File is located in ../burbank/lang/ folder.

  1. You need to use localized WordPress installation (core): WordPress in Your Language.
    If not localization will be not successful.
  2. Download poedit software here,
  3. Install it and in this software translate burbank.pot file (line by line),
  4. Once you have translated all the strings, you can save this as your .po file.

    The filename of your .po / .mo file is crucial! Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in deutsch for example, your file name will look like de_DE.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

    Once you save, POEdit by default automatically creates a .mo file alongside your .po file. Put these files into 'lang' folder.

  5. Access your wp-config.php file found in your WordPress' root folder. Your file should already contain define('WPLANG', ''); but if it does not, you can add it in. You simply need to add your language and locale code into the define. If you were to translate your theme into German, you would have this:
    define('WPLANG', 'de_DE');

Your internationalization is complete!

 

 

 

 

Once again, thank you so much for purchasing this theme.

Go To Table of Contents