Welcome to Maxine

A Multi-Concept Theme


Welcome to Maxine - A Multi-Concept Theme

Installing Maxine

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called maxine.zip. You can install the theme by using one of two installation methods:

  1. WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
    1. Login to WordPress admin
    2. Go to admin panel > Appearance > Themes > Add New > Upload Theme
    3. Click on "Choose File" and select maxine.zip
    4. Click on "Install Now"
  2. FTP upload - If you wish to install via FTP, here are the steps you need to take:
    1. Using FTP client, login to the server where your WordPress website is hosted
    2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
    3. Using FTP client, upload the Maxine directory to themes directory on remote server

Once installation is complete, your Maxine theme will be ready to use. You should now see "Maxine Options" appear in the WordPress admin panel.

If writing permissions aren't set for folders containing CSS and JS files on your server, you will see a warning message at the top of the theme options page. In order to remove that message, you need to change permissions for wp-content/themes/maxine/css and wp-content/themes/maxine/js folders and set them to 755. We recommend setting writing permissions in order to optimize your site performance. If you have any issues with this, please contact your hosting service provider. Alternatively, you can submit a ticket to http://www.support.dynamicpress.eu/ with FTP access fo your site, and we will take a look at it.

Install Plugins

Right after the theme was activated, a notification at the top of the screen will suggest to continue with the installation of the required and recommended plugins for getting the best our of your theme.

Maxine for properly functioning required following plugins:

We highly recommend also use: For ecommerce sites we recommend also:

You can install recommended plugins according your needs.

Importing Demo Content

You can either start building your site from scratch, or import one of our demo sites and then modify it to fit your needs. We will now explain how to do the latter.

Maxine comes with one-click import module. Here's what you need to do:

  1. Login to WordPress admin
  2. Go into admin panel > Maxine > Sample Data Import
  3. Choose the demo site that you wish to import from the dropdown menu
  4. From the dropdown menu on the right, choose what type of content you'd like to import:

    • All - imports pages, content, widgets, and settings. We recommend this for users who want to import pages exactly as they appear in the demo.
    • Content - imports pages and their content only. Recommended for users who want to see how we've created our page layouts, but who want to keep their own settings in Maxine Options.
    • Widgets - imports widgets only. Recommended for users who'd like to use the widget areas that we created and want to import that only.
    • Options - imports Maxine Options only. Recommended for users who would like to achieve the same look and feel of our demo site, but who do not require our page layouts.
    • Revsliders - imports settings in Revsliders only.
    • Grids - imports settings of Essentials Grids only.
  5. If you wish to import media files (images, videos, sounds), check the "Import attachments" box.
    Please note that the images we use are copyrighted, and if you'd like to publish them on your site, you would need to purchase them separately. We bought most of our images on Photo Dune or Shutterstock.
  6. Click on the "Import" button.

Installing Woocommerce

If you plan on building an online shop with Maxine, please read the WooCommerce section of this user guide before installing the demo content.

Upgrading Maxine

You can upgrade your theme by performing the following steps:

  1. Download the latest theme zip file from ThemeForest
  2. Extract it and locate maxine.zip
  3. Extract maxine.zip and locate the 'maxine' folder
  4. Copy/Replace content of the 'maxine' folder to the /wp-content/themes/maxine folder of your web site.

Important F.A.Q.

1. Why can't I save my menu?

WordPress by default has a limited number of menu items. When you import our demo site, which contains a lot of menu items, you might not be able to save changes you make to a menu. You can fix this problem by contacting your hosting and asking them to add the following lines to php.ini file:

max_input_vars = 5000
suhosin.post.max_vars = 5000
suhosin.request.max_vars = 5000
2. Why is there a smiley displayed on blank pages?

This problem is most likely related to JetPack and memory settings of your hosting. You can either disable JetPack or read what the JetPack developer wrote: Regarding the memory limit, please refer to the WordPress Codex section concerning this problem. Some sites that load many plugins alongside WordPress ultimately require a higher memory limit than WordPress defaults to, but since this is limited to specific hosts and configurations, it must be dealt with on an individual basis. You'll find the Codex article at: http://codex.wordpress.org/Common_WordPress_Errors#Allowed_memory_size_exhausted

3. How do I optimize my site?

Please use this tool to investigate reasons for slow loading: https://developers.google.com/speed/pagespeed/insights/?hl=en

4. How to translate or rename default theme labels?

You can use the Codestyling localization plugin (http://wordpress.org/plugins/codestyling-localization/) to translate/rename all the theme's labels. Another solution is to edit the theme folder/languages/en_US.po file directly in editor and manually edit labels you want to translate.

5. Why do I see a white screen when importing demo content?

If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 120 seconds. Possible ways of achieving this are:

Ask your hosting provider to take care of this for you.

Once you've installed Maxine, you can start building your site. To customize the appearance and functionality of your web site to your needs you should to use Maxine administrative panel .

Maxine comes with robust and inteligent Admin Panel. It allows for easy and intuitive to set all aspects of appearance and function of theme. Creating your own skin has never been as easy. Plenty of options allows you to create the unique appearance of the page with a few clicks without writing a single line of code. This quick guide to the built-in Maxine Admin Panel will show you how to do it.

General Options

Here you can set all general options of theme:


  • Colour scheme
    Yoy can select predefined color scheme but please remember that this schemes overwrite some settings in admin panel. So if you will take full control over all aspects of layout please select option Default (as in admin panel)
  • Breadcrumbs display

Layout

Here you can set all general options of theme layout:


  • Theme width
  • Custom width for mobile devices
  • Sidebar and inner column width and position
  • etc.

Typography

Here you can set all typography aspects:


  • Font for body

  • Font for Headers

  • Two custom fonts for other elements eventually

  • Default font size for body and headers

Appearance

This is indeed skin cretor. Here you can set colour, background color, pattern, background image for all important theme areas.
You can do it using color pickers, slideers and switchers in few minutes.

Theme color scheme is based on two accent colors:

  • Main accent color used for all accented elements like buttons, links etc. By default it is #EF1E1E
  • Secondary accent color used for some accented elements or hover states. By default it is #2e2e2e

Additionaly you can select custom colors practicaly for any important theme area (header, subheader, footer)

Appearance settings will be more detailed described further in chapter Appearance

Content Options

Here you can set many content related options:


  • Social icons displayed in header and footer.
  • Disable or enable like counter for posts and portfolios
  • Disable or enable display comments on pages
  • Disable or enable display author info
  • Set witch post meta data will be displayed
  • Set default category and blog page layout
  • Excerpts length
  • Portfolio items per page
  • Default portfolio page
  • Email for built in theme contact form

Advanced

Here you can set some advanced theme options:


  • Use widget rules.
    This is very flexible feature witch allow set visibility, style for all widget individuall. More detailed is desribed bellow.
  • Use prefix free css
  • Add Google tracking code
  • Use thickbobx
  • Enable or disable support for OpenGraph and OpenSearch
  • etc.

Social API

Here you can set all social API related options:


  • Enable / disable Facebook like button
  • Enable / disable +1 button
  • Enable / disable tweet button
  • Enable / disable tweet cards support
  • Enable / disable pin it button
  • etc.

Branding Options

Here you can add some own brand to the theme:


  • Upload own logo for header and footer
  • Change default theme name
  • Change backend logo (on login screen)
  • Change favicon
  • Change default logo in admin menu
  • Change copyright text
  • Change theme author link
  • Change, enable / disable documentation link
  • etc.

SEO Options

Here you can customize build in the theme SEO:


  • Enable / disable built in simple SEO
  • Change default title
  • Change default description
  • Change keywords for home page
  • etc.

Woocommerce Options

Here you can customize some options for Woocommerce pages:


  • Enable / disable display sidebar on woocommerce pages
  • Enable / disable display add to cart button on catalog pages
  • Enable / disable display short descriptions on catalog pages
  • Count of chars in short descriptions
  • etc.

At this point, we will discuss briefly the basic aspects of the theme appearance settings. With the enhanced options panel you can set up virtually every aspect of the theme look without writing a single line of code.

Typography Settings

1. Setting font for body and headers

In Template Options -> Typography options panel you can select font family for different theme elements (body, headers and others)

As for the font family you have to choose the following options:

2. Setting font for custom elements

Additionally, you can choose up to three different fonts for different elements of the page.

A font family selection you can do as described above for the body and the headers. To assign the selected font family to a specific element, enter the CSS selector in the field below. As shown in the picture example selected font is assigned to an element with CSS class digit. You can assign selected font to meny elements adding coma seprated selectors.

3. Setting font size for body and headers.

Finally in the Typgraphy panel you can determine default font size for the body and headers.

General Settings

In Appearance panel in section General Settings you can choose:

If you select Boxed layout you will see some additional options:

Top Bar Settings

In this section you can enable or disable display of Top Bar.

If Top Bar display is enabled you can set some options.

Please note that:

Logo Styling

In section Appearance -> Head and Main Menu Style you can adjust logo type, size and position.

Firs of all you should select logo type:

Main Menu Settings

In section Appearance -> Head and Main Menu Style you set also main menu type. Maxine generally support three menu types:

Once you select Menu type you will see menu type specyfic options bellow

1. Top Menu Type Settings

If you select Top Menu type next step is selecting logo position.

You have following choices:

2. Off Canvas Menu Type Settings

If you select Off Canvas menu type you will see some options specific only for this type.

  • Enable or disable display of Social Links in aside menu area
    If you set this option to ON Social icons (according to settings in Template Options -> Content will be displayed in bottom of aside menu.
  • Rest of this menu settings (background color, menu lik colors colors, hover states etc is easy and intuitive. Please note that submenus colors in this menu type are the same as for default Top menu so if you will customize this colors please do it in appropriate settings of main top menu).

    3. Overlay Menu Type Settings

    If you select this menu type in top page area will be displayed only main logo and button to open Overlay menu. So in fact in this case you should only set Overlay menu background color and menu links color.

    Sticky Header Settings

    In section Appearance -> Head and Main Menu Style you set also Sticky Header Style options.

    Here you can:.

    Overlapping Header Style

    In section Appearance -> Head and Main Menu Style you can also set some options for Overlapping Header options.

    If you set Overlapping Heder to ON menu and header ara will overlapp area bellow (slideshow or subheader area). In this section you can set some options for overlapping header:.

    Subheader Area Style

    In section Appearance -> Subheader Area Style you can set default layout for subheader area.

    Here you can set default options for subheader area:

    Please note that each default subheader area style option can be overwriten in page or post options.

    Expandable Sidebar Style

    In section Appearance -> Expandable Sidebar Style you can set layout for expandable sidebar area.

    Here you can set default options for subheader area:

    Please note that expandable sidebar and button to open sidebar will be displayed only when any widget is placed in Expandable sidebar widget area.

    Main Content Style

    In section Appearance -> Main Content Style you can set some basic options for main content area colors.

    Footer Style

    In section Appearance -> Footer Style you can set some basic options for footer area.

    Copyright Area Style

    In section Appearance -> Copyright Area Style you can set copyright are style.

    Page Templates

    When creating a new page, one of the first things you might want to do is to assign an appropriate template for it. To do this, go inside the page backend and locate the section on the right called Page Attributes. Maxine comes with a variety of templates to choose from:

    Page Additional Atributes

    Now that you've chosen a template, let's go over the custom page settings.

    Here you can set some custom options and overwrite some default settings for each page:

    SEO Settings

    If you enable built-in Maxine SEO features Tempalate Options -> SEO you can additional set page keyword and description.

    Post Formats

    Post formats available in Maxine:

    Post Additional Parameters

    Here you can set some custom options and overwrite some default settings for each post:

    SEO Settings

    If you enable built-in Maxine SEO features Tempalate Options -> SEO you can additional set post keyword and description.

    Maxine theme has built-in custom post type portfolio. This post type is used for the presentation of your work in a standardized format

    Create Portfolio Item

    Go to Portfolio -> Add New and fill your content:

    Portfolio Item Types

    Available portfolio item type

    Portfolio Item Additional Settings

    You can set any portfolio item additional prameters (header overlapping, subheader style etc) as in the case of pages or posts.

    Maxine theme has built-in custom post type Slide.Slides can be organized in categories named Sideshows and than used in Flex slider or OWL Carousel

    Create Slideshow Item

    Go to Slides -> Add New.

    Generally, each slide can be declared as:

    1. Image Slide

    This type of slide use featured image of post. If you select this type of slide in post editor content area will be hidden (is not used by this type of slide) and visible will be only post custom fields:

    1. Content Slide

    This type of slide use content area of post (featured image, slide description and slide link will be ignored).

    This type of slide can be used in OWL carousels.

    Type of slide you can easy choose by edition and change any time.

    Maxine come with 7 built in widgets

    DP Comments

    DP Comments is a simple widget to display latest comments with user avatars:

    The configuration of the widget is really simple:

    As you can see, there are three important options:

    The DP Comments widget uses a built-in WordPress cache system and it refreshes the cache after every comments operation.

    DP Flickr Gallery

    DP Flickr Gallery is a simple widget to display flickr gallery in widget:

    dp-flickr

    The configuration of the widget is really simple:

    As you can see, there are only few options:

    To find Flickr user ID you can use idGettr .

    DP NewsFlash

    DP NewsFlash is a simple widget to display short post info from selected category (categories) in form simple slideshow:

    The configuration of the widget is really simple:

    As you can see, that are four important options:

    Additional you can set some apperance and slideshow options.

    DP Recent Portfolio

    DP Recent Portfolio is a simple widget to display latest portfolio with thumbs:

    The configuration of the widget is really simple:

    As you can see, there are three important options:

    DP Recent Posts

    DP Recent Posts is a simple widget to display latest posts with thumbs:

    The configuration of the widget is really simple:

    As you can see, there are three important options:

    DP Stock

    DP Stock is a widget used for displaying latest stock info. This widget use Yahoo Stock API.

    The configuration of the widget contains a some of useful options:

    You can decide witch general stock indexes (NASDAQ, NIKKEI, DAC etc.) should be displayed.

    Bellow you can add graphs for display stock prices of individual companies in the form of a slideshow. You can select so many companies as you will in form comma separated list of symbols. Symbols of companies used by Yahoo Stock API you can find here.

    Additional you can set up some slideshow parameters.

    DP Tabs

    DP Tabs is a simple widget which can be used for displaying other widgets in the tabs:

    The configuration of the widget, similarly to the DP Comments widget, is really simple:

     

    The most important option is the Tabs source - this option specifies the sidebar used as the data source of the widget. Especially for the DP Tabs widget, we have created three special widget areas – Tab I, Tab II and Tab III – these widget areas don’t exist on the theme and they can be used in the DP Tabs widget to avoid problems with the duplicated widgets.

    To create tabs, a user must drag some widgets to the specified in the DP Tabs widget sidebar. The titles of these widgets will be used as the tabs titles, the order of the widgets in the sidebar is also important – it will be used in the DP Tabs widget.

    So, for example, in order to achieve the DP Tabs widget layout as in the first screenshot, you have to put the widgets on the Tab I sidebar as following:

     

    The other options are strictly connected with the widget interface:

    The DP Tabs widget has no internal cache system but if there are widgets displayed in the DP Tabs widget then there will be no problems with caching the widget content.

    Maxine theme has built-in a few custom features.

    Mega menu

    We have built-in Mega Menu feature. It is simple to get started but powerful enough to create highly customized and creative mega menu configurations.

    Widget Rules

    Widget rules is a mechanism which introduces a completely new way to manage widgets on a website. Thanks to it, it is possible to specify widget features such as:

    After switching on widget rules in theme's advanced settings, under each widget, the following options should be displayed:

    The most extensive options are those connected with a widget visibility on subpages chosen - after choosing an option to show a widget on pages chosen (or an option not showing a widget on pages chosen), such a panel will appear:

    widget-rules-2

    Then, you have to choose a page's type to add, e.g. Category, and then give category ID:

    widget-rules-3

    After clicking "Add page" button, a page will appear on a list of pages chosen on which in our case a widget will be displayed:

    widget-rules-4

    Of course, it is possible to add more pages:

    widget-rules-5

    To make it clearer, , each page's type is displayed with a different color. A page added can be removed by clicking a removing icon placed on the right side of each page.

    In this way, you may set a widget so as to be shown on pages chosen or to be shown on all pages except the chosen ones.

    Generally, widgets are shown on all pages.

    An option of displaying a widget on devices chosen has five options to choose:

    Thanks to these settings, it is possible to limit significantly the amount of content displayed on devices with small screens. An option of displaying widget for a chosen groups of users has four options to choose:

    Thanks to this option, it is possible e.g. to display messages specified by using widgets for a group of users chosen.

    The last option from widget rules is an option for choosing a widget style - it causes appending to a widget main container an additional class giving styling specified by a user.
    Widget styles are defined in widget.styles.json file and in CSS code - in this case in css/basic.css.

    DP Icon Manager

    Icon Font Manager is a powerful tool that offers you a huge number of font icons to be used on your website. By default, we ship theme with the custom selected icon font library with over 1800 different font icons available. But if you wish to add more, you can upload new Icon fonts or delete existing ones that you might have added already using IcoMoon.io.

    There is a real time search box available as well so you can cross check and see if you have the icon available that you are looking for. If you cannot find the icon you want to use, custom font icons can be uploaded or the existing set of icons can be deleted too.

    To upload new set of icons:
    1. Go to IcoMoon App.
    2. Shortlist the icons by clicking on individual ones that you like. You have a real time search feature available as well if that makes your job easier.
    3. If you still can't find the icons that you want in the set, click on the link "Add Icons From Library…" at the bottom of the page where you can load more font icon libraries in your selection area where you shortlist and select your favorite icons (in step 2)

    4. Once you shortlist the icons for your set, click on the button "Generate Font" in the fixed menu at the bottom of page.

    5. The page that comes after you click "Generate Font" button in the last page is where you can review, edit and customize your selected icons.
    6. Once you are satisfied with your selection, find a button saying "Preferences" in the top menu. 

      Give a unique name to your icon set as doing so will create a separate class in Icon Fonts Manager.

    7. Once you gave it a name, click the "Download" button.

    8. A ZIP file will be downloaded.
    9. Now - go back to your website's "Icons Manager" area.
    10. Click "Upload New Fonts" then "Upload Files" then Select the ZIP file that we downloaded from IcoMoon & upload it.
    11. Finally - click "Insert Fonts Zip File" button at the right bottom and your new font will be uploaded quickly.

    Unlimited Sidebars

    In Maxine you can create unlimite count of custom sidebars (widget positions). It is very usuable feature because creted widget positions can be used later in Visual Composer. This way you can place any widget in any place on page.

    To create new sidebar:
    1. Go to Appearance -> Custom Sidebars

    2. Click Add New button

    3. Fill Titel and Description and save

    4. Custom sidebar (widget area) is added

    5. ...and ready to use

    6. SEO Support

      Maxine has SEO settings built - in which allow to overwrite Wordpress standard SEO settings. After switching on "Use Dynamo SEO settings" option, a lot of options connected with SEO will appear:

      The first group of options is connected with page's title:

      • Use blogname in title - this option allows to switch on showing a blogname in the title
      • Separator used in title - it specifies a separator which is between a title description and a pages's name
      • Title - description - it allows to specify page's title description (the first part of a title - before a separator)
      • Title - blogname - it allows to specify page's name (the second part of a title after a separator)

      The remaining options allow to switch on advanced management of keywords and description metatags:

      In the case of a homepage, these metatags values are specified in a SEO settings panel whereas in the case of subpages, there are two settings available for both metatags:

      • Disabled
      • Enabled (custom field in the post editor)

      When you switch on these settings, under a posts editor two additional fields will appear:

      If you fill them in, metatags used on one subpage with an entry will be created.

      Social API

      Social API includes five groups of options:

      • options connected with sharing at Facebook
      • options connected with sharing on G+
      • options connected with sharing on Twitter
      • options connected with sharing on Pinterest
      • options allowing to switch on/off Social API on particular subpages.

      Options connected with sharing are the equivalent of parameters available in online editors, used for creating buttons like:

      The last group of options allows to specify where they will be displayed – thanks to Include/Exclude specified articles from Social API option, it is possible to switch off Social API completely or switch on/off this functionality only for chosen posts, subpages and categories.

      We specify the list of posts, subpages and categories in three last options:

      as a sequence of ID, slug or the names of posts given, subpages or categories separated with comas, e.g. 

      1,7,23
      or
      about-us,meet-the-teem,contact-us

    Visual Composer

    Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.

    Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errorswith “shortcodes magic” – Visual Composer will take care of that.

    For your convenience nn Maxine theme we have added many new functionality to the standard VC elements:

    We have also add 40+ custom VC elements which add extra functionality to your website.

    Full list of our premium VC elements:

    Revolution Slider

    In Maxine We have implement popular Revolution Slider.