WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
How to put transposh flag on the header (6 posts)

  1. sugaboss
    Member
    Posted 2 months ago #

    Hi all, how to put transposh (multiligual plugin) flag on the header area (preferably replacing the tag line position)

    Using a comment in this snippet (using qtranslate in navbar widget) i managed to put the transposh widget in the navbar area

    However what i want to have is the flag instead of dropbox like that.

    I also found a comment in this article suggesting on how to put transposh flag in after header area by changing function.php

    Please somebdy help me how to do this .

    Any suggestion would be appreciated.

    PS: I couldn't find any snippet or article about transposh in the site. The only multi-language site topic cover so far are:

    This snippet (using polylang)
    This snippet (using qtranslate in menu)

  2. sugaboss
    Member
    Posted 2 months ago #

    If somebody need a link to my site .. click here

  3. ElectricFeet
    Member
    Posted 2 months ago #

    From the screenshots of transposh, it seems that the widget has several settings, one of which is flags. You should start there.

  4. sugaboss
    Member
    Posted 2 months ago #

    Silly me ... I now know how to show the flag

    But my placement problem is not resolved yet ... what I want to do is to place the flag on the right top corner of the header.

    Should i use the social link area and make it new widget area using this code in function.php

    // Adds a widget area navbar in header
    if (function_exists('register_sidebar')) {
        register_sidebar(array(
            'name' => 'Extra Widget In Socials',
            'id' => 'extra-widget',
            'description' => 'Extra widget in the social links area',
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => ''
        ));
    }
    // Place the widget area in the social links area
    add_filter ('tc_social_in_header', 'add_my_widget');
    function add_my_widget() {
        if (function_exists('dynamic_sidebar')) {
        dynamic_sidebar('Extra Widget In Socials');
        }
    }

    Or using the after navbar as a new widget area using this code

    // Adds a widget area to house transposh flags. See also accompanying css.
    if (function_exists('register_sidebar')) {
        register_sidebar(array(
            'name' => 'Extra Widget After Navbar',
            'id' => 'extra-widget',
            'description' => 'Extra widget after the navbar',
            'before_widget' => '<div class="widget %2$s" id="%1$s">',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_title' => '</h2>'
        ));
    }
    
    // Place the widget area after the navbar
    add_filter ('__after_navbar', 'add_my_widget');
    function add_my_widget() {
        if (function_exists('dynamic_sidebar')) {
        dynamic_sidebar('Extra Widget After Navbar');
        }
    }

    I am currently experimenting with the 2nd option and trying to figure out the CSS to put it on the top right based on this snippet.

  5. sugaboss
    Member
    Posted 2 months ago #

    is there any other suggestion ... maybe php code for creating a new widget area above the navbar?

  6. ElectricFeet
    Member
    Posted 2 months ago #

    You're on the right track using the second option. You've currently added the following CSS:

    .transposh_flags {
        float: right;
        margin-right: 10px;
    }

    Remove this and instead use:

    .widget.widget_transposh {
        position: relative;
    }
    .transposh_flags {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    The key to all this is understanding absolute and relative positioning. To give yourself absolute control over the positioning of the flags element (with the .transposh_flags class) within the parent widget element (with the .widget.widget_transposh class), the parent element must have a position of relative and the child element must have a position of absolute.

    It took me ages to wrap my head around this concept. It seems counter-intuitive that you have to mess with the parent to get the child to behave ... until, that is, you draw parallels with real life—then it's easy to remember :-)

    More details here.

Reply

You must log in to post.

About this Theme

About this Topic