NeatlineSimile width and look

I'd like to have the NeatlineSimile timeline span across the entire screen. Right now it only fills up 2/3rds of the screen. Also, can I change the color of the timeline?

Once again, CSS to the rescue. YOu can override teh default styles for the timeline using a CSS rule, added to your theme's style sheet. This should do the trick:

#neatline #simile {
height: 20%;
width: 100%;
bottom: 0;
right: 0;
}

The default width for the timeline is 70% of the map width, and set off the bottom and right 40px each. If you want the timeline to span the entire width of the map, you'll need to set the width to 100% and make sure that right is set to zero.

OK, I'm confused when you say "your theme's stylesheet". Do you mean I have to edit css file or do I just go to the "styles" tab in my exhibit?

You have to edit the theme's CSS file. The Styles tab in Neatline lets you change the colors and lines of things you draw on the maps. Most other interface elements (popup windows, the timeline, teh width of the map) need to be updated by editing your theme's CSS file.

OK. Would that be the theme I chose in Omeka, like "Berlin" or is that some other theme?

Yes, the theme you chose in Omeka, e.g. Berlin. Whatever theme you have selected for your public site.

OK, I added the code to style.css and it made no difference. Is this not the right file?

That should be the right file. Can you provide a link to your exhibit, so I could investigate a bit more?

OK, nevermind. I don't understand why the theme I'm using is called Seasons, so I change style.css for that theme but then when I looked at the puplic view it shows Berlin theme and when I edited the Berlin style.css it's working. Any reason why it's showing the wrong theme?

OK, never mind again about the theme. Now it's working BUT when I look at the public view vs. admin view of my Neatline exhibit the timeline looks different (doesn't span across the entire screen like it does in the public view). Is that normal?

How do change the opacity of the timeline?

OK, never mind again about the theme. Now it's working BUT when I look at the public view vs. admin view of my Neatline exhibit the timeline looks different (doesn't span across the entire screen like it does in the public view). Is that normal?

Yes, that's normal. Your public theme CSS doesn't affect the admin panel. You could also add something to change this in the admin panel, by either editing the admin theme or the Neatline plugin itself, but I'm not sure it's worth the trouble; You'd have to make this change every time you upgraded Omeka or Neatline. But if you want to do it, just add that same CSS rule to the Neatline's editor CSS, which is plugins/Neatline/views/shared/css/dist/neatline-editor.css

How do change the opacity of the timeline?

More CSS! There are a couple of different ways you can do this. The first, and easiest, would be to use the opacity property. You can try this:

#neatline .widget {
    opacity: 0.5; /* A number between 0 and 1. */
}

The default value for opacity in Neatline's CSS is 0.9. You'll notice that when you change opacity, however, it governs *everything* in the timeline, including text. If you just want the background color to be more transparent, you could to use rgba for the background color. This is a bit trickier here, because SIMILE has several different CSS rules for background colors on its timeline, for whatever reason. Something like this could work, though:

#simile .timeline-band {
    background-color: none; /* Turn off default bg color. */
}

#simile .timeline-ether-bg {
    background-color: rgba(255,255,255,0.5); /* 50% transparent */
}

I've just been trying these things using the Web Developer tools in Firefox. For the most part, any visual or aesthetic change you want to make in Neatline and/or Omeka could be done with CSS, you just need to know what styles are currently governing a given element on the page, what kind of selector you need to use to apply new styles to a given element, and what properties and values you want to use.

I am using Neatlight theme and there is style.css and style.styl
Which file should I be editing? When I add
#neatline #simile {
height: 20%;
width: 100%;
bottom: 0;
right: 0;
}

to style.css it has no effect.
This does work if I use another theme but I want to use Neatlight.
How dio I accomplish this?

OK, how about some help on this problem? :)

Well, there's a lot that could be going on here. Are you using the Neatline Waypoints plugin also? If so, the CSS should look like this:


#neatline.Waypoints.Simile #simile {
height: 20%;
width: 100%;
bottom: 0;
right: 0;
}

No, I am not using waypoints plugin

Where exactly is the style.css file that you're adding the CSS to? I opened up css/payloads/style.css and added


#neatline #simile {
height: 20%;
width: 100%;
bottom: 0;
right: 0;
}

to the bottom of it. That seemed to work fine.

that works fine for me for every theme except Neatlight theme.

I tried
css/payloads/style.css

and

theme/Nightligh/css/style.css

what's style.styl for? I also have that file in css folder.

The style.styl file is used to create the style.css file. Unless you're running grunt watch, though, it won't affect you.

Is the css/payloads/style.css file in the Neatlight directory? The full path, from your Omeka installation, should be themes/Neatlight/css/payloads/style.css.

No, all I have is this:
Omeka/themes/neatlight/css/style.css
I don't have payloads directory in any of the theme directories. For example my Seasons theme has this:
Omeka/themes/seasons/css/style.css

Solved it, had to use
#neatline.WordLines.Simile #simile {
height: 20%;
width: 100%;
bottom: 0;
right: 0;
}

Great!