Howdy, Stranger!

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

Change every passage's background image with Jonah

edited December 2015 in Help! with 1.x
Hi, I've spent a handful of hours scouring the forum/web to no avail. I hope someone can help me! I'm not very experienced with CSS.
I'm using Twine 1.4.2 and a story format called Journal, an edited version of Jonah. I'm trying to have each passage look like its own frame on a 35mm film roll.
153d4f3444.jpg
I would really like to have unique background images for each passage with the text overlaid on top.
I know how to give passages their own background images with Sugarcane using tagged stylesheets, but it seems like Jonah/Journal doesn't make use of tagged stylesheets... Or maybe I just can't modify each passage's attributes?

If it helps, here is my stylesheet:
body {
  margin: 10px;
  padding: 10px;
  height:100%;
}
#floater {
	border-left: 1px solid #fff;
	border-bottom: 2px solid #000;
	font-size: 1.1em;
	padding: 0 20px;
	text-align: center;
	line-height: 100%;
}
#floater ul {
	text-align: left;
}
#floater a {
	color: #fff;
	cursor:pointer;
	font-weight: bold;
	text-decoration: none;
}
#floater a:hover {
	color: #fff;
	text-decoration: underline;
}
.title {
  color: #fff;
  font-family: Greenscr;
  font-size:1.8em;
}
.passage{
  margin:0;
  padding: 25px;
  position:relative;
  height:350px;
  width: 500px;
  font-size:1.5em;
  font-family: Greenscr;
  text-shadow: 2px 2px #999;
  color: #fff;
  letter-spacing: 0.1em;
  margin:  0 auto;
  border-style: solid;
border-width: 34px 0px;
-moz-border-image: url(https://dl.dropboxusercontent.com/u/18769618/Projects/499personalgame/filmborder.png) 50 0 round;
-webkit-border-image: url(https://dl.dropboxusercontent.com/u/18769618/Projects/499personalgame/filmborder.png) 50 0 round;
-o-border-image: url(https://dl.dropboxusercontent.com/u/18769618/Projects/499personalgame/filmborder.png) 50 0 round;
border-image: url(https://dl.dropboxusercontent.com/u/18769618/Projects/499personalgame/filmborder.png) 50 0 round;
background-image: url(https://dl.dropboxusercontent.com/u/18769618/Projects/499personalgame/background.png);
background-position: center;
}
a.internalLink, a.externalLink {
  border-bottom: solid #fff 2px;
  color:#fff;
  font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: none;
  color:#fff;
  font-weight:normal;
  padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
}
a:hover{ background:url(https://dl.dropboxusercontent.com/u/18769618/rainbowjam/link-hover-gray-blink.gif); 
}

Thanks so much!

Comments

  • I looked at your example CSS and the Journal story format and found the following:

    1. The version of the Wikifier used by Journal does not seem to support using TAB characters for indentation in CSS, you need to replace them with space characters in your #floater related selectors.

    2. There does not appear to be a ul child element in the #floater element, so the #floater ul does nothing.

    3. The color (font-weight and text-decoration) attribute(s) of your #floater a selector is being overwritten by the in-built #floater a:link and #floater a:visited selectors, if you want the color to change there you will need to use the same #floater a:link and #floater a:visited selectors.

    4. It is a good idea to use quotes (single or double) in a CSS url.

    5. The div element wrapping each Passage that is displayed is assigned an ID based on it's Passage Title, the ID consists of the word "passage" joined with the Passage's Title.

    eg. If you had two passages: Start and Frame 2 then the Start passage's ID is "passageStart" and Frame 2's ID would be "passageFrame 2"

    The following CSS selector would style a passage with the title of Frame 2
    #passages div[id="passageFrame 2"] {
      color: red;
    }
    
  • Gosh, thank you so much--I never would have figured out any of those! Everything is fixed and accounted for. :)
Sign In or Register to comment.