Introduction
Welcome to the CrossCare documentation!


CrossCare is a responsive and modern template for Joomla 3.0+, one of the best Open Source content management systems (CMS) out there.
The following documentation will help you to install, setup and maintain the template and it ´s file(s) and features. If you have further questions, problems or if you need support feel free to contact us. Just fill out the contact form at our website here.

Important links:
Template Facts
Provider pixelsparadise.com
Designer Holger Koenemann
Version History
  • 1.0 23. July 2013 - Main release
Joomla compatibility Joomla 3.0+

Installation
How to install this Joomla! template?


Step 1 Download the template package and extract it to your local HDD

IMPORTANT!: The downloaded .zip archive is NOT the installation file. Extract it first!

Download the template file from the pixelsparadise.com download section. The template package itself is a simple .zip archive. The installation file (and other useful stuff like this doc) is included in the .zip file. You have to extract this archive to your local HDD first. In the new folder you will find another .zip archive called install_templatename.zip. Thats the installation file for your new template. Keep it´s location in mind and head over to step 2…


Step 2 Install the template

Log into your Joomla´s admin backend (enter http://www.yourwebsiteurl.com/administrator in your browser) and click on "Extensions -> Extension Manager to access the extension manager. Hit the "Search" button, select the installation file from your HDD and hit the "Upload & Install" button. Wait a moment till you see the success message. Depending on your internet connection it can take from a few moments up to a minute or so. So be patience and don´t close the browser window.


Step 3 Activate and setup the template

now your new template is installed but inactive. To activate it click on "Extensions -> Template Manager. A list of all installed templates appears. Search for your new template and hit the "default" button right next to it. Your template is now installed and active and you can start to set it up by following the next steps in this document.

Configuration
Access and edit the templates settings


The template comes with an configuration panel which is accessible from your Joomla backend.
To access it click on "Extensions -> Template Manager. A list of all installed template themes will appear. Just click on the templates name to open the configuration panel. Now select the "Options" tab to edit/check the templates settings.
The options panel is separated into two section: "Basic Options" and "Advanced Options". "Basic Options" are important settings to run the template while "Advanced Options" are for optional settings/features. A table with all options and it´s function´s can be found below.


All options marked with Optional are not available in any templates option panel.

Basic Options
Display a image, text, module position or text and image as logo? Select if you want to show the logo as image, text, module position or image with text.
Enter logo text if logo type is set to text or image and text Enter the text/sitenme which should appear as logo. Works only if the option above is set to 'text' or 'image and text'
Upload logo image Select a image from the Joomla internal media manager. If nothing is selected but the logo type is set to 'text' or 'image and text' the template use the 'sample_logo.png' file from its own '/img' folder
Type of background image Select if the template should use a full size background image or a texture
Select a background image Select a image from the Joomla internal media manager. It will be used as texture or full size image if a type is selected above. If nothing is selected but the background image option above is active the template use the 'sample_background.jpg' file from its own '/img' folder
LTR or RTL text flow? Let you select the text direction. LTR = Left-to-Right, RTL = Right-to-Left
Optional Select basic layout Select if the website should use a fluid, fixed or responsive main layout
Optional Select max width in px If the basic layout is set to fixed width or responsive you can define a max width in pixels here
Optional Select min width in px If the basic layout is set to responsive you can define a min width in pixels here
Advanced Options
Type of slide effect Choose the type of slide animation between one and another slide
Time from one slide to another Enter the time between one slide to another in ms. Default is 1000
Autoplay Enables the autoplay function for the build-in module slider
OptionalShow slider pagination Show links with dots/numbers for every slide
OptionalShow slider Arrows Show Prev and Next links/images to slide manually
Stops on hover The slideshow stops on mouseover. Good for longer content or videos
Loop Slider content? If enabled the slider will restart from the beginning. If disabled slider will stop at the end
Time per slide Time one slide appears in ms. Default is 8000
Select a Sub Theme CSS file This applies a extra style.css file from the selected subfolder of the sub themes directory. Can be used for development issues. You can add/remove certain styles and overwrite the default CSS with it without touching the original files.
Activate Mootools? Older extension can require Mootools JS framework. In this case you can turn on this option here
Show Component Enables/disable the main component output. Can be useful for developing websites with just content modules

Module Positions
Learn where you can publish modules


The template comes with a set of 15 available module positions. You can publish a unlimited number of modules on each position and add a horizontal width to them by adding a specific module class suffix (read more on this in the next chapter Module Layout). All available module positions can be seen here:

Module Layout
Setup the modules width


12 columns grid system

The template based on a 12 columns grid system. Means any module can have a size from 1/12 of the provides space up to 12/12. For example a module which use 6/12 has a width of 50%, a 4/12 module use 33.33% of space etc. You can apply the size to a module by adding a module class suffix. A module class suffix can be added on the modules config screen (see below). Just type in spanX while X must be replaced with a number from 1-12. So a module with the suffix span3 uses 3 of 12 columns or 25%. If you add four modules on the same position (all with the span3 suffix) you will have four modules side by side. Of course any other combination is possible as soon as the total amount of columns needed is not higher than 12. For example one span6 module followed by two span3 modules will result in a row of three modules, the first use 50% width, the second and third 25% each.

Below you will see (just a few) possible layout combinations for a single module position:


Add a Module Class Suffix

To add a suffix to apply a certain width to a certain module click on Extensions->Module Manager and select the module you want to equip with a suffix. The modules config screen will appear. Select the "Advanced Options" tab and enter the suffix to the "Module Class Suffix" input field. Save the changes.


More than one row of modules?

What happens if you publish more modules than fit into the 12 columns grid? For example two modules with the span6 suffix and a third one with span12 as suffix? In this case the first two modules will appear in the first row and the third one starts a new row below. That normally will works fine but you will see a small gap in front of the first module in the second row. To avoid this also add the suffix new-row behind the span12 text. Its important to have at least one empty space between both words. So the full suffix for this sample will be span12 new-row. You just need to add this extra suffix to the first module of the second, third, fourth etc. row.


Custom modules

Creating and publishing your own modules with your own custom content like images, texts, HTML etc. is very easy. Click on extensions->module manager in your Joomla backend. The module manager will appear. Hit the "New" button at the top to create your own module. Select as type Custom HTML if you don´t want to use a pre-made module but want to add your own content. The configuration screen of your new module will appear. give it a name, select the proper module positions and add your own content under the "Custom Output" tab. Save the changes and make sure the module is published. Thats it. Your new module with your own custom content will appear on your website. Make sure you publish it on a module position which is supported by your template. To check which position is supported by this template check -> Module Positions

Special Functions
Setup and activate the build-in Slider, Drop-Down´s etc.


The Module Slider

This template comes with a build-in module slider script. It slides or fade from one module on position slider_modules to the next one. You don´t need to activate it. As soon as you publish more than one module on this position the script will start it´s work. All important options (slide speed, slide effect etc.) can be setup at the templates settings screen. See -> Configuration.


Recreate the demo sites module slider

To recreate the look&feel of the demo sites slider follow the "CUSTOM MODULES" instructions on the Module Layout page. Create a new custom module and add the following HTML code to it:
<p><img src="templates/crosscare/img/sample_header1.jpg" alt="header" /></p>
Publish it on the slider_modules moduleposition.


The Drop-Down Menu

The drop- down function hides all submenu items as long as the user move its courser above the corresponding main menu item. Than it shows an extra menu below with all submenu items in it. To activate the drop-down function of your main menu just add the menu class suffix nav-dropdown to your menu module which is published on the module position main_nav. Thats it. To add a menu class suffix to a certain menu module click on extensions->module manager and select your menu module from the list. The menu modules config screen will appear. Select the "Advanced Options" tab and enter the suffix into the "Menu Class Suffix" input field.


Show Sub-menu Items

One important thing you have to check if no submenu items appear is the Show Sub-menu Items option in your menu module configuration. It must be turned on to have a working drop down menu on all (sub)pages of your website. You find the option below the "Basic Option" tab on your menu modules setup screen. Click on "extensions->module manager and select your (main) menu module from the list to access the config screen.


Modal Prompts

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality. They provide content from a module and are hidden by default. They pop up if a certain link or button is clicked. The template comes with the positons modal1, modal2 etc. Place and publish a module on one of this position(s). To give your users the opportunity to see this module add the following HTML link code somewhere to your content:
<a href="#modal1" data-toggle="modal">Open modal</a> That will open a pop up window with the modal1 module and its content along with a "close" button. Use:
a href="#modal2" for the modal2 module etc. Instead of the plain "Open modal" text you can use an image, a list element, button or any other proper HTML element as long as you wrap the <a href="#modal1" data-toggle="modal">...</a> link code around it.

Quickstart Package
How to use the Quickstart Package


Besides the templates itself we provide so called "Quickstart Packages" for most of them. Basically a Quickstart Package is a default Joomla installation BUT with the template files and templates demo site content in it. You have to install it like a normal Joomla installation (along with the "sample data" demo content) and you will get an exact copy of the templates demo site. What you have to do:

  • Download the Quickstart Package for your template here (IMPORTANT!: This link will just work if you are logged in to your active account at pixelsparadise.com): Quickstart Packages
  • Extract the zip package to your local HDD
  • Upload it via FTP to your webspace/server
  • Open the corresponding URL in your Browser to start the Joomla installation process
  • Follow the instructions and install it like a normal Joomla package
  • Also install the "Default English (GB) Sample Data" during the installation process on step 3 "Overview".
    The official Joomla installation doc can be found here.


Doc Version 1.01 / March. 12th 2013