CTM Laboratorio

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.

<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.

<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!

<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!