vertical-timeline | Responsive , jQuery-based vertical timeline generator | Plugin library

In the contentStyle object, color: '#fff' sets the text color to white. To make the text color black, just change the value #fff to a CSS color meaning black, such as #000 or black:

Careful using that class, as it may change on your next build.

First check if they have any colour prop in their API. If not, check if passing in a “className” will stick. If not, use a more complex css selector like ‘div > div:nth-of-type > ...’

You have to install react-fontawesome package.

Try using React hooks. Already forgot the old way.

Your popovers are all anchored to the same element (this.state.anchorEl) and are all configured to open based upon the same boolean (this.state.popped). This means if you have 2+ objects in your timeline, you render a popover for each object, and all popovers will be opened or closed together and all will be to the left/right of the only anchor element (whatever that is).

You should probably create a new TimelineObject component that renders a single timeline object and can have its own local state and assigns its own local anchorEl to anchor its popover to. Possibly its own popped state as well. Then your map function would be more like:

timelineObjects.map((card, i) => )

Alternatively, instead of using this.state.popped as a boolean, use it as the card index to show the popup for. And in your Popover code do:

i have answer ! I forget in header.php file

Iterate through parent blocks using .each, and check if its child paragraph element has any content, if so leave it, if no content within child paragraph elements, hide it.

Kinda hard to really pinpoint what your issues are with no code offered by you for inspection, but....

You'll really need to use your browser's inspect/page-debug functions on your page to see how both the bootstrap stylesheet and the vertical timeline's stylesheet are doing things to your page.

Bootstrap has it's own default color scheme, you can easily change it by just looking for the corresponding bootstrap elements and then overriding them in your custom stylesheet

If you're linking to three different styles sheets (boostrap, timeline, and your custom one), there can obviously be a conflict right there. Let's say on boostrap it's doing one thing to the nav bar and the top spacing, while your custom css is doing another thing and affect bottom spaces - see what I mean? You should really inspect those css files to see what they are affecting exactly.

Also, is the vertical timeline plugin you are using based on bootstrap 4? If it's built around bootstrap 3 that could be another issue as well. BS4 is still relatively new and many plugins that were based on BS3 may require further alteration.

Assuming you are using jQuery, you can attach a event like this