Archived topic
Trouble styling the widgets in the top bar
11 replies · Started by Louis-Emmanuel on May 7, 2018
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!
Manu
Hi 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.
Hi,
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
For 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?
Looking 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.
Ah 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.
Thanks 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.
No problem! :)
Hey 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?
The flags definitely have a weird alignment.
You could try something like this:
.inside-top-bar .lsicon {
position: relative;
bottom: -3px;
}Works great, thanks!
You're welcome :)
