0 votes
by (190 points)
retagged by

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
by (159k 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.

by (190 points)
edited by
thanks, read it over and after trial and error I managed to get it working!
...