Support » Theme: Clean Yeti Basic » QTranslate support: use background-color instead of background

  • Resolved Daedalon


    Tried to set up QTranslate language flags at the header of our child theme for Clean Yeti Basic 2.1.1. Ran into conflict with the theme’s default CSS at library/Foundation/css/cleanyetibasic.css. QTranslate displays the images with the background declaration of an a element, but the theme’s CSS overrode that.

    The solution was to do a search and replace from “background:” to “background-color:” in that theme CSS file. Is there a particular reason why background was used instead of background-color, or could this fix be considered for the theme?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Serene Themes


    cleanyetibasic.css is compiled based on foundation settings. I’m afraid if I change the file at all it will overwritten the next time I update foundation. I believe that as long as the flag styles are called after cleanyetibasic.css then it should work properly. Take a look at your head and let me know if the flag styles are called before or after cleanyetibasic.css.

    Thank you for your reply, Richard.

    I suspect the order of loading the CSS rules doesn’t get to affect this as the rules in cleanyetibasic.css define their target more exactly than those that QTranslate generates. The QTranslate rules are inline on approximately line 100 of the HTML, whereas cleanyetibasic.css is called among the first 20.


    .qtrans_flag_en { }


    .top-bar-section ul > a { }
    .top-bar-section li a:not(.button) { }

    As the QTranslate rule is generated by the plugin, it might not be the most maintainable option to try to force it to create a more narrowly defined rule, such as .top-bar-section ul li > a.qtrans_flag_en. However, if there’s no easily maintainable way for you to change background to background-color, I’ll have a look at creating a filter or hook that modifies the QTranslate inline code.

    By the way, taking a look at one’s head sounds funny when forgetting the context for a second 🙂

    Ended up using this as a workaround to ensure the QTranslate flag rule overrides everything else:

    /* Alter the qTranslate flag CSS to avoid it getting overriden */
    function my_qtranslate_header_css ( $css ) {
        $css = preg_replace( '_(background:[^}]+)}_', '$1!important }', $css );
        return $css;
    add_filter( 'qtranslate_header_css', 'my_qtranslate_header_css' );

    Hi to Everyone.

    I am struggling to identify the location of this piece of code
    div class="widgetarea cc-widget pasn4"

    This is the website and this white background that appears on the website is the code, I want to remove. I would like to see just the flags.

    How would that be possible?

    Please help


    Theme Author Serene Themes


    Hi Dimitrov,
    this should be a question for the developer of your theme or plugin, but the following should work.

    try this css code:

    .cc-widget {
       background-color: transparent !important;

    you can add it to your style.css file

    Hi Richard LaFranchi,

    Thank you for the help but unfortunately this did not work.
    Do you have any other ideas ?
    I looked for the code through the entire plugin but, I could not find it.

    Theme Author Serene Themes


    Hi Dimitrov,

    It appears that you should be able to customize your css under the theme settings.

    I would contact the theme developer for support:

    It’s also good to create a child theme if you wish to customize the theme at all, so that way any changes you make or not lost when the theme is updated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘QTranslate support: use background-color instead of background’ is closed to new replies.