slide-rocce

Template FAQ

1How to enable and use
the wide slide
features?

The template incorporates a set of CSS classes to make the DJ Slider look unique. To get an idea of what I am talking about, please install the Quickstart and explore the slides of the "Wide Category".

First we will deal with the div.desc-wrapper. This is a custom class to enable you to style the slide description further, without altering the DJ Slider core code.

Example
<div class="desc-wrapper">
<p>YOUR OTHER HTML CODE GOES HERE</p>
</div>

Notice I've used paragraph tags, that is important for Typography. Ok now let's add some H1 heading (excellent for SEO), set some background color for this wrapper and make it fill only a portion of the template width.

Example
<div class="desc-wrapper black tre">
<h1>Your H1 title goes right here</h1>
<p>YOUR OTHER HTML CODE GOES HERE</p>
</div>

Available background colors: white and black. This class will also change the text color to contrast and showcase the content at it's best.
Available heading tags styling: H1, H2, and H3.
Available wrapper sizes: due - 50%, tre - 33%, and quatro - 25% of the template width of 980px.

In some cases you might want to "stick" this wrapper to the right side of your slide. There is a class for that too!

Example
<div class="desc-wrapper white quatro right">
<h1>Very Cool Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p><a class="button big gray" href="#ja-footer">Button</a> <a class="button big gray" href="#ja-footer">Button</a> <a class="button big green" href="#ja-footer">Buy Button</a></p>
</div>

To use the special buttons, you need to set your DJ Slider module to use them so open the module, Advanced Options tab and add the following file paths in the CUSTOMISE BUTTONS section:

  • templates/technik/images/prev-slide.png
  • templates/technik/images/next-slide.png
  • templates/technik/images/play.png
  • templates/technik/images/pause.png

To enable the wide special position for the slide navigation buttons, you need to use the _wideslider class suffix for your DJ Slider module.
Well that's about it! Check the Quickstart for more!

Tip: you can include buttons as you can see in this example, use the right color to match your slides.

2How to enable and use
the module description
for your content modules?

The template incorporates a unique script to enable using module descriptions. The mechanism is simple: the script can detect a "|" symbol and split the module title into a the new title (witch is before the "|") and a span that will be inserted after the new title.

The script works only if your module shows the module titles and the module position allows xHTML module style, so here is how to do it:

  • go to Modules Manager
  • select any module and click the Edit button
  • click inside the Title field
  • type Shift + \ to make the "|" symbol
  • write your module description after the symbol
  • an example of the complete title: Module Title | Module Description
  • click Save.

Congrats! Now you have enabled the module description for your module.

 Next you can highlight the module in a specific way.
Check module styles here.

3How to add a new module
to your newly installed Joomla!
(when you didn't install the sample data)?

To recreate the template demo design, you will have to install the Joomla! 1.7 Quickstart. If you manually installed the template on your existing setup, you will have to manually create each article and module to suit your needs.

Breadcrumbs Module
I will show you here how to enable the mod_breadcrumbs module as one of my new friends asked me how.
Here we go:

  • go to Modules Manager
  • click New button
  • select the mod_breadcrumbs module
  • make sure it’s published, it's assigned to the template breadcrumbs position and is set to be displayed on all pages
  • click Save.

Congrats! Now you have the module published on your development setup. The arrow is shown via CSS, no longer required outside the template.

4How to keep the vertical rhythm
when using images,
forms and other elements?

Sick of the non professional and poor (or flat) look of many websites? It's a matter of Typography! The design of the text content and images insertions need to create and maintain the vertical rhythm. Luckily this template is already designed to accomplish this goal, you only need to learn how to use it for your needs.

Paragraph
It all started with the darn paragraph! The template default font size is 12px and line height of 1.5 witch means that each text line of the paragraph is exactly 18px and requires a 1.5em margin-top and margin-bottom to preserve this 18 pixels based sizing and spacing. Wait there's some math coming (you will love it!).

Images
Images need to be sized in such way that they don't break the lines of the vertical rhythm. The floating images don't need this usually (although it would help a lot), but images that fill the entire line do.

So what's to do?

  • crop your images to fill the full width of the content body or the module you want to create and
    the height must be multiple of 18px. Examples: 36px, 54px, 72px, 90px, 180px, 360px, etc
  • wrap the non-floating images in <p> </p> tags to inherit the margins
  • use the vertical rhythm checker of the Tools panel to make sure it's perfect
  • that's it folks!

Forms
Forms need to be taken care as if they were images with variable width x height. Why? Cross-browser support of course. Chrome renders forms quite different than Firefox.

So what's the solution?
Setting a maxim-height to be a multiple of 18px would be perfect and make sure elements inside fill the form equally spaced. This should do the dew.

Borders
Another unwanted line breaker. Well, there is almost nothing in this template to use borders because I don't want to break the line in anyway, but if you choose to use one border-top or one border-bottom let's say the line break is not so visible and even 2 pixels, but if there are solutions, why not use them?

Solution is simple:
Use box-shadow: 0 0 1px #333 inset; -webkit-box-shadow: 0 0 1px #333 inset; (for boxes)
or background: url('/../images/pb2.png') repeat-x top; (for one line)

5How to customize
the Tools panel,
just to suit your needs?

The template comes with an easy to customize tools panel to serve as a customization tool and also to provide various navigation, design and layout information.

In order to customize it, you need to locate it your-site/templates/technik/blocks/panel.php and open it with your favorite code editor. As follows, I'll show you some basics on customizing it for your various needs.

Panel Heading
You may want to show the site name there? Something like MyWebsite Tools.. well it's pretty easy right in the code! Open panel.php file and find line 17:
<span style="text-transform:capitalize"><?php echo $template; ?></span> Showcase</h2>
replace with:
<span style="text-transform:capitalize"><?php echo $site_name; ?></span> Tools</h2>
or simply what ever you want:
<span style="text-transform:capitalize">I am the God of Helfire </h2>
EASY!

Disable vertical rhythm checker
If you want to disable this feature I recommend commenting it's code so if you need it, just move the comments and re-activate the checker. It's really useful! So find lines 112 - 115 and comment with <!-- the code -->. That's it!

Is there anything missing? Don't hesitate to say it right here!

Module Positions

This is a demo module positions page to highlight the template positions and some of the module styles.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Layout Information

To explore the layout, just click here. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Support & Feedback

General Info

Please feel free to contact me for any suggestions, issues or custom work.

Forum Support

Register  Forum

E-mail Support

E-mail: dan.partac[at]yahoo.com

Thank You!

Thanks for purchasing my template & reading my documentation.

Regards,
Danny

Upgrage

Upgrade Guide

Upgrading both the template and the T3 Framework Plug-in was made easy by introducing the JA Extensions Manager for Joomla! 1.7. However, I will document the process of upgrading a T3 Framework Template with AND without the JA Extensions Manager.

The Classic Way

This stands as a comprehensive and complete guide on how to deal with upgrade on any Joomla! 1.7 website, without JA Extensions Manager on a production live site or any other testing or development environment.

  • Back-up a copy of your template (especially if you have made customizations).
  • Go to Global Configuration and enable the Offline Mode (recommended if you have a production live site, you might not want your users to see layout breaks or critical errors while files are being replaced/copied or edited).
  • Unset the template as default (Extensions menu - Template Manager - select another template and click Default).
  • Uninstall the old version of the template ( For Joomla! 1.7 -> Extensions - Extensions Manager - Manage tab - select template and click Uninstall).
  • Uninstall the T3 Framework Plug-in (if out of date).
  • Install the new version of the template.
  • Install the new version of the T3 Framework Plug-in (if new version have been released).
  • Set the template as default again.
  • Re-apply your customizations. You can use a WinMerge or BeyondCompare software to compare code
  • Disable Offline Mode in the Global Configuration.

The Quick & Better Way

This method involves using the JA Extensions Manager and saves precious time if you don't want to manually uninstall and re-install the template and the core framework plug-in. Click here to download this extension and you can check the documentation here. The JA Extensions Manager is helpful as it can automatically back-up your extension while installing a new version, comes with a built in code compare feature to help you track code changes and you can also rollback to your previous setup (including all your customizations) with just a few clicks. OK, if you have downloaded & installed JA Extensions Manager, here are the steps to follow:

  • Upgrading T3 Framework Plug-in
  • In the back-end, go to Components menu and click JA Extensions Manager.
  • Click the Plug-ins menu item in the left side menu to show the plug-ins installed in your website.
  • Search for "T3 Framework" and when found, check the Service to be JoomlArt Updates in the right side column.
  • Now click Check update link and wait a few seconds.
  • If new version was found, click Upgrade now! link.
  • No need to check for code changes, unless the changes affects your customizations. (You can still track code changes after upgrade)
  • Upgrading The Template
  • In the back-end, go to Components menu and click JA Extensions Manager.
  • Click the Templates menu item in the left side menu to show the templates installed in your website.
  • Search for "Template-name" and when found, check the Service to be Local Service for the template.
  • Now click Check update link and wait a few seconds, the extensions manager will tell you there is no new version in the local repository.
  • Click Upload now and browse for the latest version of the template.
  • Now click Check update link again and then click Upgrade now link. Don't worry, your previous setup will be completely saved into JA Extensions Manager repository. For production websites, I recommend enabling the Offline Mode in the Global Configuration (see The Classic Way again) before this step.
  • After the upgrade is finished, click Rollback so you can check the files with conflict (changed by both developer and user). A list of files will be displayed and you can click them to check code changes between the latest version and your previous setup including your customizations. This way you can reapply your customizations into the latest version.
  • Click here to watch a video tutorial for this upgrade method.

dx riunioneLa C.T.M.  s.r.l. è una società per prove sui materiali autorizzata dal Ministero delle Infrastrutture e dei Trasporti Legge No. 1086 del 05/11/1971 – Decreto Ministeriale (D.M.) No. 42943 del 30/04/1997 che offre un servizio altamente qualificato relativamente a test sui materiali, consulenza alle imprese, soluzione di problemi ingegneristici, progettazione e ingegneria, ricerca e sviluppo, formazione del personale tecnico delle imprese e delle pubbliche amministrazioni.  I servizi offerti sono rivolti al settore civile ed al settore industriale, alle pubbliche amministrazioni ed alle istituzioni accademiche.

Fin dal 1995, anno di costituzione della C.T.M. s.r.l., la nostra missione è stata sempre finalizzata ad offrire alle imprese un servizio che si caratterizzasse per l’impiego di personale altamente qualificato nel campo dei test di laboratorio sui materiali oltre che per l’utilizzo di attrezzature tecnologicamente all’avanguardia.

Ciascun membro del team della C.T.M. s.r.l. si pone come obiettivo la massima efficienza nei confronti delle esigenze del Cliente sia in termini di ottimizzazione dei tempi che di ricerca di soluzioni ingegneristiche di elevata qualità. Il nostro unico approccio alla soluzione del problema trova il principale punto di forza nella estesa esperienza maturata da ciascun membro del nostro team, messa a totale disposizione dei nostri Clienti.

Il nostro obiettivo principale è il Cliente, la nostra unica missione soddisfare tutte le sue aspettative. Nel perseguire tale missione, C.T.M. s.r.l. si pone come principio quello di non tradire mai l’etica professionale a cui ciascun membro del suo team promette fedeltà sottoscrivendo una dichiarazione di integrità. Il pieno rispetto della privacy e dei principi etici rappresenta la premessa fondamentale di ogni collaborazione.

La sede legale ed operativa della C.T.M. s.r.l. è a Vibo Valentia (VV) dove occupa attualmente una superficie coperta  di circa 1500 metri quadrati adibita a laboratori, uffici e training center e conta su un team di 11 tecnici di cui il 60% laureati. C.T.M. s.r.l. mette a disposizione dei suoi Clienti un team di ingegneri meccanici, ingegneri civili, ingegneri geotecnici, operatori laureati in fisica ed in chimica, tecnici esperti nel campo delle prove non distruttive qualificati al III e II livello dal CICPND (Centro Italiano di Coordinamento per le Prove non Distruttive).

!-

[widgetkit id=18]

 

-->