Documentation

Politist

Politist was created as a Joomlal 3.5 template with Quickstart for any political, election and other social movements websites, political party sites, local candidate profiles and other political websites that require newsletter and  e-commerce features (HikaShop). Full of features and flexible design can be used to create any other website. Template has many options to customize the final look of your website. Also with the SP Page Builder (Pro) interface will let you easily and powerfully edit and create a new layout of any page. The clean responsive layout follows current design trends, and offers both a boxed and open layout as well.

home default

Spending several minutes reading the manual may save lot's of your time and avoid forum questions with obvious answers. Following guide contains the basic configuration settings for the Joomla 3 template. Using these information you will be able to configure your template when you cannot use the Quickstart package. This template has been based on Helix3 Framework  >more<.

Technical requirements

It is strongly recommended that you always use the latest stable version of Joomla to ensure all known bugs and security issues are fixed. Template will only function properly on Joomla 3.5 and newer versions.

To prevent problems with used components and installation freezes (never ending) use following settings:

  • PHP 5.5+
  • MySQL(i) 5.5+
  • PostgreSQL 9+

To use QuickStart please use these php settings :

  • memory_limit --> at least 64M or 128 MB
  • max_execution_time --> at least 240 (by default is set to 30 seconds only.)
  • Magic Quotes GPC off

In most cases those values can be changed in php.ini or .htaccess file. Please contact your web hosting service provider to be sure your server complies with the requirements or to ask them where/how to change those settings.
About used browser we suggest to use latest version of Firefox, Safari, Chrome or Internet Explorer 10+. Please remember that Internet Explorer versions 8 and older are NOT supported anymore by Microsoft company.

Template vs Quickstart differences

The Quickstart package is a complete demo website. It's basically a fully functional and entire Joomla! 3 package containing the CMS itself, components, modules, chosen template, Helix3 framework plugin with all the configurations and data that we used on the demo site. You can use it to recreate/restore demo site appearance. You don't have to use demo content to build your own website, demo-dummy content is only for showing a features of current template and included components. After all you can remove it.
Standalone template package (~2 MB) doesn't include any modules/components nor demo content. If you manually installed the template on your existing setup, you will have to manually create each article and install & set all modules to suit your needs using our example settings. Also subpages created via SP Page Builder should be restored or created from scratch. So if you are not advanced user please install the template Quickstart on your testing ground/environment, just to get more insights on sample content and advanced usage. You will be able check each setting or used demo content.

Note! We recommend that you download Joomla and/or Quickstart only from the official websites. If you download the installation package from other than the official one, there is a risk of malicious code in the setup files. We do not support illegal, mostly infected, copies.

Note! Inside QuickStart there is a full version of SP Page Builder Pro installed already. But during purchase of template membership you didn't get a update possibility of this component. To get standalone PRO version you have to purchase it from that page: https://www.joomshaper.com/page-builder

 

How to install Quickstart

  1. Unfortunately, it is not possible to install the Quickstart package inside an existing Joomla installation via the Extension Manager. Why? Because the Quickstart also includes the Joomla! CMS itself. This package is strictly for use with a new Joomla! installation to provide you with a duplicate of our demo for that particular template.
  2. You can install Quickstart just like a typical Joomla 3.x installation process (step by step).
  3. Download from our site package : TemplateName_quickstart_j3.zip.
  4. Unzip Quickstart package to get separate folders and files before sending them to server.
  5. Upload the extracted files and folders to your web server - for that task please use SFTP/FTP tool - in most cases it will be public_html folder.
  6. Create a MySQL database and assign a user to it with full permissions. In most cases we suggest to use a new/fresh database (MySQLi) for all QS installations.
  7. Open your browser and navigate to your main domain (i.e. http://mydomain.com), or to the appropriate subdomain (i.e http://mydomain.com/new), depending where you have uploaded the Joomla installation package.
  8. You will be taken to the first screen of the Joomla Web Installer.
  9. Please do not use "admin" as a your default Super Admin Username (!). Use something more unique during installation process (security reasons!).
  10. Default Demo sample data will be automatically installed on your server.
  11. After successful installation change our demo texts, menu items and images.
    Please also read our article -> I’ve installed Quickstart, So what’s next?

 

The Quickstart installation problems

Because QS includes many extensions and their settings it request good PHP settings. Check mentioned above technical requirements.

If during QuickStart installation on localhost you have never ending installation, please check your PHP settings (suggested values above) and if those settings will not help please make small customization:

  • Open in your text editor the following files: installation\sql\mysql\joomla.sql and installation\sql\mysql\sample_data.sql
  • Find all instances of ENGINE=InnoDB and change/replace to ENGINE=MyIsam
  • Now return in your installation procedure one step back and try again.

No images from demo

demo img smThe images shown in the live preview are for demonstration purposes only and are not included in the download package. Due to license QuickStart package contains mostly only image placeholders (Grey background blocks with JoomShaper logo inside).
Unfortunately we cannot include in Quickstart package all photos from original Template Demo. We assume that our customers have (or should have) their own photos, which better fit to real website purposes. First online impression is the most important, so please use high quality and legal photos.

 

The Manual template installation is preferred if you just want to install the template to an existing website which already has some content. However, keep in mind that when you install the template to an existing website, you will also have to reconfigure used modules because the new template has different module positions. But we always suggest to install QuickStart on temporary location, like sub-domain, to check all settings and demo content.

 

Template Demo Settings

If you installed only template (not Quckstart !) you can import template demo settings. Template settings doesn't include settings of modules nor components. Helix3 template allows you to Export-Import its settings from "Advanced" tab. It means that you have to download a >>settings file<<, then unzip , next select whole text, copy and paste inside Import field of your template. It includes all basic settings of Template only !. If you're using Quickstart you doesn't have to do this, default settings are already there.

import export

Typography

In template demo we used Google Font named: Montserrat for all main and menu typography. And Grand Hotel font for custom class: .politician-name.
Check template Typography tab inside Politist template settings, of course you can set your own font-family. More information about Typography you can find >> here <<. Remember that not all Google Fonts support multiple scripts (like Latin, Cyrillic, and Greek for example). Use them if you need to use diacritical marks/chars, native language letters.

typo

 

Layout - Module Positions

The following screen-shot highlights the default layout module positions that we used in current template. By using Layout builder in Helix3 users will be able to move positions or change their size in the grid. Our in-build layout builder from template settings provide the opportunity to add new positions, columns, rows wherever you need as much as moving elements.

layout

These are the all available module positions:

  • title
  • top1
  • top2
  • logo
  • menu1
  • menu2
  • search
  • slide
  • user1
  • user2
  • user3
  • user4
  • left
  • right
  • feature
  • slider
  • position1
  • position2
  • position3
  • position4
  • position5
  • position6
  • position7
  • position8
  • bottom1
  • bottom2
  • bottom3
  • bottom4
  • breadcrumb
  • footer1
  • footer2
  • comingsoon
  • offcanvas
  • pagebuilder
  • 404
  • debug

It means that you can use all on them on layout grid. If you need more, you have to add new name inside: templates\shaper_politist\templateDetails.xml

Mobile view customization

If you want to have more control under mobile view you can create 2nd row with similar positions, but please remember to disable visibility/display from Desktop and in original row hide on mobile view. In following screenshot you can see layout modified to be more mobile useful (3 columns). In this case, hikashop basket (module) will be also visible.  Layout modified to be more mobile useful (3 columns)

Menu Settings & Color

In Politist template we used divided top menu, two separate menu - one for left and second for right side.

menu info

Color of menu items you can control by Preset settings (template) or by using custom css code inside custom.css file (more info here). If you chosen second method here is example CSS code which can help you during customization tasks:

.sp-menu-item > a {
    color: green;
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
    color: blue;
}

You can also customize/change background color of menu bar, also using simple line of CSS code:

#sp-header, #sp-mobile-header { background: pink; }

Above CSS code works both for desktop and mobile view, two different class names.

Blog settings

Here are Helix3 Blog settings also for Image Thumbnails:

blog

 

Homepage Layout

The following screenshot shows the detail of Politist template settings of "Home" page with list of the addons used in the demo content configuration. Please note, Home page was built using SP Page Builder (PRO) component. Here is default "Home" layout from demo site created in SP Page Builder Pro tool provided by JoomShaper team.

home

 

How to remove blue shape from slider

Please use :

.slider-variation-1::before, .slider-variation-2::before, .slider-variation-3::before {background: transparent !important;}

Where? Inside custom.css file.

 

Campaign Layout

Here is Campaign layout from demo site created in SP Page Builder Pro tool provided by JoomShaper team.

campaign

 

Success Layout

Here is Success Variant layout from demo site created by SP Page Builder Pro tool provided by JoomShaper team.

success

 

Volunteer Layout

Here is Volunteer Variant layout from demo site created by SP Page Builder Pro tool provided by JoomShaper team.

wolontariusze

 

Biography Layout

Here is Biography Variant layout from demo site created by SP Page Builder Pro tool provided by JoomShaper team.

biography layout

What is important in module addon we used Custom HTML module (pagebuilder position used), which in demo include following HTML code:

<div id="timeline">
<div class="row timeline-movement timeline-movement-top"> </div>
<!-- 18 March 2011 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel left-part">
<p class="title">Co-Founder</p>
<p class="details">Joomla political parties</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12">
<p class="timeline-date">18 March, 2011</p>
</div>
</div>
</div>
</div>
<!-- 28 June 2011 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12 left-timeline-date">
<p class="timeline-date text-right">28 June, 2011</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-offset-1 col-sm-11">
<div class="timeline-panel">
<p class="title">Sub-Editor</p>
<p class="details">Republic political parties</p>
</div>
</div>
</div>
</div>
</div>
<!-- 09 April 2011 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel left-part">
<p class="title">Secretary</p>
<p class="details">StarWars political parties</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12">
<p class="timeline-date">09 April, 2012</p>
</div>
</div>
</div>
</div>
<!-- 29 January, 2013 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12 left-timeline-date">
<p class="timeline-date text-right">29 January, 2013</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-offset-1 col-sm-11">
<div class="timeline-panel">
<p class="title">Founder</p>
<p class="details">Yoda political parties</p>
</div>
</div>
</div>
</div>
</div>
<!-- 09 April 2011 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel left-part">
<p class="title">Senate Leader</p>
<p class="details">Wordpress political parties</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12">
<p class="timeline-date">03 February, 2015</p>
</div>
</div>
</div>
</div>
<!-- 28 June 2011 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12 left-timeline-date">
<p class="timeline-date text-right">19 May, 2015</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-offset-1 col-sm-11">
<div class="timeline-panel">
<p class="title">House Leader</p>
<p class="details">New political parties</p>
</div>
</div>
</div>
</div>
</div>
<!-- 09 April 2011 -->
<div class="row timeline-movement">
<div class="timeline-badge"> </div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel left-part">
<p class="title">Youth Wing</p>
<p class="details">Modern political parties</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6  timeline-item">
<div class="row">
<div class="col-sm-12">
<p class="timeline-date">11 January, 2016</p>
</div>
</div>
</div>
</div>
</div>

Of course you can and you should customize above code and replace with real content.

short bio

 To get two colors header label we used Section subtitle in Row Options, please check following screeshot to see all important settings.

row timeline

 

Used Extensions

In JoomShaper Politis template we used both Joomla core and additional extensions, here is a full list of them:

  • SP Page Builder Pro - Pro version is built-in in QuickStart only (JoomShaper.com)
  • SP Simple Portfolio (component + module from JoomShaper.com)
  • SP Campaign Timeline (module from JoomShaper.com)

  • HikaShop (component + modules from Hikashop.com)
  • AcyMailing Starter (component + module from Acyba.com)

  • Articles - Latest (Joomla core module)
  • Articles - Categories (Joomla core module)
  • Banners (Joomla core module)
  • Breadcrumbs (Joomla core module)
  • Custom HTML (Joomla core module)
  • Login (Joomla core module)
  • Search (Joomla core module)
  • Tags - Popular (Joomla core module)
  • Menu (Joomla core module)
  • Language Switcher (Joomla core module)

Module Manager View - with list of all used and published modules

modules

 

SP Campaign

It's a new component with modules which allows you manage different campaigns.

sp campaign

 

Mobile Menu

mobile menuThis template was based on Helix3 framework it means that allows you to use Off Canvas Menu [=] for Small Tablet and Smartphone views. It doesn't have to be Main Menu, it means that you can easily use different menu for desktop and  separate menu for Mobile & tablet devices. To create such a menu Add/Edit a Menu module and change its position to "offcanvas", select Menu from the list and assign module to all pages. 

To add search or other module inside offcanvas menu window, you have to publish those additional module(s) in "offcanvas" position and then choose their order relative to each other.

 

Coming soon page

During time of building new site, for example process of adding new content, you can hide construction stages.

coming soon

All settings are inside template settings in Basic tab, just scroll down.

coming soon2

Customizations tips:

  • background image: templates/shaper_politist/images/coming-soon-bg.jpg  - just replace image file.
  • logo image inside coming soon page: images/demo/coming-soon-logo.png - just replace or add new image file.
  • newsletter field - publish newsletter module for example AcyMailing Module on "comingsoon" position.

newsletter

  • social icons at the bottom - can be set from template settings, also from "basic" tab.

social icons bottom

Translation

Both Helix3 and SP Page Builder can be translated, because their language layer is based on .ini files. You can also check here: https://www.transifex.com/joomshaper/public/

Guide how to translate phrases from SP Page Builder you will find here: https://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder#documentation-14

Also all other content and labels can be translated, first check on developer site if your native language files are available. For example for HikaShop, AcyMailing etc.

Newsletter