Mono Support how to add social media icons on the header ? 

Viewed 49520 time(s), 9 post(s), 1/22/2013 9:35:47 PM - by super
1/22/2013 9:36:29 PM
6018 Reputation 709 Total posts

I want to add social media icons on the header, I know I have to work with stylesheet and add image src in the code - I tried everything on master pages where menu and logo is but unable to do that..sometimes icons are displayed as zoomed image or sometimes there are not aligned or sometimes they are not there even when I add the src in the page.

Could you please show me exact way how to add icons in the header ? or show me the exact location where should I add ?

I have attached screenshot where I want icons in header.

1
1/23/2013 9:56:25 AM
3016 Reputation 428 Total posts

Hi,

I believe you are trying to use MonoX's social login control? In that case you will need to amend/style it yourselft to get needed styling.

Regards.

2
1/23/2013 9:58:01 AM
3016 Reputation 428 Total posts

Also, I think you need to add it to Header.ascx control.

3
1/23/2013 10:03:09 AM
526 Reputation 43 Total posts

Hi,

the following link can aid you in learning CSS positioning. Regarding the image size, you could approach the problem by encapsulating your img into a div like this:

<div id="social"><img src="social.jpg"></div>
and adding a bit of CSS:

#social { height: 100px; width: 100px; overflow: hidden; }
Regards

4
1/23/2013 5:00:04 PM
6018 Reputation 709 Total posts

I want to add social media icons to link my pages not the monoX's social login control.

Where is Header.ascx ? I cannot find any file with this name in the mono project solution ?

5
1/23/2013 5:39:22 PM
2218 Reputation 300 Total posts

Hello,

The sections you have indicated in you screenshot can be found in DefaultSmallHeader.master and Default.master master pages.

Regards,
Mario

6
1/23/2013 5:44:23 PM
6018 Reputation 709 Total posts

Mario, isn't DefaultSmallHeader.master for mobile devices ?

7
1/23/2013 6:46:24 PM
2218 Reputation 300 Total posts

super, DefaultSmallHeader master is used on the desktop site version. You can find mobile masterpages in MasterPages\Mobile directory.

Regards

8
1/23/2013 6:58:10 PM
6018 Reputation 709 Total posts

Mario, thanks - this issue has been resolved by adding icons in default.master as well as defaultsmallheader master pages.

9
This is a demo site for MonoX. Please visit Mono Software for more info.