Using this gadget, you can add icons that link to your profile on a number of popular social networks.
The style of the icons depends on the current website theme unless you choose the Default icons gadget style (which displays the standard icon for each social network).
You can insert the gadget into a page onto your site, or into a page template so that all pages that use that template will automatically display the gadget. For instructions on inserting, moving, and deleting gadgets, see Gadgets.
You can add icons for the following social networks:
- YouTube
You can also use theme overrides to add options to link to other social networks.
Social profile gadget settings
Using the gadget's settings, you can control its appearance and content.
For instructions on displaying gadget settings, see Gadgets.
The following settings are available for social profile gadgets:
General
Enter your social profile name or a link to your profile for each social network you want to display icons for. The link must begin with http:// or https://. If you don't want to display icons for a particular social network, leave its field blank.
Align
(Clean Lines, Dark Impact, Treehouse, and White Space themes) Controls whether the icons are left aligned, right aligned, or centered within the gadget.
Fixed position
(Terra and Firma themes) Allows your social icons to appear on the outer right edge of the placeholder and remain in position as the viewer scrolls the page.
Orientation
Choose whether to display the icons horizontally or vertically.
Gadget title
If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box.
For Casefile and Kaleidoscope themes, use a Headline gadget instead of specifying a gadget title.
Gadget style
The gadget style determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border. You can choose from theme-specific styles and styles that are common to all themes. The Default icons style displays the standard icons for each social network (instead of Wild Apricot's stylized icons).
Margins
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.
Padding
(Casefile and Kaleidoscope themes only) The amount of space – in pixels – that appears between the content of the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. If you have set a fixed height for the gadget, the bottom padding will be ignored.
Advanced
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Gadget settings.
Adding other social networks
Using theme overrides, you can add options to link to additional social networks, like Spotify or Soundcloud, for example. To add options to link to additional social networks, follow these steps:
- Under the Website menu, click the Theme overrides option.
- From the Theme overrides screen, click the Activate theme overrides button.
- Click the link to download the theme files.
You can download the theme files (stored in a zip file) to any location you choose. - Unzip the theme files to a location of your choice on your computer or network.
- Within your downloaded file structure, locate the \Gadgets\SocialProfile\Images folder. If the folder doesn't already exist, create it.
- In the Images folder, add a graphic to represent the social network you want to link to. Most social network provide icons in a variety of sizes and styles on their sites. Soundcloud icons, for example, can be found here. For best results, use a PNG file with a transparent background.
- Within the \Gadgets\SocialProfile folder, open the Settings.cfg file using any text editor.
- Copy one of the existing <Setting> entries, and change the name of the social network within the name and title tags. In the following example, we've change them to Soundcloud:
<Setting name="SoundcloudLink" type="string" unencoded="1" defaultViewType="TextBox" title="Soundcloud" initialValue="" /> - Within the \Gadgets\SocialProfile folder, open the SettingsLayout.cfg file for editing.
- Add a new Control entry within the General section, using the setting name you use in the Settings.cfg file. For Soundcloud, it would look like this:
<Control settingName="SoundcloudLink"/> - Within the \Gadgets\SocialProfile folder, open the GadgetTemplate.tpl file for editing.
- For Blueprint, Bookshelf, Fiesta, and Whiteboard themes, add the following IF statement under Model.Settings.Layout, where Soundcloud can be replaced by whatever social network you are linking to:
<$if (Model.Settings.SoundcloudLink!="")$> <li> <a href="<$Model.Settings.SoundcloudLink$>" title="Soundcloud" class="Soundcloud" target="_blank"></a> </li> <$endif$>
For all other themes, use the following code:<$if (Model.Settings.SoundcloudLink!="")$> <li> <a href="<$Model.Settings.SoundcloudLink$>" title="SoundcloudLink" class="Soundcloud" target="_blank"><img height="32" width="32" src="<$PageModel.BaseUrl$>/Gadgets/SocialProfile/Images/soundcloud.png" /></a> </li> <$endif$>
where Soundcloud is replaced by whatever social network you are linking to, soundcloud.png is replaced by the name of your graphic file, and the height and width values are set to those of your graphic. - For Blueprint, Bookshelf, Fiesta, and Whiteboard themes, open the gadget.social.profile.less file within the \Gadgets\SocialProfile folder, and add the following code at the very end:
.WaGadgetSocialProfile ul li a.Soundcloud { background-image: url("<$StaticModel.ThemeUrl$>/Gadgets/SocialProfile/Images/soundcloud.png"); height: 32px; width: 32px; }
where Soundcloud is replaced by whatever social network you are linking to, soundcloud.png is replaced by the name of your graphic file, and the height and width values are set to those of your graphic. - Save the changes you made to these theme files.
- From the File management screen in Wild Apricot, or using WebDAV, upload the modified files to the corresponding theme folder on your site.
- Go to the Theme overrides screen and click the Rebuild theme button.
Now, the new social network option should appear within the social profile gadget settings.
You may need to log off and back on again to view the new option.
Once you enter a URL for the new social network, the icon you added will be used as the link to your network profile.
