social icon

hi,

also would like to know how to add social icons to menu ?

would like facebook and twitter only to be shown on the main manu bar ..

thanks

Hi, you have to options depends what you really need:

1) Add social buttons module as a menu item -- > please read my article + comment here: http://gavick.com/magazine/how-to-loadi ... items.html
2) Add to menu items with link to your facebook and tweeter page, and use class to get right background color (if you'd like to see it please give me info)
3) or modify module menu sourcecode

what i want to add to the menu is the icon plus name only ... nothing else

just like in the demo...

<a class="iconFacebook" href="http://www.facebook.com/gavickpro" target="_blank">Facebook</a>

this one here

ad 2) see my example

fb-tw-menu.png

you have to know ID of your menu items and add

Code: Select all

#menu510 {background:#3B5998  }
#menu511 {background:#00BEF6 }

fb-tw-menu-html.png

Ok thats half done ..

Where is the icon?

Can one icon be placed for each link ?

Using css also (CSS background), but our default icons are black so you need a new one: (24 x 24px) & WHITE & TRANSPARENT BACKGROUND, find them and copy to "templates\gk_music\images\" folder , then we talk more.

Probably you wont have colorful icons on menu which not fit.

done

tried to fallow this guide

http://www.gavick.com/magazine/how-to-a ... -menu.html

added the icon as described in the guide ... saved the menu ...refresh ... no icon showing...

am i missing something here ? thanks

Sorry, but described on magazine method is not working with plg_gkextmenu.zip installed.

So we have to use CSS anyway. Wait a moment I will give you tips

Example css code (for Facebook item) do this same with twitter

Code: Select all

#menu510 {background:#3B5998 url("http://YOURdomian.com/templates/gk_music/images/facebook.png") no-repeat 5px 15px; padding-left:40px; }

#menu510 span {padding-left:10px}

change #menu510 to your menu ID. This code is good I tested it, for example 16x16 px icon

fb-16px.png

...but you can use bigger (24x24px), just add more padding - that's all.