Aleš Sýkora / September 12, 2024 / 0 comments
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.
Before
After
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;
}
Fuel my passion for writing with a beer🍺
Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻