Home

Download this help site
(PDF 80MB)

Download

Social profile gadget

Using this gadget, you can add icons that link to your profile on a number of popular social networks.

Icon

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:

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • YouTube
  • Instagram
  • Pinterest

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.

 Read more/less

For instructions on displaying gadget settings, see Gadgets.

The following settings are available for social profile gadgets:

Setting

Description

General

Enter your social profile name or a link to your profile for each social network you want to display icons for. 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.

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.

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 Advanced 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:

 Read more/less
  1. Under the Website menu, click the Theme overrides option.
  2. From the Theme overrides screen, click the Activate theme overrides button. 
  3. Click the link to download the theme files. 


    You can download the theme files (stored in a zip file) to any location you choose. 
     
  4. Unzip the theme files to a location of your choice on your computer or network.
  5. Within your downloaded file structure, locate the \Gadgets\SocialProfile\Images folder. If the folder doesn't already exist, create it.
  6. 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.
  7. Within the \Gadgets\SocialProfile folder, open the Settings.cfg file using any text editor.
  8. 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:

  9. Within the \Gadgets\SocialProfile folder, open the SettingsLayout.cfg file for editing.
  10. 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:

  11. Within the \Gadgets\SocialProfile folder, open the  GadgetTemplate.tpl file for editing.
  12. 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:

     For all other themes, use the following code :

    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. 

  13. 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:

      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.  

  14. Save the changes you made to these theme files.

  15. From the File management screen in Wild Apricot, or using  WebDAV, upload the modified files to the corresponding theme folder on your site .


  16. 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.

Icon

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.

On this page: 

See also:

  • No labels
 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7