Association

Theme Documentation

---

Created: 22.05.2019
By: Dannci & Themnific

Support*: Dannci's Support Page
Our Portfolio

---

---

 

 

 

 

Theme Instalation - top

Installation via WP Dashboard:

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

 

Installation via FTP:

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

 

Default Setup - top

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

2. Refresh page and 'Association - admin panel' button will appear;

3. Then go to Association - admin panel

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

You can change styling options later.

 

2. Following (or similar) message may be visible after theme activation:

Click on 'Begin activating plugins' link and install and activate 'Master City, 'Redux Framework' (if not installed yet) and 'Shortcode Ultimate' plugins.

You can install and activate these plugins in Appearance » Install Plugins too.

 

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 - top

1. In 'Pages' section create new page > name it '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. Empty homepage is created now! We'll create homepage content using 'Elementor' page builder in next steps.

 

Elementor

Important!

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

Adding Main Slider

1. Make sure that Master City plugin is installed and activated. Create few 'MC Slider' posts in left dashboard menu. (Slider posts types are similar / work similar to classic posts. Set post title, add slide content and set featured image for every slider post and list these posts into 'Groups' (categories). One 'slider' post represents one slide in the slider. See more )
2. In 'Elementor edit mode' hit on 'Add new section' button and add select 'one column' 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. Then just click + sign and drag 'Themnific: Main Slider' widget (block) into setion.
   
5. Adjust widget options and 'slider placeholder' will appear after save. On live homepage will be displayed fully functional slider.

Adding Columns

1. In 'Elementor edit mode' hit on 'Add new section' button and select e.g. 'two columns' section:
   
   
2. Select 'Boxed' layout (with 1180px of width) and 'Wide' columns gap (a.). Uusing Drag&Drop resize columns to e.g. 72% (for wide column) and 28% (for narrow column) (b.):
   
3. Click on the + sign in any column and then drag blocks from the left menu to these columns. E.g. into wide (right) column drag 'Themnific - News/Blog' widget; inot narrow 'Sidebar' widget (and select sidebar section you wnat to display).
   
   
   

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

Adding Hero image

 

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

 

 

 

Blog Template

1. If you want to create 'blog' page, create empty page (Default template),
2. name it 'Blog' (or similar),
3. go to Settings > Reading and set this page as 'Post page'
   
4. If you want to use 'Blog' template on the front page use default setting in Settings > Reading
   

Theme Setup - Admin panel - top

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

General Settings:

1. Upload your Main logo image,
2. Add Site Tagline,
3. Upload "header image"
4. Enable/disable 'Uppercase' fonts.

 

Primary styling:

1. Select font family with color, style and width of the font,
2. Choose colors for typographic elements: body, containers (ghost color), text/links, hover, borders etc.,
3. Add/paste your own custom CSS code

 

Header Styling & Settings:

1. Select header layout (logo position),
2. Set background color and color scheme for "Topnav" section,
3. Set typography for main menu,
4. Set color scheme for header,
5. Set custom margins and width limitation for logo image.
6. Set top margin for main menu.

 

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

 

Post Settings:

1. Turn On/Off partial post sections.

Social Networks Settings:

1. Enter the full URL of social network, your profile or account (enter full URL: http:// or https:// including).

Custom Footer:

1. Enable right custom footer and enter some text.

 

 

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

 

 

 

Custom Templates - top

 

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

 

Custom Widgets - top

Theme comes with few custom widgets (marked as "Themnific").

Go to Appearance > Widgets and setup your sidebar and footer widget areas. Widgets are very easy to setup. Just follow and set partial widgets fields.

Used Widgets

Following widgets are used in theme demo:

As you can see, in theme demo are used custom widgets which come with 3dr party plugins (Twitter, Events etc.).
Please see 'Plugins' chapter for more info about these plugins.

 

Images - top

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.

Featured Images:

1. Images and thumbnails are generated automatically. To display thumbnails correctly upload images via WP interface using "Use as featured image" button
2. after image upload set featured image.

Featured Images - Minimal Sizes

1. 'Slider' block : 1600x620px;
2. Classic blog posts: 299x225px;
3. MC Services (custom posts): 353x197px.

Post Settings & Post Formats - top

Post Settings:

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

You can setup "formats" (video, gallery etc.) and custom ads in this tab.

- select post sidebar location,

- disable featured image (applied only for 'Classic' image size)

 

 

Theme comes with these posts formats (Format tab):

Link post

Check 'Link' post in the Format tab and add any URL into Link field.

 

1. Ad Section: paste full URL of image banner and full URL of ad target
   

 

Custom Posts - top

 

Slider posts

Association theme (+ installed Master City plugin) comes with 'MC Slider' custom posts. Function is to create simple image slider:

You can access and create these custom posts in main dashboard menu:

 

Slider posts types are similar / work similar to classic posts. You can set post title, add slide content, featured image and sort/list these posts into own categories.

 

Usage is very simple; in Elementor drag 'Themnific - Main Slider' widget into Full Width column.

Custom Menu : - top

 

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

 

Custom menu (in sidebar)

1. Create another custom menu (in Appearance > Menus) and add any pages / links into it.

2. go into Appearance > Widgets and using 'Custom Menu' widget display this menu in Sidebar (Pages); (current page will be highlighted).

 

Colored Menu Item (on the right)

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

2. Enable 'CSS Classes' option:

3. Toggle any menu item and type special word into Css Classes field

 

Menu Icons

 

1. Before (or after) menu label add this piece of code

<i class="fa XXX"></i>

Enter full icon code - 'fa' class is required.

2. For XXX you can set any icon name. You can find all icon names on Font Awesome homepage.

3. You can see how-to video here. It is not tutorial for my theme but the process is the same.

Required Plugins - top

After theme activation will be following notice visible in wp dashboard:

Click on 'Begin activating plugin' link and install and activate Master Magazine, Redux Framework plugin and Shortcodes Ultimate plugin.

 

Redux Framework

After plugin activation is possible to change different theme options in theme admin panel

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. You can edit any page in the page builder now.

 

 

Master City

After plugin activation is possible to create MC Slider posts:

 

 

Shortcodes Ultimate

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

 

After plugin activation will be visible following notice; you can ignore this message:

 

Other Plugins: - top

 

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 Themnific - 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

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:

In demo is used contact form with following custom markup: http://pastebin.com/jHT9bj3N

'Get Involved' page uses another contact form with this markup: http://pastebin.com/tL2M2PMQ

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

 

 

AddToAny

Plugin page: Plugin Homepage

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

Plugin can be set in Settings > Cocorico Social:

Theme is compatible with Simple Share Buttons Adder too.

 

MailChimp for WordPress

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

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

Plugin can be set in Settings > Video Thumbnails:

In demo is used subscribe form with following markup: http://pastebin.com/K5bGtauT

 

 

Simple Event Planner

You can easily create events with 'Simple Event Planner' Plugin: Plugin Homepage

In search field (Plugins > Add New) insert 'Simple Event Planner' and Install this plugin

a) Plugin can be set in Event Planner > Settings:

b) In Event Panner > Add New create new event post which work similar to classic posts: add title, text, featured image and fill event options (date/time/address etc.)

c) you can display created evets on any page using shortcodes:

 

        [event_listing events_layout="list"]
        [event_listing events_layout="list" search="false"] 
        
        [event_listing events_layout="grid"]
        [event_listing events_layout="grid" search="false"]
        

More info about plugin: https://wordpress.org/plugins/simple-event-planner/faq/

Demo Content (XML file) - top

 

One Click Demo Import

You can import demo content in Appearance > Import Demo Data.

Demo import via XML file

 

- In main theme package (downloaded from http://themeforest.net/downloads) is attached XML file. Unzip this XML file.

- Go to Tools > Import; install and activate 'WordPress Importer' plugin,

- Find XML file on your computer and import XML file.

- Check "Download and import file attachments" option.

- XML file is bit bigger and sometimes (slow server etc.) needs to be imported more times (until 'Have Fun' message is shown).

 

After XML file import:

- set 'Home' page (with 'Builder' template) as front page (in Settings > Reading);

- edit 'Home' page and select 'Layout Creator' template you want to use on the front page (using 'Add Template' button),

- adjust/edit 'Layout Creator' template if you want (in Appearance > Layout Creator)

- save imported custom menus for 'locations' (in Appearance > Menus);

- set own color and typography schemes in Association admin panel.

- footer and sidebar widgets can be set in Appearance > Widgets. In demo are used these widgets:

 

Elementor templates

If you don't want to import whole demo content you can import just elementor templates (e.g. layout of the homepage) using .json file.

.json files are located in main theme package, in 'spec' folder. Extract .json files to you computer.

You can import template when you are editing any page in Elementor > click on 'Add Template' button > Import Template:

Find .json file on your computer and import Elementor template.

 

 

 

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 - top

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

1. You need to use localized WordPress installation (core) in the first place:
   
   If not, localization will be not successful.
2. Download poedit software here,
3. Install it and in this software translate association.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:

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

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