JoeGermuska

This must be something specific to your installation. Perhaps some piece of CSS that isn’t properly encapsulated and is being impacted by a rule on the containing page.

Can you send a link to a page showing the problem, so we can look more closely?

(Sorry for the slow response. Our preferred support channel is knightlab.zendesk.com)

It is, admittedly, a little involved. Remember, you could simply choose a different font-family which doesn’t apply the ‘uppercase’ transformation. But if that doesn’t satisfy…

The typography is loaded from font-choice-specific CSS files which are generated with a LESS compiler. The base files are at https://github.com/NUKnightLab/TimelineJS3/tree/master/source/less/fonts

If you don’t want to set up to do the compilation, you can edit the files directly. As the name suggests, by default, the one you would want to edit is …/css/fonts/font.default.css

Yes, as a minimized file, it is hard to edit. Use a CSS formatter like https://www.cleancss.com/css-beautify/ to replace the minimized contents of the file with technically equivalent CSS rules that are easier to edit.

Also, rather than ‘lowercase’ you probably want ‘none’, at least, if you want ‘a.C.’ (lowercase would get ‘a.c.’)

Hopefully this helps.

The capitalization of the “era labels” is governed by the font choice you make. Timeline’s inventor made design choices for some font sets that using the CSS “text-transform: uppercase” made for the best presentation.

If you don’t want it capitalized, you can either choose different fonts or override the rule for

.tl-timeline .tl-timenav-slider .tl-timeaxis {
...
text-transform: uppercase;
...
}

A crude test suggests that these font sets don’t use the uppercase transformation:

abril-droidsans
amatic-andika
bevan-pontanosans
bitter-raleway
clicker-garamond
dancing-ledger
fjalla-average
georgia-helvetica
knightlab
lustria-lato
medula-lato
opensans-gentiumbook
playfair
playfair-faunaone
pt
roboto-megrim
rufina-sintony
ubuntu

but you should try them to be sure.

It’s difficult to point to the location in the Timeline Font CSS where this rule is implemented because of the minification, but the pre-compilation line that is the specific reason you’re seeing it in uppercase is

https://github.com/NUKnightLab/TimelineJS3/blob/master/source/less/fonts/font.pt.less#L32

I hope this helps. We will also be updating the Italian translation to use ‘a.C.’ as the prefix based on your information, in the next incremental update for TimelineJS.

Please send details (especially a link to the spreadsheet you’re working with) to our support desk ([email protected] or https://knightlab.zendesk.com) so that we can be sure to keep up with your request for help.

Regarding your issue about the plugin “not seeming to work,” can you be more specific? I just used it on an install of WP 4.7.2 using version 3.4.0 of the plugin and everything worked as expected. I used this spreadsheet URL:
https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml

I clicked on the “Add timeline” button, pasted the above URL in the “data source” field, and clicked “Insert Timeline”. I then previewed the WP post, and the timeline appeared.

I then did the same with a brand new copy of the spreadsheet template. Thus, as far as we can tell, there is nothing not working. If you can clarify with information from your browser’s console or other tips, perhaps we could be of more help.

Note that for many WordPress configurations, iframe markup will not be permitted, or may be permitted based on the permissions for some user roles, but would be at risk of being stripped out by WordPress’s HTML filtering for user roles which don’t have the unfiltered_html capability.

Great, happy to hear that it’s working!

@mrzpro there seems to be a login required to see your first example.

Generally, we ask that people who need help with Knight Lab tools use our official support site, which we are much better able to monitor: see https://knightlab.zendesk.com/hc/en-us/requests/new or email [email protected]

Canton:

You should be able to use short code parameters matching the option names for everything, or just about everything. try just adding that into your shortcode and report back if I’m wrong!

As noted above, please submit these questions to our Zendesk support site, and include a URL for your Google Spreadsheet.

In general, and especially for questions which are not specific to the WordPress plugin, we prefer to handle support via knightlab.zendesk.com or email to [email protected] — please be sure to include a link to the Google spreadsheet you are using, and if at all possible, to a web page showing the Timeline “in action.”

When you use the WordPress plugin, the “instantiating in the page” part is just how it works. We could make the docs more clear, but it happends to be true.

So all you need to do is create CSS which correctly changes the style and load it in your page.

You can specify the background using the ‘background’ column of the Google Spreadsheet — see https://timeline.knightlab.com/docs/using-spreadsheets.html#slide_background

We do not support changing the text color, because we feel that makes configuration needlessly complex. When you set a non-white background, black text is styled with a light white border so that it is offset from any dark background. If you do want to change the text color, you can do this with CSS, although it does make everything somewhat more complicated. More information about customizing Timeline CSS is at https://timeline.knightlab.com/docs/overriding-styles.html

No reason to apologize — we should have accurate documentation for people who want to use PHP code directly too!

Support questions like this are really better directed to knightlab.zendesk.com.

I think that the documentation in our plugin is slightly inaccurate. If you just recently made the spreadsheet, you must include version='timeline3' in your shortcode. If you use the UI, that gets entered automatically, but we couldn’t make it the default without potentially affecting timelines created with the previous version of TimelineJS and the corresponding plugin.

If that doesn’t solve your issue, then either here or at knightlab.zendesk.com, can you provide the URL to the spreadsheet you are using?

I’m not sure what you’re hoping to do with the ‘id’ and ‘name’ attributes in the shortcode, but neither are things which the TimelineJS WordPress plugin knows anything about.

At a minimum, each [timeline] shortcode needs a src attribute which has either the URL to a Google Spreadsheet or a TimelineJS JSON file or at least the “id” part of a Google Spreadsheet. (If you don’t know what that is, just use the full URL)