Social Media Icons

Hi there,

You can definitely make changes to the size and colour of Cubic’s social media icons using some custom CSS. ??

To add custom CSS: Do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update.

Instead, you can activate a custom CSS plugin.If you have Jetpack installed then you can activate its custom CSS module.

Next, enter the following snippet in your CSS plugin’s editor:

.social-navigation a:before {
    font-size: 26px;
    width: 26px;
    color: #663399;
}

Increase/decrease the value of font-size and width in order to increase/decrease the size of the icons. (Both values need to be the same in order for the icons to remain centred.)

You can also change the colour of the icons from #663399 to any HEX colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

The following snippet will then work to add text just before the social icons:

.social-navigation ul:before {
    content: "Find us on social media:";
}

Similar to before, edit the value of content with the specific text you’d like to appear.

Please note: The above CSS is based on how the social icons appear on Cubic’s demo site. CSS can vary from site to site and, so, if the above snippets don’t work for you, please share a link to your site so I can take another look.

Thanks!

Thank you for the quick reply!

This worked beautifully. Just wondering if there is a way to make the actual footer text (find us on social media) bold or different font/type color? The site is scarsdale411.com

Absolutely! You could add further rules to the previous snippet I gave in order to style the text further. For example, the following will make the text bold and change the colour to #03c:

.social-navigation ul:before {
    content: "Find us on Social Media:";
    font-weight: bold;
    color: #03c;
}

Thank you – looks good!

You’re welcome! You know where to find us if any extra questions come up, too.

Hi Siobhan,

Picking up on this thread. I would like to add the social media icons to my homepage and on each blog post page as in the Cubic example – can you help me with this please?
My site is thatssocool.co.uk.

Thanks,

Donna

Hi Donna,

To add the social media icons in the lower right hand corner of Cubic, you’ll need to activate its Social Menu.

To do that:

• Navigate to Appearance > Menus in your WordPress admin area.
• Select the option to create a new menu.
• Give your new menu a name – something like “Social Menu” would work – then click on the blue button to Create Menu.
• Under Menu Settings check Social Menu as your menu’s location.
• Next, from the left hand side of the screen, choose the Custom Links module.
• Under this module, enter the URL to your social profile and then Add to Menu.
• Repeat the above step until you’ve added all the social profiles that you wish to your menu.
• Save your changes and you’re done! ??

Cubic will automatically convert links to Facebook to a Facebook icon and so forth.

Hope that helps out!

If you have any extra questions then please can you start a new thread on this forum? You can do that here:

https://www.ads-software.com/support/theme/cubic#new-post

It’s easier for us to keep track of different questions if they’re kept to separate threads and also prevents the original poster from receiving unnecessary email notifications.

Thanks!

• This reply was modified 8 years, 4 months ago by Siobhan.