Compatibility issue with individual exhibit theme

[hcgriggs]

Hi,

I am using NeatlineText on a customized theme I forked from Neatlight. I am creating an exhibit connecting events and neighborhoods on a map; I want users to be able click on a specific neighborhood in the text area and then have it highlight/zoom on the map itself.

I enabled NeatlineText, and while it works fine, there is a large margin to the right of the map. It also makes the text area much wider.
This is what the exhibit looks like normally, without NeatlineText enabled

And this is what it looks like with NeatlineText enabled:

Is this an easy fix in CSS? I have been toggling various classes to no avail. (I tried editing the margins in the #Neatline.text class, but it didn't work. I appreciate any help!

Thank you.

[davidmcclure]

Hey @hcgriggs,

My memory is a bit fuzzy about this, but I bet that's because the styles for the Neatline Text plugin set the width of the #neatline-narrative element to 35%:

https://github.com/scholarslab/nl-widget-Text/blob/master/views/shared/css/stylus/narrative.styl#L39

You should be able to just override this in the theme CSS, though, since it's the last stylesheet that gets loaded. Are you working with the starter theme? If so, and you've got the build system up and running, you should be able to just edit the width of that div in the narrative.styl file:

https://github.com/hcgriggs/neatline-theme-template/blob/master/assets/stylesheets/narrative.styl

Which should override the styles in the NeatlineText plugin. Let me know if this works.

[hcgriggs]

Thanks, @davidmcclure.

Yes, I am using the starter theme. I set up grunt watch and opened narrative.styl. I then added the following code:

div#neatline-narrative
width 0

However, it did not change anything, and it seems to have overridden any CSS I edited in the style.css file. I've played around with it but it still doesn't change. Did I change the wrong class, or change the wrong file?

Thank you for your help. I'm relatively new to this!

Edit: I think I figured it out. You not only have to change the width in div#neatline-narrative but also in div#neatline-map. It was overriding my CSS because I originally edited style.css, not the .styl files.