How can I style individual passages in Harlowe?

0 votes
asked Jan 13 by jadie_p1 (190 points)
retagged Jan 15 by jadie_p1

Hi,

 

Nearly finished my interactive narrative but there is one thing that would really make the narrative more meaningful. I'd like different passages to have different backgrounds. I've attempted to do this many times in Harlowe and I really don't want to have to change to Sugarcube either. Can someone help me to change the background, please? I'd be eternally grateful! ( If possible, please insert it in my code  with notes, so I understand how it was done. As you can see i'm someone who loves taking notes when coding!)

Many thanks,

Jade

@import url('https://fonts.googleapis.com/css?family=Pangolin|Slabo+27px');

body,  tw-story {
  font-family: 'Pangolin', cursive;
  font-family: 'Slabo 27px', serif;
  font-size: 18px;
  background-image:url("images/background.jpg");
  background-size:cover;
  background-repeat: no-repeat;
}
  

div {

    background-color: black;
	width: 600;
	height: content;
    border: 1px solid white;
    padding: 25px;
    margin: 25px;
	overflow: hidden;
}

h1{
text-align: center;
}

h3{
text-align: center;
}

h4{
text-align: center;
}

h5{
text-align: center;
}

b{ /* Controls the color of the bold font*/
  color: #856478;
}

tw-sidebar { /* This gets rid of the back button */
    display: none;
}

/* COULDN'T GET THIS WORKING USING A TAG AS SUGGESTED!
html.memoryIsFound body {
	background-image: url("images/background2.jpg");
}
*/

tw-passage { /* This controls color the whole passage writing */
  
 	color: #ffffff; 

} 


tw-link { /* This controls the color of the passage links */

	color:#1D8CE8; 
 
} 

a.passage link{ /* This controls the colour of the visited links on mouse hover */
  color: #3F6485;
}

.enchantment-link:hover, tw-link:hover { /* This controls the color of the passage links when the mouse hovers over it */
	color: white;
}

tw-link.visited { /* This controls the colour of the visited links */
 	
	font-style: medium;
	color:#856277;
}




























 

 

1 Answer

+1 vote
answered Jan 13 by greyelf (76,510 points)

Please use the Question Tags to state the name and full version number of the story format you are using, as answers can vary based on this information.

The Basic Harlowe Passage Tag Based Styling thread on the Old Forums Archive (link in sidebar) describes one method for doing what you want, I suggest reading the whole thread if you are using the Harlowe 2.x series as it contains amendments to the original Harlowe 1.x series method.

commented Jan 15 by jadie_p1 (190 points)
edited Jan 15 by jadie_p1
thanks, read it over and after trial and error I managed to get it working!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...