›

Howdy, Stranger!

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

Sign In Register

Categories

Hover Image Replace, Positioning Images Precisely and Switching Fonts Mid Passage

MeggyMeggy
in Help! with 1.x
Hi guys! I'm afraid I'm quite new to Twine like many others on this forum. I've been having some problems and I thought I'd reach out here to see if anyone has some custom macros or guidance. I'm using Twine1.4.2 and Sugarcane.

1. Hover Image Replace - I've been using the custom hoverreplace macro from Glorious Trainwrecks (http://www.glorioustrainwrecks.com/node/5462) to try to swap out my images from a standard to a highlighted version but it wasn't meant for this so it results in creating both versions of the image side by side on hover for a few seconds before eventually hiding the standard version. I was wondering if anyone else had come up with a better solution to creating image changes for mousehover?

2. Positioning Images Precisely - This seems like it should be easy to do but I'm struggling to find a way to position images precisely within a passage without just using the 'left</right>/center' commands, or changing the passage dimensions. Can I do this through a custom, passage specific stylesheet or something?

3. Switching Fonts Mid Passage - Is there a custom macro for changing fonts mid passage? Can I do this in a passage specific stylesheet or something?

Thanks in advance!

Comments

  • greyelfgreyelf
    3. Switching Fonts Mid Passage - Is there a custom macro for changing fonts mid passage? Can I do this in a passage specific stylesheet or something?
    The Inline styling section of syntax page on Twine wiki explains one method of adding styling to spans of passage text. You can either create a CSS class rule and reference that or hard-wire it manually, I would suggest using a CSS class.

    a. Setup the CSS class in your stories stylesheet tagged passage, what you name the class is up to you but I am going to name the example newspaper. 
    .newspaper {
	font-family: courier;
}
    b. Style the text in your passage: 
    @

This test should not be courier.
  • MeggyMeggy
    Thanks so much, this helps a LOT!
  • greyelfgreyelf
    2. Positioning Images Precisely
    You can use CSS to position a HTML element (like an image) on a screen by using CSS positioning attributes like position/top/bottom/left/right etc.

    One thing that can confuse people learning CSS is how the position attribute works based on the relationship between the two elements involved. Those two elements being:
    a. The element being positioned. (the child)
    b. The element the child is being positioned on. (the ancestor. Parent, Grandparent, etc..)

    A Child element with a position of absolute will be place relative to it's closest ancestor with a position of relative and if no ancestor has this value (the default is static) then it will be positioned relative to the html element.
    If you need an image to understand this then this old article may help.
Sign In or Register to comment.