HTML / CSS Snippets

Simple CSS styles to change the default Social Media icons styling.

This requires copying the relevant CSS style rule to your content.css or style.css stylesheets.
The styling uses the tag [WSCOL_THEME_PRIMARY] which will use the Primary Colour as set in the Colours Area.

Change for [WSCOL_LINK] if you want to use the link colour instead. See the [TAGS] page for other colour options.

Note: This code is provided as-is without warrantly.
There is the potential to break your stylesheets if added incorrectly.
Future updates to the CMS may also have an effect.

Default look without custom styling

Primary Background Colour - Rounded Corners

.socialmediaicons a ion-icon {
    background: [WSCOL_THEME_PRIMARY]!important;
    border-radius: 500px;
}



Primary Background Colour - Rounded Corners, Smaller Icon

.socialmediaicons a ion-icon {
    background: [WSCOL_THEME_PRIMARY]!important;
    border-radius: 500px;
    width: 25px; 
    height: 25px;
    padding: 8px;
}

Primary Icon Colour -  No Background-colour

.socialmediaicons a ion-icon {
    color: [WSCOL_THEME_PRIMARY]!important;
    background: none!important;
}

Index Previous