Default Social Widget Styling

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;
}

More From This Section

If using default mobile - this snippet will reformat raggedy thumbnails applied to more photos area on galleries. Applied to mobile css area.
Add this CSS to your stylesheet to have out of stock products show as Sold (rectangle / circle options)
If you theme does not support product stamps, you can add the code to your content.css file area. Note: May not be compatible with all templates.
Customise the social widget icons
Enable smooth scrolling when jumping to a bookmark.

FAQ Topics

Search for help:

> Home