Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I’im using Vantage theme and i want to install my personal icons on Vantage social media widget. I know it’s not possible actually (maybe in the next release). So, i put the Text widget including my picture. But, there is too much space between my icon and the vantage social media icons… Is there one solution please to reduce that and having the same width like our widget ?
you should be using SiteOrigin Social Media Buttons from SiteOrdigin Widgets Bundle plugin https://wordpress.org/plugins/so-widgets-bundle/.
You have the “Design and layout” to fine tune the layouts to your linking, if further customisation is required use the custom css after naming the “widget class” in attributes of “widget style” on the right side of the UI of SiteOrigin Social Media Buttons.
Srikanth Kamath
http://tskamath.pactindia.net
Hi Laudessman
There are a couple of fixes for this. the first is to edit your image and remove the border from around the edge of the red square. You can then align the image with the social media icons using some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
#masthead .hgroup #header-sidebar aside.widget_text { margin-right: 2px !important; }The alternative is to leave the border in place and use the following in Custom CSS
#masthead .hgroup #header-sidebar aside.widget_text { margin-right: 2px !important; top: 3px; margin-bottom: 1px; margin-left: 2px; }Let us know how you get on
Magus
Hi Magus,
Thx for your quickly answer.
It works so fine ! I just set the margin and it was ok.
Thanks you,
Laudessman
Hi Laudessman
I would still recommend adding the remaining entries from the second snippet. the icon currently sits higher than the Social Media Icons. The remaining entries will help bring it into line and centralize it when viewed on mobile.
Magus
Hi Magus,
Thank you for all your instructions.
I applied the code. But I see that in different browsers (Chrome, IE 8/9/10/11 with netrender – i’m on mac) there is always a lag problem in the alignment of icons. Have you any solutions ?
Thx
Laudessman
Hi Laudessman
On slow connections there will unfortunately be a little delay as Custom CSS is added after the initial core styles. On a quick connection this shouldn’t be noticeable. You could perhaps try using a caching plugin like WP Super Cache to speed your site up. Besides that I don’t think there is another solution to the problem. Sorry I don’t have better news. Your site will most likely load faster when not being viewed through a renderer.
Hello,
Thank you for everything.
But have you a solution to ensure alignment of my icon in different browsers ?
If this is not possible with this solution ( add a text widget to the header ) , you have another solution for integrating a personal icon aligned to others ?
thank you
Laudessman
All looks good in OS X Chrome. Can you perhaps let us know where you’re seeing an alignment issue? Thanks.
Hi,
Thank you for your reply. I put you as an attachment with a screenshot of Chrome as browser on my mac.
On the other hand, I believe that Internet Explorer, there is the same problem …
It’s unfortunately not possible to email attachments into the forum yet, if that’s what happened. If possible, please, upload the screenshot to your media library and send the link. Apologies for the hassle. Thanks :)
Hi,
No pb.
http://les-amis-de-doudou.fr/wp-content/uploads/2015/06/Capture-d’écran-2015-06-22-à-10.38.27.png
Thx,
Hi Laudessman
The image container is being drawn differently on the different technology browsers. On my computer Firefox and Chrome display correctly and Safari and IE display the image 3px higher on the page.
Please try adding the following in your custom CSS
#masthead .hgroup #header-sidebar aside.widget_text .textwidget { position: relative; width: 36px; height: 36px; display: block; }Let us know how you get on
Magus
Hi Magus,
It looks fine now on differents browsers, thank you.
But now, there a new pb with the smartphone and tablets… the icon is no longer aligned…
Thx
Laurent
Le 22 juin 2015 à 16:47, Magus a écrit :
Hi Laurent
Please remove the last entry given and replace with this.
#masthead .hgroup #header-sidebar aside.widget_text .textwidget { position: relative; width: auto; height: 37px; display: block; } @media all and (max-width: 640px) { #masthead .hgroup #header-sidebar aside.widget_text .textwidget { height: auto; } }Magus
Hi Magus,
It works so fine !
Thank you very much, you are the best support i have ever seen.
Shortly, i'm going to buy another Vantage theme licence.
Thx,
Hi Laudessman
Excellent. Let us know if you need any more help
Magus