Kineziologija.mk кинезиолошка едукација , кинезиолошка рекреација, кинезитерапија и спорт !!!
The demo for Equinox utilises a large stock of inline styling. This basically
means that the HTML used in the custom modules and content have customisations
which employ the characteristics of the template to make the "perfect" content.
This demo content section will take you through the general techniques used to further your understand and help you realise Equinox’s true potential.
Front Page Inset Image
The Inset promo image on the front page content is generated through a mixture of HTML and CSS. Below is the HTML code. You can insert the code into a custom module and place in the “inset” module position.
<div class="header" /> <div class="sample-header" /><p>RocketTheme Joomla Templates</p></div> </div> <a href="index.php?option=com_content&task=view&id=18&Itemid=35" class="readon">Read more...</a>
The CSS classes to make this work are already located in the template by default. You can change the “sample-header.png” image to your own.
Read More Buttons
Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code:
<a href="your_link" class="readon">Read More...</a>
Subtle bordered modules
You will observe in the demo that the majority of modules in the white sections had subtle grey borders surrounding them. This is done through custom HTML code. It is a great technique if you have lots of different sections in the white area that are referring to various subjects, such as this demo.
The following outlines the processes we used:
In this demo, we chose to use faux moduling. This means that we "faked" the module positions available to speed up the process but creates the same output. For this, we have our module , example: Example Page Top Tier. This top tier module will take on the characteristics of using the modules from user2-5, if you are using Layout A. This is created in Admin > Extensions > Module Manager > New. Also referred to as a custom module.
There is a white box at the bottom in which we insert the following:
<div style="border:1px solid #eee;"> <h3>Module Header</h3> Your module content would go here. </div>
This is the basic HTML output of a module in Joomla, we are just using our manual way. style="border:1px solid #eee;" is what produces the thin grey border around our faux module. The extra code between the <div>…</div> is just our content.
