Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Change CSS of one passage in Snowman

I want to change the max-width in a particular passage without changing all the other passages.

I see that I can change every passage with:
#passage { max-width:80% }
...but that's sub-optimal.

Comments

  • One method is to use javascript to add a classname to the body tag and then remove it when you want to change back, and then use a CSS class based selector to do your styling.

    example: Create three passages named First Passage, Second Passage, and Third Passage:
    (note: using TWEE notation. you can name the class whatever you like I am using someclass)

    :: First Passage
    This is the first passage.
    [[Second Passage|Second]]

    :: Second Passage
    <% $(document.body).addClass('someclass') %>
    This is the second passage.
    [[Third Passage]]

    :: Third Passage
    <% $(document.body).removeClass('someclass') %>
    This is the third passage
    Then use a CSS selector based on the class name to do whatever you want to the passage, Im just going to change the background colour.

    body.someclass {
    background-color: grey;
    }
  • Thanks. That does what I asked, but not quite what I needed. :(
    Fortunately it was close enough that I could figure out the rest myself. :)

    Apparently text width is determined by a div with ID "passage." So what I really wanted was to expand the width of that div. Adding a class to that div through a method similar to what you describe generally works, but didn't work for width in particular. I guess it won't override something that's been set elsewhere.

    What eventually worked was:
    <% document.getElementById('passage').style.maxWidth = '80%' %>
    to widen the div and:
    <% document.getElementById('passage').style.maxWidth = '38em'; %>
    to return it to its default.
  • Changing my above CSS to the following should do what:

    body.someclass #passage {
    max-width: 80%;
    }
    The reason for adding the classname to the body tag is so you can also reference tags that are decedents of it. (like the #passage div)
Sign In or Register to comment.