Bricks: TranslatePress short language switcher styles

min read / Uncategorized / Share on: Twitter, LinkedIn, Facebook

Post summary: Provide better integration of the language name switcher shortcode into your Bricks Builder theme. Grab the CSS code here.

The css code below is mine CSS style, which I do use with TranslatePress language switcher shortcode, because I don’t like how does it look when using in Bricks (strange paddings etc.). I use this code within the shortcode element holding the TranslatePress language switcher shortcode.

Here is the CSS code

%root% .trp-ls-shortcode-disabled-language.trp-ls-disabled-language::after {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" class="menu-item-icon"><path d="M1.50002 4L6.00002 8L10.5 4" stroke="%23000" stroke-width="1.5"></path></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            position: relative;
}
%root% .trp-language-switcher {
  width: auto;
  height: auto;
}
%root% .trp-language-switcher > div {
  background: var(--white); /*change color variable if you need*/
  border: 0px;
  padding: 0px;
  width: auto !important;
}
%root% .trp-language-switcher > div > a {
  color: var(--black); /*change color variable if you need*/
  padding: calc(var(--space-xs)/2); /*change size variable if you need*/
  font-family: inherit;
  font-size: inherit;
}
%root% .trp-language-switcher > div > a:hover {
  background: var(--primary); /*change color variable if you need*/
  border-radius: 0px; 
}
%root% .trp-language-switcher:hover .trp-ls-shortcode-language {
  padding: 0px;
}

0 comments