Support » Plugin: Bogo » Using HTML in the language switcher widget.

  • Hey

    I have downloaded, installed and tested Bogo. I really like the simplicity in switching the admin language and creating a post/page in another language!

    What about adding the posibilty to add HTML into the language switcher widget (and use some styling with the shortcode as well)?
    This way one can add flags instead of text or both. To style the switcher.

    Have a great day!

    http://wordpress.org/extend/plugins/bogo/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Thank you. Current Bogo doesn’t have enough action/filter hooks yet. I’ll add them little by little.

    Adding flags is possible with the current version. Look at class attribute of <li> under <ul class="language-switcher">. They should have classes of locale code. Add flag images as their background image.

    Hi Takayuki!

    I went to plugins -> Bogo -> Edit
    link-template.php and found the <ul class=”language-switcher”>
    and a <li> code

    echo '<li class="' . esc_attr( $class ) . '">';
    
    		if ( is_singular() ) {
    			if ( empty( $translations[$code] ) || $locale == $code )
    				echo esc_html( $name );

    I am not sure if I am in the right php file, and how to add the img tag.
    Could you help out with this?
    Thanks!

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    No, don’t edit plugin’s code. I mean editing CSS stylesheet in your theme.

    (It looks like the code I pasted in the last comment made the thread weird.

    I checked the code through inspect element in Chrome:

    <ul class="language-switcher">
         <li class="en-US en current first">English
         <li class="nb-NO nb last">..

    So this means inside the li class”en-US” I can put the img tag. Can you make a quick example?

    Thanks..:)

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    You can use CSS property background-image or background.

    http://www.w3.org/TR/CSS2/colors.html#background

    Here is how I did it for English and Japanese (images dir is located in my child-theme, and flags are about 30x20pix):

    li.en-US {
    	background-image:url('images/en_US-flag.jpg');
    	background-repeat:no-repeat;
    	background-position:0px 0px;
    	height: 25px;
    	text-indent:40px
    
    	}
    li.ja {
    	background-image:url('images/ja_JP-flag.jpg');
    	background-repeat:no-repeat;
    	background-position:0px 0px;
    	height: 25px;
    	text-indent:40px
    	}

    I would like to see the flags be clickable too. I would also like the ability to change the Language name so that I can see “English” on the Japanese locale and “日本語” on the en_US locale…

    HTH,
    Ray

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Using HTML in the language switcher widget.’ is closed to new replies.