Joomanager Component

NOTE: The directory is powered by the Joomanager component which is NOT included and can be purchased separately by clicking here http://www.joomanager.com.

The Joomanger component is used to power the directory you see on the homepage, the "Latest Ad" and "Featured Ad" modules. The directory offers features including, ratings, paid ads, Google map search and unlimited searchable custom fields and much more!


How to Setup Like the Demo

First you'll need to install the Joomanager component. Then you'll need to install the modules and post the search module to the "custom_2" position. Publish the Featured Ad module to the right module position and lastly publish the Browse module to the "custom_3" position. Below are the settings for the 3 modules used from Joomanager on the homepage.


Featured Ad Module Settings




Browse Ad Module Settings




Search Module Settings






Joomanager Features Overview


  • Unlimited custom fields defined via Joomanager admin, you customize Joomanager to your needs
  • Unlimited Category Levels
  • Allow users to rate items and leave comments
  • Pay to post items
  • Translation via Falang (definition files included)
  • Compatible with Joomla 2.5/3.0 and higher
  • Custom user alerts on items
  • Google Maps
  • Uses a custom templating system to allow for various themes
  • Responsive ready!


Head on over to http://www.joomanager.com to grab your copy of this component today!


Drop Caps

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter">L</span>orem ipsum

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter2">L</span>orem ipsum




Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class">Porem ipsum</a>

Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class2">Porem ipsum</a>



Notifications

<div class="s5_greenbox"> <div class="point"> Your text here </div> </div>

<div class="s5_redbox"> <div class="point"> Your text here </div> </div>

<div class="s5_bluebox"> <div class="point"> Your text here </div> </div>

<div class="s5_graybox"> <div class="point"> Your text here </div> </div>

This is a styled box. Use <div class="black_box">Your content goes here!</div>

This is a styled box. Use <div class="gray_box">Your content goes here!</div>

This is a styled box. Use <div class="red_box">Your content goes here!</div>

This is a styled box. Use <div class="blue_box">Your content goes here!</div>

This is a styled box. Use <div class="green_box">Your content goes here!</div>

This is a styled box. Use <div class="yellow_box">Your content goes here!</div>

This is a styled box. Use <div class="orange_box">Your content goes here!</div>


Images

This is an image with the "boxed" class applied:



This is an image with the "boxed_black" class applied:



This is an image with the "padded" class applied:



This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.



Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5


Misc

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.

  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class plus
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.


The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":

  • This is a sample styled number list <li class="li_number1">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number2">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number3">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number4">Your content goes here!</li>


Price Table

Basic
$49/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back

Premium
$99/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name

To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".



<div class="s5_pricetable_3">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>

<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>

<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>

<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name

</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div style="clear:both;"></div>
</div>



Responsive YouTube and Vimeo Videos

Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:

Integer varius tempor auctor. Etiam fringilla venenatis mollis. Duis ullamcorper massa eu sapien fringilla consequat. Aliquam nec ligula mi, quis tincidunt odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum dui eros. Praesent nec nibh diam.

Proin augue risus, molestie at dictum quis, viverra non ipsum. Praesent lacus dui, euismod ut mollis vel, lacinia vel arcu. In commodo arcu vitae velit elementum a luctus nibh mattis. Ut vel turpis eros. Nam mattis velit sed nibh scelerisque in bibendum felis sodales. Vivamus ornare pellentesque pellentesque. Nullam dignissim semper quam nec mollis. In vel lacus lectus, ac tristique leo.

Aenean venenatis egestas iaculis. Nullam consectetur condimentum dolor at bibendum. Nulla in enim quis ipsum pulvinar imperdiet vitae nec velit. Donec non urna quam. Aliquam congue magna nec risus iaculis posuere. Vivamus bibendum interdum molestie. Sed libero risus, varius eu dictum ac, pharetra ac elit. Curabitur a nibh id ipsum sagittis blandit. Morbi cursus commodo leo quis rhoncus. In nec purus magna, id porta enim. Donec pulvinar aliquet vulputate. Donec sit amet justo sit amet ipsum posuere imperdiet id sed magna.

Read more: Sample Content 3

Integer varius tempor auctor. Etiam fringilla venenatis mollis. Duis ullamcorper massa eu sapien fringilla consequat. Aliquam nec ligula mi, quis tincidunt odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum dui eros. Praesent nec nibh diam.

Proin augue risus, molestie at dictum quis, viverra non ipsum. Praesent lacus dui, euismod ut mollis vel, lacinia vel arcu. In commodo arcu vitae velit elementum a luctus nibh mattis. Ut vel turpis eros. Nam mattis velit sed nibh scelerisque in bibendum felis sodales. Vivamus ornare pellentesque pellentesque. Nullam dignissim semper quam nec mollis. In vel lacus lectus, ac tristique leo.

Aenean venenatis egestas iaculis. Nullam consectetur condimentum dolor at bibendum. Nulla in enim quis ipsum pulvinar imperdiet vitae nec velit. Donec non urna quam. Aliquam congue magna nec risus iaculis posuere. Vivamus bibendum interdum molestie. Sed libero risus, varius eu dictum ac, pharetra ac elit. Curabitur a nibh id ipsum sagittis blandit. Morbi cursus commodo leo quis rhoncus. In nec purus magna, id porta enim. Donec pulvinar aliquet vulputate. Donec sit amet justo sit amet ipsum posuere imperdiet id sed magna.

Read more: Sample Content 2

Integer varius tempor auctor. Etiam fringilla venenatis mollis. Duis ullamcorper massa eu sapien fringilla consequat. Aliquam nec ligula mi, quis tincidunt odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum dui eros. Praesent nec nibh diam.

Proin augue risus, molestie at dictum quis, viverra non ipsum. Praesent lacus dui, euismod ut mollis vel, lacinia vel arcu. In commodo arcu vitae velit elementum a luctus nibh mattis. Ut vel turpis eros. Nam mattis velit sed nibh scelerisque in bibendum felis sodales. Vivamus ornare pellentesque pellentesque. Nullam dignissim semper quam nec mollis. In vel lacus lectus, ac tristique leo.

Aenean venenatis egestas iaculis. Nullam consectetur condimentum dolor at bibendum. Nulla in enim quis ipsum pulvinar imperdiet vitae nec velit. Donec non urna quam. Aliquam congue magna nec risus iaculis posuere. Vivamus bibendum interdum molestie. Sed libero risus, varius eu dictum ac, pharetra ac elit. Curabitur a nibh id ipsum sagittis blandit. Morbi cursus commodo leo quis rhoncus. In nec purus magna, id porta enim. Donec pulvinar aliquet vulputate. Donec sit amet justo sit amet ipsum posuere imperdiet id sed magna.

Sed ultricies condimentum augue, sed congue erat dapibus nec. Etiam quis tempor nibh. Vestibulum urna dui, sodales ut ornare vitae, porta non augue. Curabitur nunc ipsum, facilisis nec luctus blandit, luctus at sem. Vestibulum pharetra augue vitae orci mollis scelerisque. Quisque gravida diam vel mauris ultricies ac faucibus turpis volutpat. Maecenas augue elit, rutrum pharetra mattis ullamcorper, commodo varius enim. Phasellus dapibus mattis ipsum sit amet tincidunt. In hac habitasse platea dictumst. Sed nisi dolor, ullamcorper eget pretium molestie, commodo non dolor. Praesent volutpat aliquet neque ut bibendum. Pellentesque tincidunt tortor non ipsum venenatis ultricies.

Proin at justo eu orci condimentum ornare sed pellentesque orci. Duis nec interdum massa. Proin porta semper enim, sit amet condimentum lorem interdum non. Etiam vel sodales tellus. Nullam vulputate luctus sapien, in feugiat arcu pulvinar vitae. Phasellus risus orci, posuere non fringilla nec, placerat sit amet mauris. Mauris a sem turpis, vitae hendrerit risus. Mauris suscipit, purus ac ornare elementum, enim dolor convallis mauris, sit amet convallis urna metus at leo. Curabitur eget nisl a risus suscipit auctor. Ut a ultrices lectus. Pellentesque sed justo magna. Donec congue mi id odio sodales tincidunt. Integer cursus leo in libero imperdiet ac pharetra tortor venenatis. In nec purus at justo adipiscing condimentum.

Join Our Newsletter

Signup to get exclusive offers and other discount from us by joining our newsletter program.

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque pretium erat. Fusce in turpis in velit tempor pretium. Integer a leo libero.