[Resolved] Trouble styling the widgets in the top bar

Home Forums Support [Resolved] Trouble styling the widgets in the top bar

Home Forums Support Trouble styling the widgets in the top bar

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #570121
    Louis-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!
    Manu

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #570153
    Leo
    Staff
    Customer Support

    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.

    #570211
    Louis-Emmanuel

    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

    #570240
    Tom
    Lead Developer
    Lead Developer

    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?

    #570241
    Louis-Emmanuel

    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.

    #570249
    Tom
    Lead Developer
    Lead Developer

    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.

    #570256
    Louis-Emmanuel

    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.

    #570735
    Tom
    Lead Developer
    Lead Developer
    #571067
    Louis-Emmanuel

    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?

    #571098
    Tom
    Lead Developer
    Lead Developer

    The flags definitely have a weird alignment.

    You could try something like this:

    .inside-top-bar .lsicon {
        position: relative;
        bottom: -3px;
    }
    #572048
    Louis-Emmanuel

    Works great, thanks!

    #572379
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.