Solution to hiding or showing different text in the language switcher

  • Resolved boombalaya

    (@boombalaya)


    8 years, 3 months ago

    Hello, I looked everywhere to change the language code in the switcher, and since I didn’t find anything, I came up with a CSS solution. Hopefully somebody will find it useful. Just paste this code in your theme’s styles file:

    .bogo-language-switcher .en-US&:after {

  //replace .en-US with your language code
  //leave content property empty if you don't want to display any text. Ex: content:="";
      content:"ENGLISH";
    }

.bogo-language-switcher li {
  position:relative!important;
  display:inline-block!important;
  height:20px!important;
  width:auto!important;
  margin-right:5px!important;
  padding-left: 20px!important;
}
 .bogo-language-switcher li a {display:block!important;
    text-indent: -9999px!important;  width:100%!important; position:absolute!important; right:0!important;
   }

    https://www.ads-software.com/plugins/bogo/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter boombalaya

    (@boombalaya)

    Update, this code is more improved and probably suitable for any theme:

    .bogo-language-switcher .en-US:before {
  //replace .es-US with your language code
  //leave content property empty if you don't want to display any text. Ex: content:="";
display: block!important;
content: "EN";
text-indent: 0;
float: left;
    }

.bogo-language-switcher .es-ES:before {
 //replace .es-ES with your language code
 //leave content property empty if you don't want to display any text. Ex: content:="";
display: block!important;
content: "ES";
text-indent: 0;
float: left;
    }
.bogo-language-switcher li {
 position:relative!important;
display:inline-block!important;
overflow: hidden!important;
height:20px!important;
width:auto!important;
max-width:40px!important; //increase if you are using more than 2 characters
padding-left: 20px!important;
text-indent: -9999px!important;
}
 .bogo-language-switcher li a {
 	position:absolute!important;
 	display:block!important;
    text-indent: -9999px!important;
    width:100%!important;
    right:0!important;
   }

    the link doesn’t work

    Unfortunately on the template is not working Awad. It appears only inactive “EN”

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Solution to hiding or showing different text in the language switcher’ is closed to new replies.

Tags