Closed kdeasymoneysniper closed 4 years ago
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.
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 .
If you create a css file and import it after my css file, it should work.
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 .
this is not working:( anyone can guide me???
Not working. :(
Could you provide more informations please ?
@peril-patel @mr-new-0509
costum-line
to the <VerticalTimeLine>
element.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;
}
.vertical-timeline-element-icon
to your css filebox-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");
.
lineColor={ String }
Choose your timeline color (default: '#000').
So,
lineColor="red" in
<VerticalTimeline lineColor={'rgb(2 6 23)'}>......
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!