Very important news to the viewers of this site. As of next week this site will no longer be available. I will be taking content from a few sites and putting it all into The Template Blog. I would suggest going over and checking it out. Make sure you subscribe to the e-mail updates as there will be quite a few in the coming weeks \ months.

Home arrow News arrow Blog
A blog of all sections with no images
The Web Development Clients' 10 Commandments
The Web Development Clients' 10 Commandments
READ THE ARTICLE AT DRIVL.COM
 
How to change the color of a specific menu item in Joomla
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.


Add Comment (0)
Hits: 1199
 
Menu Styles in Vintage Template

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
 

Add Comment (0)
Hits: 911
 
Simplicity Drop Down

Please Note, Simplicity Drop Down is only available as a Web Site package.

Please contact me for details.

We call this Joomla template Simplicity, but it's deceptively simple. Designed with cutting edge CSS unique to this template, it might well be the fastest one available today loading in a fraction of the time of other Joomla templates. With lots of possibilities, this Joomla template - JS_Simplicity used the following design criteria.

Template Features:

  • Tableless design and 100% CSS based
  • Simplicity Drop Down Menus
  • SMF Theme Intragration
  • JCalendar Pro
  • JCE Editor
  • Very lightweight and fast loading
  • Highly flexible layout with over 10 module placement positions
  • Highly optimized for search engines
  • Integrated text resize switch buttons
  • Joomla 1.0+ compatible, Mambo 4.5.2/4.5.3 compatible.
  • Valid XHTML 1.0 Transitional and valid CSS
  • Valid 508 Accessibility
  • Special customize.css file for highly flexible customization
Add Comment (0)
Hits: 692
 
Special Offer for JoomlaShack Customers

Purchase a template from JoomlaShack and sign up with a personal account or above for one year and get your website setup so it 'Looks like the Demo" from HostDane

 

Add Comment (0)
Hits: 798
 
Overlapping tabs
  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

Add Comment (2)
Hits: 1370
 
More...
<< Start < Prev 1 2 3 4 Next > End >>

Results 1 - 10 of 31
Joomla Templates by Joomlashack
SiteMap | TheTemplateBlog
Joomla Templates and Joomla Tutorial