Clean Yeti Basic
[resolved] QTranslate support: use background-color instead of background (8 posts)

  1. Daedalon
    Posted 1 year ago #

    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?

  2. Richard LaFranchi
    Theme Author

    Posted 1 year ago #

    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.

  3. Daedalon
    Posted 1 year ago #

    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 li.active > 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 :)

  4. Daedalon
    Posted 1 year ago #

    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' );
  5. Dimitrov
    Posted 1 year ago #

    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


  6. Richard LaFranchi
    Theme Author

    Posted 1 year ago #

    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

  7. Dimitrov
    Posted 1 year ago #

    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.

  8. Richard LaFranchi
    Theme Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic