Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 30, 2021 at 6:33 pm #1323071
    BigAussie

    I am working with a graphic designer and they have asked me to animate a Google Charts — Gauge
    found here: https://developers.google.com/chart/interactive/docs/gallery/gauge

    I got it working properly with specific colours in a basic html page here:
    https://new.jddpacific.com/gaugehtml/

    When I try to add this into a Footer using either Custom HTML Widget or even Text Widget e.g., here:
    https://new.jddpacific.com — there is a strange light grey background behind the Google Gauge. Even stranger is the link above only displays the embedded in page gauge — clicking on Sample Page in the menu will display the animated gauge in the footer . . . both are displaying the strange background NOT seen in the basic html page at the second link above.

    The Designer I am working with wants this animated gauge in the footer of a live website.

    I have tried wrapping the lines of code in the tags -- that stopped the whole thing working.
    Help getting this working with a transparent background would be amazing . . .

    PHP 7.4 on Litespeed server, latest version of Enfold and also latest version of WordPress.

    October 1, 2021 at 6:53 am #1323094
    Rikard

    Hi Jay,

    Please try the following in Quick CSS under Enfold->General Styling:

    .avia_codeblock_section table tr {
    background: transparent !important;
}

    Best regards,
    Rikard

    October 2, 2021 at 8:27 am #1323252
    BigAussie

    Thanks for the quick reply Rikard.

    I’ve now tried adding that in the Quick CSS area — no good I’m afraid.
    No change to the unexpected background colour behind the Google Chart.

    The most important area I need to get it working is in the Footer area.
    I have removed the Chart from the main page area — it was stopping the gauge from working in the Footer anyway.

    I have uploaded a screen shot showing the code in question:
    http://new.jddpacific.com/wp-content/uploads/2021/10/Footer-Widget-Code.jpg
    I have highlighted the Class which seems to control this space and also the <svg Tag where the background colour appears.

    Thanks a lot for your help with this.

    October 2, 2021 at 9:13 pm #1323299
    Mike

    Hi,
    Please try this css:

    #chart_div tr,
#chart_div table {
	background: transparent;
}

    2021-10-02_151102.jpg

    Best regards,
    Mike

    October 3, 2021 at 3:00 am #1323313
    BigAussie

    Thank you VERY much Mike — Success.
    This code gets added to my trove of wonderous pieces of coding provided by the amazing team at Kriesi.

    Have a great weekend.
    Cheers,
    Jay

    October 3, 2021 at 1:58 pm #1323330
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Google Chart – Gauge animated – Strange background colour’ is closed to new replies.