Timeline not displaying correctly

The icons are cached and will most likely need time to update. It’s stored inside of a transient.

The formatting is going to remain the way it is. If you need to retain formatting you can follow our documentation and enable HTML excerpts. There is no proper way to preserve HTML in excerpts. I will always run into someone who the code doesn’t work for. With the_excerpt function it is predictable and universal across all themes in WordPress.

Thanks,
Evan

Ok, I followed the HTML excerpt instructions and that’s now working. It’s still not preserving newlines, but I suspect that’s a WordPress issue rather than a plugin issue.

The next thing that looks off is that the announcements are being drawn from the outside of the page in, instead of from the inside out. I have my announcement width set to 350px using this CSS code:

.cd-timeline-content {
  width: 350px !important;
}

That’s working fine and the announcement is showing as 350px wide but it looks like this is now being measured from the outside instead of from the inside of the announcement window. The net result of this is that there is a big space now between the vertical timeline and the announcement box – like the announcements are drawn too far away from the centre of the page.

I can compensate for this manually by making the announcement width bigger than 350px but is that the only way around this problem? Can I have the announcements drawn next to the vertical timeline regardless of how wide they are defined?

https://portallas.com/forestium-events-timeline/

– Chris

No, there is no way to adjust the widths from the inside out – due to the way the javascript initializes the timelines and sets them to display absolute.

You can set a max width on the timeline container to adjust things inwards:

#cd-timeline {
   max-width: 822px;
}

Evan

Hmmm. That doesn’t appear to have any effect on how it’s displaying. I tried adding !important but still no change.

I assume that #cd-timeline was a typo for a .cd-timeline?

No, that was not a typo. That is the ID of the element. And it does seem to be working on my end, without the !important tag.

Example:
https://cldup.com/mskF_DG_aE.jpg

Thanks,
Evan

Great. Got it working. I’m now back to what it looked like with the older version.

Some of the font awesome icons are still missing, however. Wouldn’t any caching issues have been resolved by now?

It should have by now. It’s cached for 8 hours. What icons are missing? The ones you listed above?

You can try adding the following to your functions.php file to force clear the transient:

get_transient( 'te_font_awesome_transient' )

But you’ll want to delete it after a page load or two, to re-store the transient in a 12 hour cache.

Evan

Yes, it appears to be the same icons still. Just did another audit and here are the ones that have no icon next to the name in the drop-down:

buysellads
codepie
connectdevelop
credit-card-alt
edge
fort-awesome
mixcloud
modx
pause-circle
pause-circle-o
product-hunt
reddit-alien
scribd
stop-circle
stop-circle-o
usb

I tried adding that code snippet to my theme’s functions.php and re-loaded a few times but it didn’t appear to make any difference.

Weird, I will take a second look. Before I pushed the update I made sure that hose icons were selectable and showing up on the front end. When I can get back on my computer I’ll send over some screenshots of what I can see.

Thanks,
Evan

Weird indeed. Here are some screenshots that I just took to show you what I’m seeing:

1. Shows that the missing icon is actually displaying when viewing the all announcements page:
https://portallas.com/wp-content/uploads/TImeline-express-screenshot-1.png

2. Shows the icon entry is in the pull-down menu but just not displaying:
https://portallas.com/wp-content/uploads/TImeline-express-screenshot-2.png

3. Same thing but with the pull-down open:
https://portallas.com/wp-content/uploads/TImeline-express-screenshot-3.png

4. Same thing but showing that it’s not just the one icon missing:
https://portallas.com/wp-content/uploads/TImeline-express-screenshot-4.png

5. End result – with the ‘fort-awesome’ icon not displaying:
https://portallas.com/wp-content/uploads/TImeline-express-screenshot-5.png

Hi Chris,

Can you check what version of Font Awesome is being loaded? I have a feeling your theme is loading an outdated version of the font-family.

Thanks,
Evan

How do I check that?

You’ll have to look in your browsers developer console.

Similar to diagnosing javascript errors on a page:
https://codex.www.ads-software.com/Using_Your_Browser_to_Diagnose_JavaScript_Errors#Step_3:_Diagnosis

But it’s usually listed under a ‘Resources’ tab. It lists all of the js, css, fonts and images loaded on the page.

That or you can ask the theme developer – or share a link to your site (or the themes sales page or demo site)

Evan

If I’ve done this correctly, it looks like version 4.1.0?

Screenshot

The web-site this is taken from is here.

– Chris