-
AuthorPosts
-
October 4, 2019 at 1:00 pm #1144962
Hi
On the timeline ALB element, you can add custom class or id,
but you can’t add this to the milestones themselves, which could allow to style individual milestones.
Is there a way to do this I’m not aware of?
Is there a snippet to turn on “Custom CSS classes input field” to timeline milestones?
Thank youOctober 4, 2019 at 9:37 pm #1145126Hey Julien,
No, such an option is not available, but you can still give the id to the parent element and try to use the css to target the child element that you need.
Best regards,
VictoriaOctober 7, 2019 at 9:42 am #1145693Hi Victoria
What do you mean? The only parent element I can add ID or class to is the Timeline element itself.
What if I need to target one or more specific milestone inside one timeline?Actually, I noticed that the date heading has an automatic ID with the date in it (example id=”milestone-31-august-2019″),
which allow me to target the heading by its ID, then the icon and the milestone content using the + CSS selector:CSS selectors examples:
date heading: #milestone-31-august-2019 (adapt to your date)
icon: #milestone-31-august-2019 + .av-milestone-icon-wrap
milestone content: #milestone-31-august-2019 + .av-milestone-icon-wrap + .av-milestone-content-wrapThis solution is far from perfect, because the selectors are long and unoptimized, but above all, it forces me to change the CSS rules for each new milstone date.
That is why adding a class to individual milestones would be great.
(can’t add it to Enfold feature request since the form is frozen for now)October 9, 2019 at 11:02 pm #1146663Hi,
Yes this is something we are working to get it live again so we can accept new requests :)
Best regards,
BasilisFebruary 21, 2020 at 10:48 am #1186655Hi!
It would be really great if I could add a Custom ID Attribute because I have a really long timeline and I would refer to an exact milestone.
Best regards,
BoštjanFebruary 24, 2020 at 12:40 am #1187150Hi,
Sorry for the late reply, each of your timeline items have a custom ID such as#milestone-17
that is number 17 on your site. To style the content box try this css:#milestone-17 ~ article > .av-milestone-contentbox { background-color: red; }
this will give you a red background color but you can adjust to suit.
After applying the css, Please clear your browser cache and check.Best regards,
MikeFebruary 24, 2020 at 11:20 am #1187256February 24, 2020 at 11:42 am #1187260Any update about the idea of adding custom class on each Milestone? ;-)
I guess it’s not a priority but it shouldn’t be difficult to do.February 24, 2020 at 1:57 pm #1187337Hi,
I will submit to the dev team for you, but each milestone already has a custom ID that allows you to target each one individually like this:#milestone-17 ~ article > .av-milestone-contentbox { background-color: red; }
What are you trying to achieve?
Best regards,
MikeFebruary 24, 2020 at 2:29 pm #1187351Hello Mike
Thank you for your time.Imagine I have 2 or 3 types of milestones/events on my timeline, and each of these types has its own style (background-color, size, fonts, etc.).
it would be convenient to just add a class on a milestone to style it according to the type of event.Of course, I can target each milestone by its unique ID, but that would be nowhere near confortable, I would have to update CSS each time I add an event.
With classes, on the contrary, that would be a breeze (and non-tech end users could do that easily).What do you think of this?
- This reply was modified 4 years, 9 months ago by Crimson-Guard.
February 24, 2020 at 2:38 pm #1187355Hi,
Thanks for the feedback, I understand better now, I have submitted this for the dev team to review and your explanation will help.
Thank you for your patience.Best regards,
MikeFebruary 24, 2020 at 6:17 pm #1187454Great! Thank you Mike
-
AuthorPosts
- You must be logged in to reply to this topic.