Own CSS in WordPress

you are not using the timeline plugin to instantiate your timeline in your page; you’re using an iframe. That means anything you might do to CSS in the host page is not visible to the timeline.

Users of iframe embeds can pass a CSS URL through using the ‘theme’ parameter — see https://timeline.knightlab.com/docs/overriding-styles.html for more about that. Alternatively, use the plugin/shortcode so that your timeline is instantiated directly in the page on your site; in that case, CSS should affect it — there’s more about that in the link above; it is, admittedly, not extremely user-friendly, but it should be doable.

(coincidentally, I am listening to Pink Floyd’s “Animals” right now, which has a Hipgnosis album cover)

Thanks @nuknightlab for the answer!
Unfortunately all my tries to influence the css were unsuccessful. I add the ‘theme’ parameter to the iframe (if syntax is correct: theme=’path/to/my/styles.css’). Also i tried to add the styles direct to the page, in iframe. The same. More ideas?

(If you like Pink Floyd, you can find many interesting things on our page. It has also english translation. ??
Thank you in advance!

• This reply was modified 4 years, 3 months ago by moraversio.

It looks as though you did not leave the ‘theme’ parameter on the page you shared before — I’m finding the iframe src URL to be
https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1negtSiLRKM3lVnoIOQk113y6qDLOp3sidpV5HIPU7aI&font=Default&lang=en&initial_zoom=2&height=650

perhaps you added an attribute named theme to the iframe tag? The path is actually to add a theme parameter to the src URL.

Here’s an example of a URL which shows your timeline, but uses the “dark” timeline theme, which is mostly visible in the styling of the navigation area:

https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1negtSiLRKM3lVnoIOQk113y6qDLOp3sidpV5HIPU7aI&font=Default&lang=en&initial_zoom=2&height=650&theme=https://cdn.knightlab.com/libs/timeline3/latest/css/themes/timeline.theme.dark.css

Another possible misinterpretation would be if you used a relative path to your CSS file (eg path/to/my/styles.css) — the path needs to be a fully qualified URL, since, when using iframe embeds, a relative URL would be interpreted as relative to cdn.knightlab.com, where you wouldn’t be able to put your theme CSS file.

does that help?

Hello @nuknightlab,
Thank you, syntax was my Problem! Now it works.

excellent, that’s great to hear!