-
Notifications
You must be signed in to change notification settings - Fork 158
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to change line color for the timeline? #65
Comments
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 |
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 ***@***.***> 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
<#65 (comment)>,
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 ***@***.***> 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
<#65 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AOFJE5G7AVYFKR6P6P32DWDRQL265ANCNFSM4M3MVRMA>
.
|
this is not working:( |
Not working. :( |
Could you provide more informations please ? |
@peril-patel @mr-new-0509 Vertical Line | change color or hide it:
Icon Border | change color or hide it:
@@ 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 |
lineColor={ String } |
<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!
The text was updated successfully, but these errors were encountered: