Inspirion The first 960 Powered Joomla Template from Joomlashack

20 Mar By Leave a Comment

ins_tn

Joomlashack is on the Grid! What is the grid? Well it is a system to help speed up development time by creating a specific way to align your site to give it that consistent feel. This system provides commonly used dimensions, based on a width of 960 pixels to align your columns and rows.

Inspirion is XHTML Strict, CSS/Tableless, and makes use of semantic headings (h1-h3) Joomla! overrides for improved SEO.

Inspirion is medium-sized template integrated with IE transparency, CSS dropline menu system, excellent typography, and is available in multiple color styles (with PSD source).

Check out the DEMO! | Or purchase NOW!

Popularity: 100% [?]

Filed Under: Joomlashack Templates Tagged With: , ,

Earthblog is a native Joomla 1.5 template

10 Aug By Leave a Comment

Joomlashack earthblog

The “Earthblog” Joomla! template is a great template for technical sites, blogs, communities, churches, portals, and so much more.

This template has a variety of time saving extras such as matching JCalPro themes, and a super-lightweight mootools slider module to attract readers to your featured content!

When you purchase the Earthblog template package, you’ll get all the preset styles shown in this demo as well as the Fireworks graphic source files used to create this template. To make things even easier for you, we’ve separated the entire CSS structure from presentation in a separate commented file that can easily be modified.

[Read more...]

Popularity: 9% [?]

Filed Under: Joomlashack Templates

How to change the color of a specific menu item in Joomla

19 Sep By Leave a Comment

I don’t seem to run across many Joomla websites with different color menu items. I thought this would be a nice chalenge to figure out how to do it. As it turn out it was actually pretty simple with the extended menu module.

Once you get the module downloaded and installed you need to add some css to to your menus. I will assume that you already have the menus setup and working. Now to add a little css to diferentiate between the different menu items.

  1. #menulink_1-suckerfish-horizontal, a.mainlevel-suckerfish-horizontal
  2. {
  3. background-color: transparent;
  4. background-image: url(../images/first-tab-bg.gif);
  5. background-repeat: no-repeat;
  6. background-attachment: scroll;
  7. background-x-position: left;
  8. background-y-position: top;
  9. }

Also you are going to need to make a change to your menu.ini to add the element_id. It should look something like

  1. active_menu_class=1
  2. class_sfx=-suckerfish-horizontal
  3. expand_menu=1
  4. element_id=1

I don’t currently have an example of the different menu colors, but I do have an example of a different menu shape at rcnovice. If you notice the home menu item has a small curve on the leading edge.

[Read more...]

Popularity: 42% [?]

Filed Under: Joomlashack Templates

Menu Styles in Vintage Template

17 Sep By Leave a Comment

If you're one of the many people using Joomla! for medium-sized rapidly growing websites, this template was designed with you in mind. If you want the power of a scalable content management system, but want to take the time in order to "grow into" the site over time while maintaining a non-cluttered look, Vintage might be for you.

 

This is one of the newest templated form Joomlashack . This is a little add-in that will remove the bullets from the menus giving a cleaner look.

 

This is a very simple mod to make.
Just add the following to your template_css.css

 

  • /*Side Column Navigation*/
  • ul#mainlevel-sidenav
  • {list-style:none;margin:0;padding:0;}
  • ul#mainlevel-sidenav a{text-decoration:none;}
  • ul#mainlevel-sidenav a:hover {text-decoration:underline;}

Then add "-sidenav" to your "Module Class Suffix"

Before                                                   After 

vintage-before.png

vintage-after.png

 

[Read more...]

Popularity: 19% [?]

Filed Under: Joomlashack Templates

Overlapping tabs

10 Apr By Leave a Comment
  1. .tabs {list-style:none; padding:15px 0 0 10px; margin:30px 10px 50px 0; height:23px; background:#bcd url(images/tab_e.gif); border-bottom:1px solid #000;}
  2. .tabs li {display:block; float:left; margin:0 -13px -1px 0;}
  3. .tabs li a {display:block; text-decoration:none;}
  4.  
  5. .tabs li a em {float:left; padding:0 20px; height:22px; border-top:1px solid #fff; border-bottom:1px solid #000; position:relative; z-index:100; font-style:normal; color:#fff; background:#f93 url(images/tab_d.gif) repeat-x bottom left; font-size:11px; font-family:verdana; line-height:20px;}
  6.  
  7. .tabs li a b {font-size:0; line-height:0; position:relative; border-bottom:1px solid #000; border-top:1px solid #fff; width:1px; display:block; float:left; z-index:300; background:#f93 url(images/tab_d.gif) repeat-x bottom left;}
  8.  
  9. .tabs li b.p1 {height:19px; background:#fff; margin-top:4px; border-top:0; z-index:100;}
  10. .tabs li b.p2 {height:19px; margin-top:2px; border-top:2px solid #fff; border-bottom:1px solid #888; z-index:100;}
  11. .tabs li b.p3 {width:2px; height:21px; margin-top:1px; z-index:100;}
  12. .tabs li b.p5 {height:20px; margin-top:2px;}
  13. .tabs li b.p6 {height:19px; margin-top:3px;}
  14. .tabs li b.p7 {height:18px; margin-top:4px;}
  15. .tabs li b.p8 {height:17px; margin-top:5px;}
  16. .tabs li b.p9 {height:16px; margin-top:6px;}
  17. .tabs li b.p10 {height:15px; margin-top:7px;}
  18. .tabs li b.p11 {height:14px; margin-top:8px;}
  19. .tabs li b.p12 {height:13px; margin-top:9px;}
  20. .tabs li b.p13 {height:12px; margin-top:10px;}
  21. .tabs li b.p14 {height:11px; margin-top:11px;}
  22. .tabs li b.p15 {height:10px; margin-top:12px;}
  23. .tabs li b.p16 {height:9px; margin-top:13px;}
  24. .tabs li b.p17 {height:8px; margin-top:14px;}
  25. .tabs li b.p18 {height:7px; margin-top:15px;}
  26. .tabs li b.p19 {height:6px; margin-top:16px;}
  27. .tabs li b.p20 {height:5px; margin-top:17px;}
  28. .tabs li b.p21 {height:4px; margin-top:18px;}
  29. .tabs li b.p22 {height:3px; margin-top:19px;}
  30. .tabs li b.p23 {height:2px; margin-top:20px;}
  31. .tabs li b.p24 {height:1px; margin-top:21px;overflow:hidden;}
  32. .tabs li b.p25 {width:1px; height:1px; background:#fff; margin-top:22px; border-top:0; overflow:hidden;}
  33. .tabs li b.p26 {width:1px; height:1px; background:#000; margin-top:23px; border:0; overflow:hidden;}
  34.  
  35. .tabs li em b.shdw {position:absolute; display:block; left:-4px; bottom:0; border:0; width:17px; height:17px; background: #f93 url(images/tab_a.gif) bottom left; z-index:500;}
  36.  
  37. .tabs li a:hover,
  38. .tabs li a:focus,
  39. .tabs li a:active
  40. {white-space:nowrap; color:#000; position:relative; z-index:500; cursor:pointer;}
  41. .tabs li a:hover em,
  42. .tabs li a:focus em,
  43. .tabs li a:active em
  44. {color:#800; background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
  45. .tabs li a:hover em b.shdw,
  46. .tabs li a:focus em b.shdw,
  47. .tabs li a:active em b.shdw 
  48. {visibility:hidden;}
  49. .tabs li a:hover b,
  50. .tabs li a:focus b,
  51. .tabs li a:active b
  52. {background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
  53. .tabs li a:hover b.p1,
  54. .tabs li a:focus b.p1,
  55. .tabs li a:active b.p1
  56. {background:#fff; border-bottom-color:#888;}
  57. .tabs li a:hover b.p25,
  58. .tabs li a:focus b.p25,
  59. .tabs li a:active b.p25
  60. {background:#fff; border-bottom-color:#888;}
  61. .tabs li a:hover b.p26,
  62. .tabs li a:focus b.p26,
  63. .tabs li a:active b.p26
  64. {background:#888;}
  65.  
  66. .tabs li a.selected,
  67. .tabs li a:hover.selected, 
  68. .tabs li a:active.selected 
  69. {white-space:nowrap; color:#000; position:relative; z-index:600; cursor:default;}
  70. .tabs li a.selected em,
  71. .tabs li a:hover.selected em,
  72. .tabs li a:active.selected em
  73. {color:#800; background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
  74. .tabs li a.selected em b.shdw,
  75. .tabs li a:hover.selected em b.shdw,
  76. .tabs li a:active.selected em b.shdw
  77. {visibility:hidden;}
  78. .tabs li a.selected b,
  79. .tabs li a:hover.selected b,
  80. .tabs li a:active.selected b
  81. {background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
  82. .tabs li a.selected b.p1,
  83. .tabs li a:hover.selected b.p1,
  84. .tabs li a:active.selected b.p1
  85. {background:#fff; border-bottom-color:#fff;}
  86. .tabs li a.selected b.p26,
  87. .tabs li a:hover.selected b.p26,
  88. .tabs li a:active.selected b.p26
  89. {width:1px; height:1px; background:#fff; margin-top:23px; border-top:0; overflow:hidden;}

Information

This is an experimental menu to see if it could be done. If you
don’t like bloated code then move on to another page, if you don’t mind
extra tags to achieve the menu above then stay and play.

As with the previous menu this one has the ability to click any of the tabs and reload the page with that tab shown selected.

The area of each tab is bounded by the white border and hover will
only work within this border (including the 45 degree slope and any
overlap). The width of each tab is variable depending on the link text.

This has been tested in IE6, IE7, Firefox and Opera, it should also work in Safari.

The following images are used in this menu, but it will work as a
flat menu with no images used at all (try disabling images in your
browser to see that this will still work correctly)

Images can be found HERE

Copied from http://www.cssplay.co.uk/menus/overlap.html?current=one

[Read more...]

Popularity: 12% [?]

Filed Under: Joomlashack Templates
« Older Posts