Xtec Joomla!

Template Manual
Xtec is a modern and professionally designed template for your Joomla!
website.
The template is available as free and pro version. The free version doesn't
contain features such as custom color setup, the slider and various other
template specific features. The pro version contains all the features and the
ability to turn off the footer copyright.
The pro version can be obtained from here: http:crosstec.deen!oomla"
templates.html
#. Requirements
The Xtec template re$uires either Joomla! %.& or '.(, each in its latest version.
)f you don't run them in their latest versions *for e(ample Joomla! '.%.% at the
time of writing+, it can lead to odd display results.
The template is based on the ,ree -./ -antry ,ramewor0 to deliver you the
best results and helps maintaining your template and 0eeping it up"to"date.
,or your convenience, the template installs the -antry ,ramewor0
*http:gantry"framewor0.org+ upon installation.
The -antry ,ramewor0 is installed from our servers at
http:crosstec.degantry.1ip and is an e(act and untouched version of the
latest version available at http:gantry"framewor0.org. )f -antry doesn't
install upon the template installation, chec0 the frontend and the message with
further instructions. 2sually you need to download -antry for free and install
manually.
)nstalling and 2ninstalling described below.
%. Installation
#. 2n1ip the file template3(tec3245).3,)67T.1ip
%. )n Joomla!, go to 8(tension Manager )nstall and install the file
tpl3(tec.1ip
'. 9pen 8(tension Manager Templates Xtec and ma0e the default
website template
:. ; .69 <867)94 94/=: ,rom the un1ipped
template3(tec3245).3,)67T.1ip pac0age, browse to the >modules?
directory and install each plugin in the Joomla! 8(tension Manager one"
by"one.
&. Ma0e sure all other assets li0e slider and the -antry ,ramewor0 have
been installed
#. -o to 8(tension Manager Modules and see if you have
unpublished modules called >6esponsive 7lide 7how?, >6esponsive
@over 7lider?, >.aralla( 8ffect Module? and >Xtec )conicAuttons?.
%. ,or -antry go to 8(tension Manager Manage search for
>gantry? you should see a list of ' -antry related entries
'. 4ow open your website's frontend in your browser. =ou should see a
plain website with the menu already on top of the page. ,ollow the
instructions below to complete the setup.
./8B78 49T8: if the template doesn't display properly after installation, you
need to install the -antry ,ramewor0 separately. )n that case, please download
the file http:crosstec.degantry.1ip and install it in 8(tension Manager
)nstall.
Tip: .lease ma0e sure that you always 0eep your Joomla! )nstallation, the
template and -antry up"to"date.
,or template updates visit http://crosstec.de and for Joomla! -antry chec0 the
update notifications in the Joomla! Cashboard.
'. Uninstall
)f you wish to uninstall the Xtec template, please go to 8(tension Manager
Templates and choose a different default site template.
Then go to 8(tension Manager Manage search for >Xtec? chec0 all
related Xtec entries and clic0 >uninstall?. Then search for >gantry? chec0 all
related -antry entries and clic0 >uninstall? *please remove -antry only if you
don't use other templates that are based on it!+.
,inally delete the : modules that you previously installed from the >modules?
folder in the template3c(tec3245).3,)67T.1ip pac0age.
:. Building The Site
#. Menu Paging *.ro version only+:
#. The menu should already be assigned and visible after installation and
enabled. ; .69 <867)94 94/=: The menu will display >/ess? or
>More? buttons if the total width of the menu would e(ceed &&Dp(.
=ou may edit this values or turn off menu paging in 8(tension
Manager Template Manager Xtec Tab >,eature?.
2. The menu setup supports several features such as te(t and image
icons E module display. Fe suggest to chec0 out the -antry
Cocumentation for further instructions and see what's possible:
http:www.gantry"framewor0.orgdocumentation!oomla
2. Horizontal Login (optional
#. )n Joomla! 8(tensions Module Manager enable the /ogin ,orm
Module and enter its settings. -o to the tab Bdvanced and from
>Blternative /ayout?, choose >hori1ontal?. Bs module position choose
Xtec top"b
%. This will let the Joomla! /ogin ,orm menu display as simple hori1ontal
login right beside the logo.
'. =ou can also add the search right after, !ust enable the 7earch module
and place it into the module position Xtec top"c.
'. Slider *.ro version only+:
#. -o to 8(tension Manager Modules open 6esponsive 7lide
7how create your slides disable title display for the module
assign the module position showcase"a save the module.
%. )f you want to create GTM/ te(t overlays, please separate each
page by using >pagebrea0? in the GTM/ editor. 8ach page inde(
must get along with the slide images you are using.
'. <isit your website frontend and chec0 if the slider is wor0ing.
:. ,or further instructions of the slider, please chec0 the slider's
separate manual that ships with this template.
:. Bread!rum"
#. The breadcrumb is a central design element in this template. Though
you can leave it out, it is recommended to add it. )f you decide to add
the breadcrumb, please go to Joomla! 8(tensions Module
Manager open the Areadcrumb module disable its title display,
choose the module position Xtec Areadcrumb and publish the
module.
#. $Un%&!enter module titles and te't i( demanded
#. Ay default, the template will center titles and te(t if there are # or %
modules enabled within a position. To disable this behavior, add >ct"
align"left? in each module's advanced tab HI module class suffi(.
%. 6epeat this for any module that should be aligned left or use more
than % modules per position.
'. Tipp: )n the same way, you can force modules and html elements to
be centered. )n that case add >ct"align"center? as class.
J. )ustom )olors *.ro version only+:
#. @hanging colors is pretty straight forward: -o to Xtec template
@olors tab and choose the desired colors for your website.
2. Ae aware that changing some colors affects the colors of different
elements. )n order to find a nice color scheme for your site, we
suggest to use tools li0e https:0uler.adobe.comcreatecolor"wheel
and apply them to your custom colors.
K. I!oni! Buttons *.ro version only+
#. To display the animated icon buttons li0e in our demo, please go to
Joomla's module manager and create a new >@rosstec )conicAuttons?
module instance. There, choose your desired icon, add some te(t and
choose your module position. )t is recommended to use # )conic
Autton per module position slot.
L. Responsi*e )o*er Slider *.ro version only+
#. To display cover slides li0e in our demo, please go to Joomla's module
manager and create a new >6esponsive @over 7lider? module
instance. There, browse to the tab >@over 7lider 7etup?. ,or each
slide, add your te(t andor images and create new slide pages by
clic0ing the >pagebea0? button underneath the html editor.
%. )f you want to display more than one cover slider instance on one
page, you might need to define a uni$ue >Module @lass 7uffi(? below
the html editor. 9therwise multiple cover slider instances might
interfere.
M. Paralla' Module *.ro version only+
#. To display custom html with paralla( effect li0e in our demo, please go
to Joomla's module manager and create a new >.aralla( 8ffect
Module? instance. There, browse to the tab >.aralla( /ayer 7etup?. ,or
each layer, add your te(t andor images and create new layers by
clic0ing the >pagebea0? button underneath the html editor.
%. =ou may use any module position for a module instance but it is
recommended to use either paralla(top or paralla(bottom as these %
positions are #DDN wide and thus using the template's full width.
There are some rules when adding new layers:
#. Fhen adding new layers, the first layer will be the one with the
lowest inde( *Hmost distance+.
%. )f you want to add images per layer to act li0e bac0ground images,
then please add a regular image per layer, using the html editor
and specify the e(act width and height of the image *must be the
real dimensions+. )f you leave out the dimensions, browsers li0e
,irefo( can't properly scale the layers and lead to odd effects.
.lease chec0 the default value when creating a new instance so
you can see how it's done. 8lse than that, you may add any 0ind of
html, !ust li0e the @ustom GTM/ module that ships with Joomla!
'. 8ach layer is by default automatically resi1ed to #&DN and its
boundaries partially hidden such that mousetouch gestures won't
reveal the previous layer's bac0ground. This means, that your
*>bac0ground?+ images should be at least resi1ed by %DDN to
prevent visible aliasing on retinaGC devices.
:. Cepending on the dimensions of your images, you might want to
ad!ust some widths and offsets. =ou can find these options
underneath the html editor *image width and offset options+, which
accept numeric percentage values.
#D. +ther ,eatures *in template ,eatures tab+
#. 7how ToTop Autton: 8nable Cisable this to display hide a button in
the lower right corner of the site that scrolls bac0 to top when clic0ing
on it
2. 9ther features available are self"e(planatory or described in the
-antry ,ramewor0 documentation available at http:www.gantry"
framewor0.orgdocumentation!oomla
##. Module Positions:
1. ,or dealing with module positions we recommend to read the
documentation available at http:www.gantry"
framewor0.orgdocumentation!oomla
%. 8ach module position has its own purpose and color scheme, you
however should focus on the mainbody *component+ and add module
positions only for pages re$uired.
3. 9ur templates strictly follow the standard -antry module positions
and can also be viewed here
http:crosstec.detemplatedemos##inde(.phpfeaturesmodule"
positions.html
#%. T-pograph-:
Aoth versions of this template for Joomla! %.& and '.( support Twitter
Aootstrap, so you have a definition of typography that you can rely
on. .lease consult our typography overview page of this template to
see the details:
http:crosstec.detemplatedemos##inde(.phpfeaturestypography"
styles.html
#'. .eneral /otes:
1. Ma0e sure you chec0 the template demo to get an overview of the
e(isting module variations and other things that are not e(plained
here or you can't find: http:crosstec.de templatedemos##
2. ,or further information, help and new please visit http:crosstec.de
fre$uently