Joomla Templates Club 406,261 posts

[jpalencia501307 Friend jpalencia501307Join date: February 2011Posts: 12Downloads:0Uploads:0 Thanks: 2]

#161952

I want to customize the icons found in the mega position, and add new icons for twitter, facebook and newsletter.
What do I need to accomplish this?
thanks for your help and attention.:)

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#383350

Simply create new images then add some css to style it.

Here is the current css (found in template.css around line 341ish)


#ja-topmega li.nav-blog a.nav-blog, #ja-topmega li.nav-interview a.nav-interview, #ja-topmega li.nav-social a.nav-social, #ja-topmega li.nav-feeds a.nav-feeds {
margin: 3px 5px;
padding: 4px 0 3px;
text-indent: -1000em;
width: 28px;

}

#ja-topmega li.nav-blog, #ja-topmega li.nav-interview, #ja-topmega li.nav-social, #ja-topmega li.nav-feeds {
border: medium none;
float: right;

}

#ja-topmega li.nav-social .childcontent-inner {
background: none repeat scroll 0 0 #FFFFFF;

}

#ja-topmega li.nav-blog {
background: url("../images/stripe-bg-2.png") repeat scroll 0 0 transparent;

}

#ja-topmega li.nav-blog a.nav-blog {
background: url("../images/icons/nav-blog.png") no-repeat scroll center center #000000 !important;

}

#ja-topmega li:hover a.nav-blog, #ja-topmega li.over a.nav-blog, #ja-topmega li.active a.nav-blog {
background: url("../images/icons/nav-blog.png") no-repeat scroll center center #3B7513 !important;

}

#ja-topmega li.nav-blog .ja-moduletable ul li {
padding-left: 10px;

}

#ja-topmega li.nav-blog .childcontent-inner {
background-image: none !important;

}

#ja-topmega li.nav-blog .ja-moduletable .k2LatestCommentsBlock ul li {
background: none repeat scroll 0 0 transparent;
padding-left: 0;
padding-right: 0;

}

#ja-topmega li.nav-interview {
background: url("../images/stripe-bg-2.png") repeat scroll 0 0 transparent;

}

#ja-topmega li.nav-interview a.nav-interview {
background: url("../images/icons/nav-interview.png") no-repeat scroll center center #000000 !important;

}

#ja-topmega li:hover a.nav-interview, #ja-topmega li.over a.nav-interview, #ja-topmega li.active a.nav-interview {
background: url("../images/icons/nav-interview.png") no-repeat scroll center center #E04B40 !important;

}

#ja-topmega li.nav-interview .childcontent-inner {
background-image: none !important;

}

#ja-topmega li.nav-social a.nav-social {
background: url("../images/icon-twitter.png") no-repeat scroll center center #138BB3 !important;

}

#ja-topmega li:hover a.nav-social, #ja-topmega li.over a.nav-social, #ja-topmega li.active a.nav-social {
background: url("../images/icon-twitter.png") no-repeat scroll center center #138BB3 !important;

}

#ja-topmega li.nav-feeds a.nav-feeds {
background: url("../images/icon-feeds.png") no-repeat scroll center center #F68916 !important;

}

#ja-topmega li:hover a.nav-feeds, #ja-topmega li.over a.nav-feeds, #ja-topmega li.active a.nav-feeds {
background: url("../images/icon-feeds.png") no-repeat scroll center center #F68916 !important;

}

#ja-topmega li.nav-feeds .childcontent-inner {
background: none repeat scroll 0 0 #FFFFFF;
padding-top: 0;

}

Finally you would create you new menu item in topmega making sure you add the name of your new Additional Class in Parameters(JA Extended).

2 users say Thank You to Phill for this useful post

1. anshell
2. deefisher

[Author]

Posts