- This topic has 11 replies, 3 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
May 7, 2018 at 3:18 pm #570121Louis-Emmanuel
Hi,
I have a top bar widget area merged with a secondary navigation. Within the top bar, I have the wpml language switcher widget and light social icons widget. However they behave weirdly and break the bar. Any ideas how to fix the css ?
Also, is it normal that the light social icon widget had so many empty lines right from the beginning (see https://imgur.com/e89MjI7)? The add icon button doesn’t do anything, and I’m guessing that’s because there are too many lines already.
Finally, it is impossible for me to add the light social icon widget from the customizer. Nothing happens, it stays stuck. But I can do it from the regular widget admin area.
I can give you access to my admin area.
Thanks for your help!
ManuMay 7, 2018 at 5:09 pm #570153LeoStaffCustomer SupportHi there,
Can you try removing this CSS?
.secondary-navigation .inside-top-bar { height: 30px; line-height: 26px; }
For the lightweight social icon problem. Can you try disable all non-GP plugins?
Let me know.
May 7, 2018 at 8:21 pm #570211Louis-EmmanuelHi,
it was already removed. You must see an older cache (I tried to empty the nginx cache), try to look at another page or add a query string at the end like /?v=1
I’ve just tried to disable all plugins but GP premium, social icons and WPML (I dont want to risk to cause some pb with my translations) and the pb is still there, even when I try to do it to another widget area, like to footer.
Thanks
May 7, 2018 at 8:47 pm #570240TomLead DeveloperLead DeveloperFor the top bar, try this:
.inside-top-bar .lsi-social-icons li, .inside-top-bar .wpml-ls-legacy-list-horizontal li { margin-bottom: 0 !important; padding-bottom: 0 !important; } .inside-top-bar .widget { vertical-align: top; } .inside-top-bar .wpml-ls-legacy-list-horizontal { padding: 0; border: 0; } .inside-top-bar .wpml-ls-legacy-list-horizontal .wpml-ls-flag { margin-top: -5px; }
As for the empty fields in LSI – do any errors display if you right click + inspect and check the Console tab?
May 7, 2018 at 8:48 pm #570241Louis-EmmanuelLooking at chrome console, there was an error in customizer.php at the line
jQuery(document).ready(function ($) { $( '.social-item' ).each( function( index ) { if( ! $(this).val() ) { $( this ).parent().hide(); } }); $('.lsi-container .choose-icon').each(function(){ $(this).change(function() { var select = $(this); if ( $(this).attr('value') == 'phone' ) { $(this).next('input').attr('placeholder', '(+33)-123-456-789'); } else if ( $(this).attr('value') == 'email' ) { $(this).next().attr('placeholder', 'you@yourdomain.com or http://'); } else if ( $(this).attr('value') == 'skype' ) { $(this).next().attr('placeholder', 'Nom d'utilisateur'); }else if ( $(this).attr('value') == '' ) { $(this).next().attr('placeholder',''); } else { $(this).next().attr('placeholder','http://'); } }); }); });
This is likely caused by ‘Nom d’utilisateur’. I don’t know where this code is coming from, it seems from light social icons.
May 7, 2018 at 8:58 pm #570249TomLead DeveloperLead DeveloperAh yea, that looks like a bug with the translation not being escaped within the JS. I’ll see if I can push out a fix for that this week.
May 7, 2018 at 9:22 pm #570256Louis-EmmanuelThanks Tom for the CSS, it works great!
For the other pb, I forced wpml to translate Username into Utilisateur and now I can play with social icon in the customizer normally, and there are only 2 lines (RSS and facebook) instead of 20+. So escaping the translation at the JS level seems to be a good idea.
Anyway, thanks for your help.
May 8, 2018 at 9:07 am #570735TomLead DeveloperLead DeveloperNo problem! ๐
May 8, 2018 at 7:52 pm #571067Louis-EmmanuelHey sorry to bother again with the alignment issue, but I’ve increased the size of the social icons and they are not vertically align in the widget area. They seem to be aligned with the bottom of the wpml flags and I don’t know how to edit the css you suggested.
Any ideas?May 8, 2018 at 9:00 pm #571098TomLead DeveloperLead DeveloperThe flags definitely have a weird alignment.
You could try something like this:
.inside-top-bar .lsicon { position: relative; bottom: -3px; }
May 9, 2018 at 10:18 pm #572048Louis-EmmanuelWorks great, thanks!
May 10, 2018 at 7:36 am #572379TomLead DeveloperLead DeveloperYou’re welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.