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;
}
![]()
