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
FAQ Topics
The Basics
Building your site
- Pages
- Content Editor Modes Explained
- - DRAG DROP Editor (Default)
- - CONTENTBOX Editor (Advanced)
- - WORD STYLE Editor (TinyMCE)
- - LIVE Editor (Click to Edit Mode)
- Styling Content
- Images / Backgrounds
- Banners and Sliders
- Uploading content
- Design Templates
- Forms
- More Q & A
- Menus
- Mobile Styling and Optimisation
Advanced Page Types
E-Commerce
- Shopping Basics
- Category Management
- 产品
- Product Options
- Layout and Formatting
- 付款方式
- Processing Orders
- Advanced Ecommerce
- Product Pricing, Currencies
- Plugins
- Wholesale
- Bookings Management System
- Freight - Couriers
- Stock & Quantities
- Vouchers, Discounts, Loyalty Points
- Selling Photos / Prints
- Shopping Cart Add-on Page types
- Advanced APIs / Add ons
- 销售点(POS)
- Reports
- Orders / Invoices
Email & Membership
- Member Management
- Members Pages / Template Customisations
- From Addresses and Reply To Email Notifications
- Global Enquiry form options
- Standard Field Names
- Webmail
- Bulk Email
- CRM Features
- Email Campaigns
- Forums & Blogs
- Pop3/Imap Email Services
- Scams and Hoaxes
- Lead Magnets / Growing Your Customer Database
Promoting your site
Advanced
- Power User Options
- Form Spam Filtering
- Wordpress
- PHP Setup
- [TAGS]
- jQuery snippets
- Search External Links / Import external content
- HTML / CSS Snippets
- Embedding Web Fonts
- Loading additional Material Symbols styles
- FAQ Help Map
- Uploading local font files
- Advanced Template Customisation, CSS, etc
- Languages and Translations
