Change color of bar and round diagramme

IOM-Agency · August 2019

Hi there,

How can I change only the colour of the bar and the round diagramme on one page (see https://prnt.sc/oqiire)? I do not want to change the color of the theme options, only on a single page. Can you send me the custom css for that, please?

Thank you.

Pablo · August 2019

Hello,

If you want to change the color of diagramme only on the single page, you have to use the CSS code with ID of that page and catch it with css.

I cannot create it for you because you didn't send a link to your website.

Also, if you would like to change this color through the Theme Options, you have to go to the Theme Options > Colors > Shortcodes

http://prntscr.com/oqil4s

Thanks

IOM-Agency · August 2019

Hi,

Here is the page: https://websites.iom-agency.com/leistungen-hebamme/

Please send me custom css.

Thank you.

IOM-Agency · August 2019

And how can I change the colour of the brown button "Absenden" only on this page: http://websites.iom-agency.com/kontakt-hebamme/

Bryan · August 2019

Hey,

the send button color can be changed with this css

body.page-id-2376 input[type="submit"] {
	background-color: #9e6735 !important;
	color: #ffffff !important;
}

This is for the bars on that page only:

body.page-id-2370 .progress_bars .bars_list li .bar .progress {
	background-color: #9e6735;
}

IOM-Agency · August 2019

Hi,

Thank you.

The button colour should only be in another colour on that single page (id 2376), not for all pages. Can you send me the custom css only for that page as well, please?

Pablo · August 2019

I've updated the code above.

Thanks

IOM-Agency · August 2019

Thank you.

IOM-Agency · August 2019

And how to set another colour for hover?

Pablo · August 2019

You have to attach the :hover pseudoclass.

Check it here:

https://www.w3schools.com/cssref/sel_hover.asp

Just add it to the actual code.

Thanks

IOM-Agency · August 2019

Sorry, forgot to write, tht I just want hover for the submit button, how to integrate the code then?

Pablo · August 2019

As I said, attach the hover pseudoclass and behavior for it.

body.page-id-2376 input[type="submit"]:hover {
	background-color: gold !important;
	color: red !important;
}

Thanks

IOM-Agency · August 2019

Hello,

You only send me color for progress bar, but not for the round one. Please send me custom css for that as well.

Thank you.

IOM-Agency · August 2019

Here the link: https://websites.iom-agency.com/makler-leistungen/ As you can see, only the progress bar changed the color, but not the round ones.

Pablo · August 2019

It's not possible to change it with CSS code.

The round ones are made with Canvas and the code is provided in the html.

http://prntscr.com/ouj0tp

You would have to create some JS script which will exchange that value.

But unfortunately, we do not help with creating the JS codes for websites.

Thanks

IOM-Agency · August 2019

So you can send a CSS code but not a little Javascript code? I must be possible to change the colour for that as well, because this feature is the same as the progress bar, but in a circle.

When you cannot send Javascript code, please tell me a solution that is possible. I cannot have different colours here, is must look the same.

Thanks a lot for your help and understanding.

Kathrin

Pablo · August 2019

As I said, I cannot do it - it's not possible.

The inline-css code is the most important and cannot be overwritten by the CSS.

The "progress bar" and "charts circle" are two independent functionalities.

The first one is made with HTML/CSS and the second one with canvas - that's why it's complicated to change.

If you want to change that color to blue, you have to change it in the theme options in the colors section.

Of course, it can be done with the JS to change it on the single page, but as I said, we do not provide such customizations.

Thanks

Change color of bar and round diagramme

Comments