- This topic has 5 replies, 2 voices, and was last updated 7 years, 2 months ago by
.
Can we change easily the color of the timeline ‘line’ – which is grey. Via the element styling we can change the color of the ‘bullet point’ on the timeline, but we would like to change color of the timeline – and maybe if possile let the timeline not start & end earlier. I mean now before first and last bullet – one centimeter line is present. We would like to get rid of those.
Hi @christiaanvr,
I hope you are well today and thank you for your questions.
Can we change easily the color of the timeline ‘line’ – which is grey.
You can try achieving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-timeline:before { background: #a1d6ad; }Please change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.aspand maybe if possile let the timeline not start & end earlier. I mean now before first and last bullet – one centimeter line is present. We would like to get rid of those.
I am not sure what you meant by this so please share the screenshot of it.
Best regards,
Shufflehound teamNope unfortunatley the custom CSS code did not work…
In the CCS stylesheet I can not find the timeline color to change if I go through it.
Can you help?
The custom CSS code is working fine on my test site.
Could you please share me the page URL from your site where you are using custom CSS code but it is not working so that i can troubleshoot it?
Overhere it is .. the line is still grey while I use custom css code :
.sh-timeline:before {
background: #022F54;
}Solution for this topic
It is not working on your site because you are using different timeline style so try using below CSS code instead of the code shared above.
.sh-timeline-2:before { background: #a1d6ad; }
