Public Forums 71,145 posts

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#158578

Didn’t you guys wonder how JoomlArt displays the nice “new” and “hot” and “numbers of templates in this category”? Well, I looked at the css and it is quite simple and here’s how:

Add these lines to your mega.css file located in templates/your-templates-folder/css/menu


/* TAGS */

.ja-megamenu ul.level0 li.mega span.menu-desc, .ja-megamenu ul.level1 li.mega span.menu-desc {
display: none;
}
.ja-megamenu .parent-tags a.parent-tags, .ja-megamenu .tags a.tags {
position: relative;
}
.ja-megamenu ul.level0 .parent-tags a.parent-tags span.menu-title {
padding-right: 50px !important;
}
.ja-megamenu .parent-tags a.parent-tags span.menu-desc, .ja-megamenu .tags a.tags span.menu-desc {
background: #696F72;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block !important;
font-size: 10px !important;
font-weight: bold !important;
line-height: normal !important;
padding: 2px 7px !important;
position: absolute;
text-shadow: none;
text-transform: none !important;
}
.ja-megamenu ul.level0 .parent-tags a.parent-tags span.menu-desc {
right: 12px;
top: 12px;
}
.ja-megamenu ul.level1 .tags a.tags span.menu-desc {
right: 10px;
top: 7px;
}
.ja-megamenu .parent-tags a.tags-green span.menu-desc, .ja-megamenu .tags a.tags-green span.menu-desc {
background: #6B9E1B;
}
.ja-megamenu .parent-tags a.tags-green-hover:hover span.menu-desc, .ja-megamenu .tags a.tags-green-hover:hover span.menu-desc {
background: #6B9E1B;
}
.ja-megamenu .parent-tags a.tags-red span.menu-desc, .ja-megamenu .tags a.tags-red span.menu-desc {
background: #EE372A;
}
.ja-megamenu .parent-tags a.tags-red-hover:hover span.menu-desc, .ja-megamenu .tags a.tags-red-hover:hover span.menu-desc {
background: #EE372A;
}
.ja-megamenu .parent-tags a.tags-blue span.menu-desc, .ja-megamenu .tags a.tags-blue span.menu-desc {
background: #29739D;
}
.ja-megamenu .parent-tags a.tags-blue-hover:hover span.menu-desc, .ja-megamenu .tags a.tags-blue-hover:hover span.menu-desc {
background: #29739D;
}


After that you have to add a description of that menu item. Of course you can write anything you like. Hot, new, awesome, 789, anything goes, just watch out for the length ;). I addition you need to add two additional classes to your menu item.

For main-level menu items add parent-tags and tags-color like shown below. Replace “color” with the color class. I described the color classes below the screens.

For sub-level menu items add tags and tags-color like this:

For now there are three color classes: tags-red, tags-green and tags-blue. You can add as many as you like and style them as you wish. You only need to add as many of these lines and change the css styles. For example a purple tag:


.ja-megamenu .parent-tags a.tags-purple span.menu-desc, .ja-megamenu .tags a.tags-purple span.menu-desc {
background: #800080;
}
.ja-megamenu .parent-tags a.tags-purple-hover:hover span.menu-desc, .ja-megamenu .tags a.tags-purple-hover:hover span.menu-desc {
background: #800080;
}


That’s it!

Depending on your menu style and height you have to focus on these lines because the position of the tags is relative to the menu item:


.ja-megamenu ul.level0 .parent-tags a.parent-tags span.menu-desc {
right: 12px;
top: 12px;
}
.ja-megamenu ul.level1 .tags a.tags span.menu-desc {
right: 10px;
top: 7px;
}


I hope the tutorial didn’t get to confusing and you will have “75+” “hot” menu-descriptions :D:D

4 users say Thank You to pixelzombie for this useful post

1. Phill
2. we2solutions
3. rangkuk
4. n6rej

[robert vining Friend robert viningJoin date: November 2006Posts: 33Downloads:35Uploads:2 Thanks: 2 Thanked: 15 times in 7 posts]

#371220

Very nice job on this tutorial! Thanks for sharing it here with the JA Community!

Robert Vining
www.joompro.com

[stator86 Friend stator86Join date: September 2011Posts: 77Downloads:0Uploads:10 Thanks: 17 Thanked: 1 times in 1 posts]

#431111

Thanks for Superb Guide.

Let me make a Slight modification for RTL Languages:

/* TAGS Arabic*/

.ja-megamenu ul.level0 li.mega span.menu-desc, .ja-megamenu ul.level1 li.mega span.menu-desc {
display: none;
}
.ja-megamenu .ar-parent-tags a.ar-parent-tags, .ja-megamenu .ar-tags a.ar-tags {
position: relative;
}
.ja-megamenu ul.level0 .ar-parent-tags a.ar-parent-tags span.menu-title {
padding-left: 50px !important;
}
.ja-megamenu .ar-parent-tags a.ar-parent-tags span.menu-desc, .ja-megamenu .ar-tags a.ar-tags span.menu-desc {
background: #696F72;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block !important;
font-size: 10px !important;
font-weight: bold !important;
line-height: normal !important;
padding: 2px 7px 2px 7px !important;
position: absolute;
text-shadow: none;
text-transform: none !important;
}
.ja-megamenu ul.level0 .ar-parent-tags a.ar-parent-tags span.menu-desc {
left: 12px;
top: 12px;
}
.ja-megamenu ul.level1 .ar-tags a.ar-tags span.menu-desc {
left: 10px;
top: 7px;
}
.ja-megamenu .ar-parent-tags a.ar-tags-green span.menu-desc, .ja-megamenu .ar-tags a.ar-tags-green span.menu-desc {
background: #6B9E1B;
}
.ja-megamenu .ar-parent-tags a.ar-tags-green-hover:hover span.menu-desc, .ja-megamenu .ar-tags a.ar-tags-green-hover:hover span.menu-desc {
background: #6B9E1B;
}
.ja-megamenu .ar-parent-tags a.ar-tags-red span.menu-desc, .ja-megamenu .ar-tags a.ar-tags-red span.menu-desc {
background: #EE372A;
}
.ja-megamenu .ar-parent-tags a.ar-tags-red-hover:hover span.menu-desc, .ja-megamenu .ar-tags a.ar-tags-red-hover:hover span.menu-desc {
background: #EE372A;
}
.ja-megamenu .ar-parent-tags a.ar-tags-blue span.menu-desc, .ja-megamenu .ar-tags a.ar-tags-blue span.menu-desc {
background: #29739D;
}
.ja-megamenu .ar-parent-tags a.ar-tags-blue-hover:hover span.menu-desc, .ja-megamenu .ar-tags a.ar-tags-blue-hover:hover span.menu-desc {
background: #29739D;
}

Additional class:

For Main Menu item: ar-parent-tags ar-tags–YOURCOLOR
For Child Menu item: ar-tags ar-tags-YOURCOLOR

This Customization will help in multi-lingual sites.

[nayan007 Friend nayan007Join date: November 2011Posts: 29Downloads:0Uploads:4 Thanks: 4 Thanked: 5 times in 6 posts]

#431114

Very nice job done posting this useful tutorial and thank you for sharing it here on the forum

[Author]

Posts