Home>Support>Site Origin Page Builder Social Media Buttons problem

Site Origin Page Builder Social Media Buttons problem

On my website jonglanvilledesign.co.uk, I’ve been using the Social Media Buttons widget within Site Origin’s Page Builder, and noticed that the buttons are now oval when they used to be completely circular. I’ve tried every possible setting

Would anyone be able to tell me how I can get them back to being circular please?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 months, 22 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    I’ve run a few tests and I was able to round the same icons locally by using these Design and Layout settings:

    If your settings differ, please try the above settings to see if that helps.

    If however your settings are exactly the same as the above screenshot, would it be possible for you to send me an export for this widget? This will allow me to inspect your settings and work out why the icons aren’t round. To export a page, open up the linked page in the editor and click the Layout button in the Page Builder toolbar. Click Import/export and then click download. Please upload the export to a 3rd party file hosting site such as WeTransfer (no email is required).

    Kind regards,
    Alex

  2. 9 months, 18 days ago wavyglanbles

    Hi Alex. Thank you for getting back to me, but I don’t see any screenshots or above settings. I’m not sure if it’s due to me replying late or not.

  3. 9 months, 18 days ago Andrew Misplon Hi, I Work Here

    Hi, thanks for your follow-up. When able, please, try editing the page in question within WordPress. Once you’re in the Page Builder interface click on the Layouts button, you’ll find it in the Page Builder toolbar then Import/Export then Download Layout. That’ll download a JSON file to your desktop. Next, go to https://wetransfer.com/ and upload the layout and send us the link.

  4. 9 months, 18 days ago Andrew Misplon Hi, I Work Here

    Layouts button within Page Builder: https://imgur.com/a/Ym3Pz8B. Thanks again.

  5. 9 months, 18 days ago Andrew Misplon Hi, I Work Here

    I’ll ask Alex if he can upload the missing screenshot when he’s back online. Sorry about that! If you can perhaps send a page export in the meantime, I’m sure that’ll help speed things up.

  6. 9 months, 18 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    Here’s a link to the missing screenshot.

    Kind regards,
    Alex

  7. 9 months, 18 days ago wavyglanbles

    Thank you Alex. I have exactly the same things as the screenshot apart from Wire as I prefer the wire effect on the buttons.

    And Andrew, I’ve downloaded the JSON file and tried to upload it via WeTransfer, but what e-mail do I send it to?

  8. 9 months, 18 days ago wavyglanbles

    Don’t worry, I’ve uploaded it now and created a link. Do I send it privately or just on here?

  9. 9 months, 18 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    Thanks for checking.

    Please reply with a copy of the link to the export.

    Kind regards,
    Alex

  10. 9 months, 18 days ago wavyglanbles

    Link

    Thank you

  11. 9 months, 17 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    Thanks. Try changing your settings to this. How does that look?

    Kind regards,
    Alex

  12. 9 months, 17 days ago wavyglanbles

    Hi Alex.

    I just tried those settings and still having the long curved rectangles rather than circles.

    Image

  13. 9 months, 16 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    Thanks. I’ve forwarded your results to the development team. We’re currently exploring an updated method of handling the widget’s settings and your results will help change the direction of the changes so the results are more consistent between sites.

    I recommend adding some custom CSS to your site to do this. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS.

    .widget_sow-social-media-buttons .so-widget-sow-social-media-buttons .sow-social-media-button {
    	width: 2.3em;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

    Kind regards,
    Alex

  14. 9 months, 16 days ago wavyglanbles

    Hi Alex

    Thank you for getting back to me. I’ve made the change to the Custom CSS but the icons are still the same ovals. And even refreshed the cache on Chrome and Safari. They’re also ovals on the contact form section on the bottom of the page.

    Thank you for looking into the issue with your development team as well.

  15. 9 months, 16 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    Try I’ve had a look at your website and I can’t seem to find the provided CSS. Can you please try clearing your page cache?
    Regardless, please try replacing the previously provided CSS with:

    .widget_sow-social-media-buttons .so-widget-sow-social-media-buttons .sow-social-media-button {
    	width: 76px;
    }
    

    They’re also ovals on the contact form section on the bottom of the page.

    Please note that you’ll need to adjust your settings so that both widgets have the same settings.

    Kind regards,
    Alex

  16. 9 months, 16 days ago wavyglanbles

    I’ve just replaced the CSS with what you’ve given me and that is still the same. And weirdly I checked the home page’s View Source and the CSS isn’t in there.

    This is a link to a screenshot of where I’ve placed it Custom CSS Hoping this is the right section.

    Many thanks

  17. 9 months, 15 days ago Alex S Hi, I Work Here

    Hi Wavyglanbles,

    If the CSS isn’t present in the markup it won’t be able to be applied. Please try clearing your page cache, and then your browser cache. Does it show now? If not, please try disabling your page cache (and then clearing your browser cache again) to see if that allows for the CSS to appear.

    Kind regards,
    Alex

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More