CSS - Example

In this article you will find samples about customzing the switcher style. You can try designing a swticher with these samples. Make it looks as you want.

Customize Floating language selector
Go to Etranslate >> Setting >> Custom, then you can write CSS code and apply it to your language selector. Belows are some samples. You can use them together.

##1)  Change The Font And Fontsize

`div#localiser-translate-etranslate {
    font-size: 16px;
    font-family: CustomFont;
}`

![](https://cdn.shopify.com/s/files/1/0397/9834/1788/files/CSS_1.png?v=1636194428)

*Note: The font-size and font can be customized by editing the value.*

##2) Change the flag position

`.etranslate-language-list-button-centent {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.etranslate-language-name {
    margin-right: 10px;
}
.etranslate-language-list-button{
    flex-direction: row-reverse;
}
.etranslate-lo-select-dropdown-item{
    flex-direction: row-reverse;
}`

![](https://cdn.shopify.com/s/files/1/0397/9834/1788/files/CSS_2.png?v=1636194428)

##3) Remove the arrow

`.etranslate-language-arrow {
    display: none!important;
}

![](https://cdn.shopify.com/s/files/1/0397/9834/1788/files/CSS_3.png?v=1636194429)

##4) Change the high of switcher
`div#etranslate-language-button {
    height: 30px;
}`

![](https://cdn.shopify.com/s/files/1/0397/9834/1788/files/CSS_4.png?v=1636194429)

*Note: The height of switcher can be customized by editing the value.*