How to change line color for the timeline?

[kdeasymoneysniper]

I saw in your demo that you could change the line color for the timeline, but I am not sure how you did it, is it possible to help me with that, and provide the steps on how I can achieve a custom line color? Thanks!

[stephane-monnot]

You can use this styles in your own css file to override the default styles :

/* CUSTOM LINE COLOR */
/* The line */
.vertical-timeline.vertical-timeline-custom-line::before {
  background: #424242;
}

/* Icon container's border */
.vertical-timeline.vertical-timeline-custom-line .vertical-timeline-element--work .vertical-timeline-element-icon {
  box-shadow: 0 0 0 4px #1976d2, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.vertical-timeline.vertical-timeline-custom-line .vertical-timeline-element--education .vertical-timeline-element-icon {
  box-shadow: 0 0 0 4px #c2185b, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

Of course, you need to adapt the classes name and add vertical-timeline.vertical-timeline-custom-line to the VerticalTimeline element.

[kdeasymoneysniper]

Thank you for the prompt response, really appreciate it! I am quite new to using React, and can I check if I just have to create a css file containing the above code, and just import it after I import your original css file? Or do I have to combine all of it into 1 css file and edit it from there? Look forward to your reply, thanks!

With Regards, Jason

On Thu, May 7, 2020 at 10:59 PM Stéphane Monnot notifications@github.com wrote:

You can use this styles in your own css file to override the default styles :

/ CUSTOM LINE COLOR // The line /.vertical-timeline.vertical-timeline-custom-line::before { background: #424242; } / Icon container's border /.vertical-timeline.vertical-timeline-custom-line .vertical-timeline-element--work .vertical-timeline-element-icon { box-shadow: 0 0 0 4px #1976d2, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); } .vertical-timeline.vertical-timeline-custom-line .vertical-timeline-element--education .vertical-timeline-element-icon { box-shadow: 0 0 0 4px #c2185b, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/stephane-monnot/react-vertical-timeline/issues/65#issuecomment-625307778, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOFJE5G7NP6GP6C2W7LACPTRQLED3ANCNFSM4M3MVRMA .

[stephane-monnot]

If you create a css file and import it after my css file, it should work.

[kdeasymoneysniper]

Thank you, it worked! Really appreciate the help, and your timeline component is super cool, once again thank you!

On Fri, May 8, 2020 at 2:14 AM Stéphane Monnot notifications@github.com wrote:

If you create a css file and import it after my css file, it should work.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/stephane-monnot/react-vertical-timeline/issues/65#issuecomment-625416039, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOFJE5G7AVYFKR6P6P32DWDRQL265ANCNFSM4M3MVRMA .

[peril-patel]

this is not working:( anyone can guide me???

[mavsin]

Not working. :(

[stephane-monnot]

Could you provide more informations please ?

[N0t-Sur3]

@peril-patel @mr-new-0509

Vertical Line | change color or hide it:

1. add a class eg costum-line to the <VerticalTimeLine> element
2. style .costum-line in the css file

// changes the vertical line color
 .costum-line:before {
  background: #FF5700;
}
// created a costum-lineh, that hides the line
.costum-lineh:before {
  background: none;
}

Icon Border | change color or hide it:

1. add .vertical-timeline-element-icon to your css file
2. style the box-shadow

// changes timeline icon border color
.vertical-timeline-element-icon {
box-shadow: #FF5700;
}
// hide timeline icon border
.vertical-timeline-element-icon {
 box-shadow: none; 
}

@@ vertical line = background | border of icons = box-shadow @@

@@ add the created class eg costum-line to the exported <VerticalTimeLine> @@

E.g. I defined the timeline in const ExperienceCard, but I put ExperienceCard in the const Experience. Here I add the above suggested costum-line like <VerticalTimeLine className="costum-line">, which is exported in export default SectionWrapper(Experience, "work");.

[Sardar-Ali-Murad]

lineColor={ String } Choose your timeline color (default: '#000'). So, lineColor="red" in

[sellwawy]

<VerticalTimeline lineColor={'rgb(2 6 23)'}>......