Kronberg Theme

 

Theme Instalation

Installation via WP Dashboard:

1. Unzip/extract the main (downloaded) theme package – to get the kronberg.zip file,
2. Go to Appearance >Themes,
3. click on “Add New” > and “Upload theme”,
4. click on the ‘Browse’ button, find the kronberg.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 'Kronberg - admin panel' button will appear;
8. Go to Kronberg - admin panel (theme options) and setup theme.

 

Installation via FTP:

1. Unzip/extract the main (downloaded) theme package / twice / to get the main theme folder ‘kronberg’,
2. Using FTP client (e.g. Filezilla) upload 'kronberg' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
3. Go to Appearance >Themes, find Kronberg 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 Kronberg - admin panel' button will appear;
6. Go to Kronberg - admin panel (theme options) and setup theme.

 

 

Required Plugins

The following message may be visible after the theme activation:

Go to Appearance » Install Plugins and install and activate following plugins:

1. Redux Framework, it is not necessary to install and activate the 'Extendify' library after the 'Redux' plugin activation.
2. Elementor: feel free to skip the whole setup process after the activation.
3. No Fuss Magazine plugin.

 

Default Setup

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

2. Then go to Kronberg - admin panel

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

You can change styling options later.

 

2. Following message may be visible after theme activation:

Click on 'Begin activating plugins' link and install and activate 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.

 

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.

Just hit the 'Import' button and install Redux Framework and all listed plugins below it:

Hit the' Continue & Import' button and wait until the import is done (it can take few moments).

 

 

 

Homepage Setup

 

1. In Settings > Reading set default front page settings,
2. Adjust "Blog pages show at most" number value to set number of posts on the front page and in archives.
   
   

 

Homepage Setup (Elementor)

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

 

 

Elementor

Important!

1. Go to the Pages section and edit the 'Home' page, which we have created in previous steps:
   
2. Make sure that the 'Elementor Full Width' template is selected for this page (a.), then hit 'Edit with Elementor' button (b.):
   

Full-Width Column - Adding Slider

1. Make sure that the No Fuss Magazine plugin is installed.
2. In 'Elementor edit mode, hit on 'Add New Container' button and add select the following 'Flexbox' setion:
   
   
3. Hover over the section and click on 2nd blue icon to edit section (a.) In left section select 'Full Width' and 'No Gap' options (b.)
   
   
4. Set the 'Padding' values to 0 in the 'Advanced' tab:
   
5. Then just click + sign and drag 'NoFuss Posts (Slider)' block into that setion:
   
6. Edit 'NoFuss Posts (Slider)' options in the left options bar and "Slider placeholder" will appear. On live homepage will be displayed fully functional slider.
   You can easily adjust the Title Typography settings, including for responsive modes, in the Design & Styling section. This allows you to fine-tune the appearance of titles across different devices to match your desired design.
   

Adding Columns

 

1. In 'Elementor edit mode' hit on 'Add new container button and select 'Flexbox' and e.g. 'two columns' section:
   
   
   
2. Select the first container (column) (a.) and in the 'Layout' tab set the width in %(b.)
   
3. Do the same with the second container (column) sum of widths should be 100%. E.g. if the first column is 70% of width the second should be 30%.
4. Click on the + sign in wide column and then drag blocks from the left menu; e.g. add 'NoFuss Posts' block to this wide column:
   
   
5. Adjust widget parameters to fit your needs:
   
6. Click on the + sign in the narrow column, then drag Sidebar block from the left menu into it.
   
7. Choose 'Sidebar' section which you can setup in Appearance > Widgets
   
   

 

Important

1. 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.
   
   

Blog Template

1. If you want to create News (or Blog) page, create an empty page (Default template),
2. name it News (or Blog),
3. go to Settings > Reading and set this page as 'Post page',
4. adjust the number of posts.
   

 

 

Theme Setup - Admin panel

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

General Settings:

1. Upload your Main Logo image,
2. Upload your Main Logo image for transparent header,
3. Enable/disable 'Uppercase' fonts,
4. Select 'Image Filter'
5. Optionally paste the Mailchimp shortcode (subscribe form).

 

Primary styling:

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

 

Header Styling & Settings:

1. Setup color scheme (background, font, links and border colors) for "Topnav" bar and main navigation
2. Set background color or background image for header,
3. Set other colors for header,
4. Set custom margins and width limitation for logo image.

 

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.,

 

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.

 

 

Headings Typography:

1. Select Font-family for 'Special Headings',
2. Select Font-family for all other headings (h1- h6)

 

Post Settings:

1. Turn On/off partial post sections.

Social Networks Settings:

1. Enable "Search + Social networks" sections,
2. Enter the full URL of social network, your profile or account (enter full URL: https:// including).

 

 

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

 

 

 

Custom Templates

 

1. Create a page (or post).
2. In the right side section select custom template ('No Sidebar Layout', 'Right Sidebar Layout' etc.)
   
3. Click the Publish button to publish your page/post.

 

Custom Widgets

Theme comes with few custom widgets (marked as - No Fuss).

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

Following widgets are used in theme demo (we are using 'Classic Widgets' plugin to achieve this look: https://wordpress.org/plugins/classic-widgets/):

 

Used Widgets

Following widgets are used in theme demo:

In theme demo may be used custom widgets which come with 3dr party plugins (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: 1960x1100px;
2. Single post: 925x650px;
3. Blog template + No Fuss Magazine widgets: 768px of width

 

Custom Menu

 

! Create your own custom menus first! Please see the following tutorial !

 

There are two menu locations available for the header. The main menu (standard menu as you know it from other themes) and the 'Additional Menu' that is displayed on the left upper side with a special design.

 

Enable 'CSS Classes' and 'Description' fields:

1. Toggle 'Screen Options' on the top of the menu screen:

2. Enable 'CSS Classes' and 'Desription' option:

 

Menu Item Description

Toggle any menu item and type some text into the 'Description' field:

Post Settings

In the post add/edit screen is located the 'No Fuss Post Options' tab. You can choose the position of the sidebar for a post here:

 

Plugins

 

 

MailChimp for WordPress

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

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

The plugin can be set in 'MC4WP' section:

In demo is used subscribe form with following markup:

<h3>Sign up for our weekly trips, articles & stories newsletter.</h3> 
<p>What to read, watch, play, listen to and do while staying happy.</p> 
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input class="submit ribbon" type="submit" value="Sign up" />

 

 

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.

 

 

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:

 

 

 

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 kronberg.pot file. File is located in ../kronberg/lang/ folder.

1. You need to set ocalized WordPress installation (core) in the first place:
   
   If not, localization will be not successful.
2. .pot file is located in root theme folder inside 'lang' sub-folder: ../kronberg/lang/
3. Download poedit software here,
4. Install software it and translate kronberg.pot file (line by line),
5. 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:

   • Gettext language codes
   • Gettext country codes

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

Your internationalization is complete!

 

 

 

 

---

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

Go To Table of Contents