technik Options

Wanna play?

Customize the header!

Test Vertical Rhythm?

Technik

DJ-Image Slider

  • Welcome
    Welcome

    Welcome to Technik!

    The Technology Inspired Template for Corporate Clients

    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.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore.

    Read More

  • Perfect Typography
    Perfect Typography

    Pixel Perfect Typography

    Sorry, but we couldn't find a single dead pixel!

    You can check the template vertical rhythm anytime with one click but remember to do the test with Firefox as other browsers still have rendering issues.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.

    Check Now!

  • Buttons
    Buttons

    Buttons Made Right!

    Crafted with CSS3 techniques, the buttons gonna rock!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    All input type=button, buttons or class button elements have the same styling voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

    He he.. get More

  • Tables
    Tables

    Price Tables for All Businesses

    The sample tables are just enough to customize and start selling right away!

    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.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore.

    Show me!

  • Module Styles
    Module Styles

    Module Styles Made Awesome!

    Unique module styles for Joomla!

    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.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore.

    Explore now

  • Themes
    Themes

    Multiple Styles for Flexible Businesses!

    Technik Template Provides 5 Color Options

    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.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore.

    Shift your business!

  • Buy Technik
    Buy Technik

    It's time to get Successful!

    Technik is an awesome template for corporate clients with stunning design, unique customizations, price tables, unique module styles, buttons styles, custom pages and more. Further more it comes fully documented and PSD Sources included.

    Support is provided via all possible channels.

    Get Started Features Documentation Buy Now!

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!

Typography related | Here some links for you to explore the template typography

Some Customer Testimonials | Lorem ipsum dolor sit amet consectetur

  • Wow very surpised about the agreement!
    Wow very surpised about the agreement!
    RobertVivamus lobortis ut tristique dignissim pellentesque vel libero et metus Curabitur. Ut enim ad minim veniam sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sem magnis tempor gravida.

    Robert Glunt - Company name

  • Amazing design and support. Thank You!
    Amazing design and support. Thank You!
    JaneUt enim ad minim veniam sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

    Dui sem magnis tempor gravida tortor ridiculus iaculis Maecenas Nam nonummy. Vivamus lobortis ut tristique dignissim pellentesque.

    Jane Sullivan - Company name

  • Couldn't believe how good this is!!
    Couldn't believe how good this is!!
    JohnLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam sunt in culpa qui officia deserunt laborum.

    Dui sem magnis tempor gravida tortor ridiculus iaculis Maecenas Nam nonummy. Vivamus lobortis ut tristique dignissim pellentesque.

    John DOE - Company name

Subscribe to our Newsletter | Be the first to know the latest

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Read our news on a
or basis.

Quickly get in touch with us | And tell us what you think or want

Email
Subject
Message