Styling Social Media Buttons


Where some of the different color fields from "properties" will show on the icons:

 

Live example to view hover color:

  1. Alignment: determine where you social media company page buttons will show:
    • Default: the icons will display to your site default (typically left) on their own line
    • Left: the icons will display on the left of the section they're in on their own line
    • Center: the icons will display in the center of the section they're in on their own line
    • Right: the icons will display on the right of the section they're in on their own line
    • Wrap Left: the icons will display on the left of the section they're in alongside any other elements on the same line
    • Wrap Right: the icons will display on the right of the section they're in alongside any other elements on the same line
       
  2. Padding: Set space around the buttons (in pixels)
     
  3. Width: Set the width of the button display (in percentage or pixels)
     
  4. Theme:
    • Icons: The social media buttons will display as icons.
      Ex:
    • Text Only: The social media buttons will display as text.
      Ex:
       
  5. Preview: As you make changes to the properties, this area will display a preview of what your current settings will look like.
     
  6. Alignment: Set the buttons to display in a horizontal row, or a vertical column.
     
  7. Font Size: Set the size of the social media icon display
     
  8. Color: Set the color of the social media icon
     
  9. Background Color: Set the background color of the social media button. This will be the color that shows within the social media button box/circle
     
  10. Hover Color: Set the color of the social media icon when the cursor is hovering over it
     
  11. Hover Background Color: Set the background color of the social media button when the cursor is hovering over it. This will be the color that shows within the social media button box/circle
     
  12. Border Style:
    • None
      Ex:
    • Rounded
      Ex:
    • Circle
      Ex:
    • Square
      Ex:
       
  13. Border Color: Sets the color of the border around the outside of the icon (as long as border style is not set to "none")
     
  14. Platforms: Social media sites that have been added to the "select platforms" box will display that social media's icon and link (as long as that URL has been added to your Social Media Pages within Site Configuration
     
  15. Open in a New Window?
    • Yes: When a site visitor clicks on the social media button, it will open that social media page in a new window
    • No: When a site visitor clicks on the social media button, it will open that social media page within the same window (the visitor will need to select their "back" button to navigate back to your site)