Modifying Neatline Time Display

Hi folks,

I want to change the size of the Neatline Time display. From searching around on the github pages it looks like views/shared/css/neatlinetime-timeline.css might be the file to change. Is that correct? I can see how it might change the height but what about the width on the page?

This might seem like a silly queston but if I am to change that file what is the best way to do so?

I am hosting my site on an Amazon AWS instance. Should I take the stop the http and sql servers first, change and then restart? Is there something else I need to do?

I know that server management is beyond the scope of omeka but i would appreciate it if anyone could offer an answer.

Hi,

This doesn't seem silly at all. I think this is probably something that a lot of people will need to do.

Generally, this should handled by or changed in your theme. I wouldn't suggest changing the CSS file in the plugin itself, since that will make upgrading the plugin much more difficult. Upgrading themes will be something you'll do much less often, and you're probably already customizing it anyway.

So here's how I'd do this. Say you're using the default theme:

1. Add a line to common/header.php. Look for the line that says queue_css('style'); and add a new line right under it that says queue_css('nltime-local');.
2. Now, create that file. in css/nltime-local.css, have some lines that look like this:
   

   .neatlinetime-timeline {
       height: 100px;
       width: 100px;
   }

   This will set the height and width to 100 pixels. You almost certainly do not want this. But you can put whatever values you want in there. The .neatlinetime-timeline part is what's important.

That should take care of it. You shouldn't need to restart any servers.

Sorry we didn't see this until just this week. I guess with the holidays and all, we haven't been paying as close of attention as we should.

Thanks,
Eric

Sorry to be bumping an old thread but after a project being on hiatus I have returned to this.

I had a go at following Erochest's solution but end up with a blank page.

Is this because my nltime-local.css file just contains the lines mentioned above?

Also is it possible to include a slider bar on the bottom of the timeline?

If it is of any help my timeline can be seen on http://deevy.nuim.ie/neatline-time/timelines/show/1

This would be easier to troubleshoot if you could share the broken timeline (the link you shared displays a functioning timeline for me, so I assume it does not include your custom CSS?)

I will say, however, that no matter how many !importants I include, I could not get my custom CSS to override the height specified in neatline-timeline.css

In addition to .neatline-timeline, I tried .neatline-timeline .timeline-container
.timeline-container
and
#my-timeline-id

With and without !important declarations, individually and all at once.

I know my custom CSS is loading, because other styling options (my timelines are blue, rather than purple; I suppress all non-timeline content so that it's easy to embed as an iframe) come through just fine.

Hi Sheepeeh.

thanks for the reply. I have posted the non working html page code here: http://filebin.ca/1F22Q8zantcv

From looking at the source I can see that the nltime-local.css file I created doesn't have half enough in it. [It basically just contain the lines erochest spelled out above].

There seem to be some issues witht he standard NeatlineTime display using the Seasons theme. As you can see here:
http://deevy.nuim.ie/neatline-time/timelines/show/1
The timeline spans the width of the entire page. The months are also partially obscured. This is using the default settings.
The preview from the admin page displays correctly however - https://www.dropbox.com/s/gcfcdctuxaetuv1/admin_preview.png

You don't need to have everything in your local stylesheet, just what you need to change (except that doesn't seem to be working for size).

Unfortunately, I can't view dropbox at work and the filebin link is showing up blank (probably also due to work filters).

Your timeline is spanning the entire page because of overflow: visible; at line 528-ish (under #content) in style.css. While not exactly best practice, you can overcome that particular problem with


.timeline-container {
overflow: hidden !important;
}


in your local stylesheet. (This worked when I tested it in the browser.) Unfortunately you have a lot of overflow content (this is probably what's obscuring the months, too). I'm not entirely sure what's causing that, but I can tell you that your timeline fonts are much larger than mine. If resizing were working, you could fix it by increasing the height of the timeline.

Thanks again for coming back to me.

The filebin link will look blank - if you view the source you can see what I was talking about.

I have posted the admin view of the timeline up here: http://padraic.org/admin_preview.png

I'll take a look at the #content section of the css file asap - thanks again!

When I view the source, I only see 12 lines of code.

Re: The admin view, it probably works fine because the admin theme uses smaller fonts. Although Neatline itself *tries* to.

What browser do you use? If you use Firefox or Chrome, you can right click on the timeline and select "Inspect Elements," which will bring up a box at the bottom of the screen where you can mess around with the HTML and CSS. If you do that for the major DIVs in the Timeline code, you can see the areas where #content is overriding the Neatline CSS with regards to font-size and (perhaps more importantly) padding. When I made the .timeline-container hide overflow, and started eliminating the padding/font-size conflicts, things started to look more normal.

https://raw.github.com/sheepeeh/snippets/master/omeka/forum-images/teresa-timeline.PNG

How embarassing.. please disregard my comment of 3 days ago about resizing not working. I was using the wrong class!

.neatlinetime-timeline works just fine