Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Change Time Line Color #842

Open
cdelv opened this issue Nov 11, 2023 · 0 comments
Open

Change Time Line Color #842

cdelv opened this issue Nov 11, 2023 · 0 comments

Comments

@cdelv
Copy link

cdelv commented Nov 11, 2023

I have made this timeline:
enter image description here

The timeline looks great except for the timeline itself. I would love to change the color of the timeline. Also, note that the timeline is divided into 3. This is due to the group label in each event, but is very difficult to distinguish the groups.

My events look like this:

{
                "media": {
                    "url": "https://www.youtube.com/watch?v=6Qy5oY-aRDI",
                    "caption": "",
                    "credit": "",
                    "thumbnail": "https://educahistoria.com/wp-content/uploads/2023/04/DaMarkusWolf_cold_war_clash_cinematic_with_the_clash_of_the_sov_d9c0925d-ad54-4775-ac0a-99394cbf49cb-980x565.png"
                }

                ,
                "start_date": {
                    "month": "10",
                    "day": "30",
                    "year": "1962"
                }

                ,
                "end_date": {
                    "month": "10",
                    "day": "30",
                    "year": "1962"
                }

                ,
                "text": {
                    "headline": "Inicio de la distensi\u00f3n",
                    "text": "<strong>Guerra Fr\u00eda</strong>, <strong>Comunismo Internacional</strong>, <strong>Inteligencia Militar</strong><p>El periodo de distensi\u00f3n entre la Uni\u00f3n Sovi\u00e9tica (URSS) y Estados Unidos (EEUU) se trato de unos a\u00f1os de relativa relajaci\u00f3n de las tensiones y la hostilidad que caracterizaron gran parte de la Guerra Fr\u00eda, al menos entre las dos potencias. En este periodo hubo una serie de acuerdos y acontecimientos que llevaron a una disminuci\u00f3n de la confrontaci\u00f3n militar y pol\u00edtica entre las dos superpotencias como la pol\u00edtica de \"coexistencia pac\u00edfica\" promovida por los l\u00edderes sovi\u00e9ticos.    </p><a href='https://humanidades.com/distension-en-la-guerra-fria-1962-1975/' target='_blank'>Para saber m\u00e1s</a>"
                }

                ,
                "group": "Escala Internacional",
                "background": {
                    "url": "https://educahistoria.com/wp-content/uploads/2023/04/DaMarkusWolf_cold_war_clash_cinematic_with_the_clash_of_the_sov_d9c0925d-ad54-4775-ac0a-99394cbf49cb-980x565.png",
                    "color": "#2d2d2d"
                }
            }

My HTML looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timeline Example</title>
    <!-- Link to the Timeline.js library -->
    <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
    <!-- 2 -->
    <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
    <div id='timeline-embed' style="width: 100%; height: 700px"></div>
    <style></style>

<body>
    <script type="text/javascript">
    var timeline_json = {....};
    window.timeline = new TL.Timeline('timeline-embed', timeline_json);
    </script>
</body>

</html>

After reading the documentation and scrolling through the endless CSS file of the package, I failed to change the color of the timeline. The way I tried to do it was to add a <style></style> (not shown above) in the head of the website. I also tried to google this without much success.

I would appreciate it if someone could help me add a different color to each group, or at least change the color of the timeline.

Thank you.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@cdelv