Support » Theme: raindrops » The flag image is not visible

Viewing 9 replies - 1 through 9 (of 9 total)
  • Can you temporarily disable the Minify caching program? There seems to be some errors that are hard to see with Minify turned on.

    Theme Author nobita


    Is plugin below?

    If you use this.

    Another Theme visible flag pictures?

    This plug-in does not come with a national flag icon.

    Since which image is missing from the solution or not can be displayed, Can you provide a screen shot?

    Thank you.

    When I Disable Minify I can see the flag image,for 1 second when the site loaded then they was gone. Minify is disable now so you can see. It works with other themes. Now you are able to click them but you can´t see the image, if you hover the mouse over the invisible image you can see.

    Theme Author nobita


    Still minified your WEBSiTE.

    I’m captured your site.

    Translate source

    ( this css file is not exists plugin I can not reproduce it )

    your toolba.css

    .tool-item.selected, .tool-item:hover  {
    	background: #a79f9f;
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a79f9f), color-stop(93%, #e2dfdf));
    	background: -moz-linear-gradient(top, #a79f9f 0%, #e2dfdf 93%);
    	background: -ms-linear-gradient(top, #a79f9f 0%, #e2dfdf 93%);
    	background: linear-gradient(to bottom, #a79f9f 0%, #e2dfdf 93%);
    	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3OWY5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkzJSIgc3RvcC1jb2xvcj0iI2UyZGZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a79f9f', endColorstr='#e2dfdf',GradientType=0 );

    decode result

    <?xml version="1.0" ?>
    <svg xmlns="" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
      <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#a79f9f" stop-opacity="1"/>
        <stop offset="93%" stop-color="#e2dfdf" stop-opacity="1"/>
      <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />

    I can not find flag pictures.

    SNS also, Translate also, data: because it uses the image, but was confirmed both, none have been displayed

    minify program data: whether they support the image, please check

    And I’m checked, Raindrops display data:image properly.

    Result good for me.



    Maybe Not themes issue.

    I think it might be a theme issue. What’s happening is that the .flag elements rely on a title attribute to display the flag. For example, flags which use English are going to have title=English as part of the element. However, in this javascript file:

    There’s this block of code:

    jQuery('a').not( "#flags,.tooltip" ).removeAttr("title");
    jQuery( ".no-tooltip" ).removeAttr("title");
    // #flags is google translate plugin

    What this does is remove the title attribute from any link that doesn’t have an ID of flags or a class of tooltip. However, the elements which need the title element to display the flags have a class of flag, so the I think first line in the code block should be modified to this:

    jQuery('a').not( "#flags .flag,.tooltip" ).removeAttr("title");

    Or else:

    jQuery('a').not( ".flag,.tooltip" ).removeAttr("title");

    You can see how the flags are displayed in the Google Translator CSS file:

    That’s why you can briefly see the flags as the site is loading, the Google CSS file gets loaded first in the document header, and the javascript which removes the title attribute doesn’t get executed until the javascript file, which is at the end, loads.

    By the way, the CSS which displays the flags looks like this:

    #flags.size20 a[title="English"],
    .tool-container .tool-items a[title="English"] {
        background:url('../images/flags20.png') -89px -352px no-repeat;

    Theme Author nobita


    @crouchingbruin Nice !

    I’m understand.

    Change plugin from wp google language translator to google language translator.

    I was reproduce the problem.

    Thank you deep.


    Sorry I was wrong. This is Raindrops bug.


    Please open raindrops/raindrops.js line 35
    Change from

    jQuery('a').not( "#flags,.tooltip" ).removeAttr("title");

    to below

    jQuery('a').not( ".flag,.tooltip" ).removeAttr("title");

    ( change from #flags to .flag )

    This bug will fixed next version Raindrops

    Thank you.

    Great work with the latest update! Now is the flag images for the Google Language Translator visible! very good job 🙂

    Theme Author nobita


    Sorry and Thank you.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘The flag image is not visible’ is closed to new replies.