Joomla Templates Club 406,261 posts

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#171383

I have enabled the facebook button on the mega menu, but even though I select the facebook icon (and even imported a new icon from FB) the Twitter icon appears. (see pics)

I have also changed the order of the three items to see if that helped, but the order also did not apply.

???
Susan

---

Attachments:

1. 
2. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427647

Hi sbbritt

You have this icon because is displayed utilizing the nav-social class defined in the file /templates/ja_teline_iv/css/template.css around line 548

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

check your Parameters (JA Extended) option

to show your facebook icon you need to create a new class nav-facebook for example you can add this to your template.css

#ja-topmega li.nav-facebook a.nav-facebook {
background: url(../images/your facebook icon) no-repeat center #138bb3 !important;
}

#ja-topmega li:hover a.nav-facebook,
#ja-topmega li.over a.nav-facebook,
#ja-topmega li.active a.nav-facebook {
background: url(../images/your facebook icon) no-repeat center #138bb3 !important;
}

#ja-topmega li.nav-facebook a.nav-facebook
{
padding: 4px 0 3px;
margin: 3px 5px;
text-indent: -1000em;
width: 28px;
}

Regards

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427652

Still no change. What did I do wrong? Both Twitter and Facebook icons are in …images/stories/demo/icons/

/* Social Button */
#ja-topmega li.nav-social a.nav-social {
background: url(../images/icon-twitter.png) no-repeat 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 center #138bb3 !important;
}
/* FaceBook Button */
#ja-topmega li.nav-facebook a.nav-facebook {
background: url(../images/stories/demo/icons/facebook.png) no-repeat center #138bb3 !important;
}
#ja-topmega li:hover a.nav-facebook,
#ja-topmega li.over a.nav-facebook,
#ja-topmega li.active a.nav-facebook {
background: url(../images/stories/demo/icons/facebook.png) no-repeat center #138bb3 !important;
}
#ja-topmega li.nav-facebook a.nav-facebook
{
padding: 4px 0 3px;
margin: 3px 5px;
text-indent: -1000em;
width: 28px;
}

/* RSS Feeds */
#ja-topmega li.nav-feeds a.nav-feeds {
background: url(../images/icon-feeds.png) no-repeat 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 center #F68916 !important;
}

#ja-topmega li.nav-feeds .childcontent-inner { background: #fff; padding-top: 0;}
/* Ja Twitter Modules —*/
div.ja-twitter { font-family: Arial, Helvetica, sans-serif; font-size: 11px; padding: 0; }

.ja-twitter-wrapper ul li { background: none; }

.ja-twitter-wrapper {
background: #f0f0f0;
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 8px;
}

.ja-twitter-wrapper .ja-twitter-avatar { padding-right: 2px !important; }

.ja-twitter-image { display: block; float: left; }

.ja-twitter-source,
.ja-twitter-text { color: #333; }

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427680

copy your facebook image in this folder /templates/a_teline_iv/images and change this line of code

background: url(../images/stories/demo/icons/facebook.png) no-repeat center #138bb3 !important;

to

background: url(../images/facebook.png) no-repeat center #138bb3 !important;

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427763

Thanks. Did that but still no change. Susan.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427766

1) Have you added the class nav-facebook to your item page ?
2) Have you cleaned your JaT3 cache ?

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427773

1) Items page? Where do I find that? Looked all through templates section.

2) Yes, clean the JAT3 cache after making a change of any type.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427784

<em>@sbbritt 286737 wrote:</em><blockquote>1) Items page? Where do I find that? Looked all through templates section.

2) Yes, clean the JAT3 cache after making a change of any type.</blockquote>

goto menu –>topmega–>Facebook (from pic i can see this name) on the right you have Parameters (JA Extended) scroll until you see Additional class insert in to field nav-facebook save and clean your JaT3 cache

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427787

Well, now we have its’ attention. Now it is blue and blank. 😉

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427791

A png image is transparent so it needs background ( if you want use a png )

#ja-topmega li.nav-facebook a.nav-facebook {
background: url(../images/stories/demo/icons/facebook.png) no-repeat center #138bb3 !important;
}

the hex color in red is the background that you can see, you can change that color to another or use a jpg image

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427809

Tried that. All it did was change the color. Resized the last code to 32px because the actual image is 32px but that didn’t work either.

/* FaceBook Button */
#ja-topmega li.nav-facebook a.nav-facebook {
background: url(../images/facebook3.gif) no-repeat center #0066cc !important;
}
#ja-topmega li:hover a.nav-facebook,
#ja-topmega li.over a.nav-facebook,
#ja-topmega li.active a.nav-facebook {
background: url(../images/facebook3.gif) no-repeat center #0066cc !important;
}
#ja-topmega li.nav-facebook a.nav-facebook
{
padding: 4px 0 3px;
margin: 3px 5px;
text-indent: -1000em;
width: 32px;
}

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427822

Could you post a link to that page ? and can you disable the css optimization ?

Thanks

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427824

http://alreporter.cloudaccess.net

How to disable css optimization?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#427830

nevermind i have done

I cannot see any facebook3.gif image in the image folder, have you copied the image in the /templates/ja_teline_iv/images/

[sbbritt Friend sbbrittJoin date: November 2011Posts: 161Downloads:0Uploads:57 Thanks: 22]

#427832

When I use “Media Manager” on the backend I can see the image sitting at the top level which should be images.

When I FTP in, like you, I do not see the image.

I have added it via FTP.

[Author]

Posts