Creating new images for each passage ("The Earth's Story Illustrated" stylesheet)

Comments

• greyelf

  May 2015

  When using Sugarcane the Passage Tags of a passage being viewed are added as a data-tags attribute to both the body and #passage elements.
  
  To do what you want you need to add CSS rules like the following to the end of your current stylesheet:
  
  note: I am marking my passages with either a plain or a forest tag, you can name your tags whatever you like

  /* rule for passages tagged plain */
  .passage[data-tags~="plain"] .header {
  	background-image: [img[rollingplains]];
  }
  
  /* rule for passages tagged forest */
  .passage[data-tags~="forest"] .header {
  	background-image: [img[deepforrest]];
  }
  

  
  So your example should be:

  /* rule for passages tagged classroom */
  .passage[data-tags~="classroom"] .header {
  	background-image: [img[classroom]];
  }
  
• Eucrowe

  May 2015

  Thanks for your response! Unfortunately, I still can't get it to work... I'll try and explain a little test and hopefully you can tell me what I'm missing.
  
  So, in a Stylesheet I have this... (The Earth's Story Illustrated) + the format of your suggestions at the bottom.
  
  #sidebar {
  display:none;
  }
  body {
  margin: 0;
  padding: 0;
  height:100%;
  }
  #passages {
  margin:0;
  padding: 0;
  height:100%;
  }
  #passages * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  }
  .passage {
  position:relative;
  width: 60%;
  font-size:2em;
  font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
  margin: 2em auto 0 auto;
  }
  .passage .header {
  width:100%;
  height:480px;
  min-height: 480px;
  border: #fff double 0.5em;
  border-radius: 1em;
  margin: 0 auto 1.5em auto;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  }
  .passage .content {
  top: 500px;
  width:100%;
  border: #fff double 0.5em;
  border-radius: 1em;
  padding: 1em;
  }
  a.internalLink, a.externalLink {
  border-bottom: solid #fff 1px;
  color:#eee;
  font-weight:normal;
  }
  a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: none;
  color:#000;
  background-color:#fff;
  font-weight:normal;
  padding-left: 0;
  }
  a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
  }
  @media screen and (max-width: 960px) {
  .passage {
  font-size: 1.5em;
  width: 75%;
  }
  }
  @media screen and (max-width: 640px) {
  .passage {
  font-size: 1.25em;
  width: 95%;
  }
  }
  .passage[data-tags~="location1"] .header {
  background-image: [img[hugemountains]];
  }
  .passage[data-tags~="location2"] .header {
  background-image: [img[grimswamps]];
  }
  
  
  
  
  So then in the Start passage, there is simply a Begin link to - location1 passage.
  
  In location1 passage it says 'Hi, welcome to the mountains.' with a link Let's visit the swamps
  
  In location2 passage it says 'You're at the swamps'.
  
  
  This is all just to test, but no images are coming up on either. Am I missing something? Probably Really appreciate your help!
  
  
• greyelf

  May 2015

  A passage consists of three parts, the title, the tags and the content.
  
  The method I described above works by assigning a tag to a passage and then using that tag within your CSS, the reason people normally use tags to control CSS instead of title is because you can assign the same tag to multiple passages but a title has to be unique for each passage.
  
  But if you really need to do your CSS based on the passage title then what you need to do is change the CSS selectors to use the ID of the passage, which in Sugarcane is the passage title with the word "passage" added to the start of it:

  Passage Title		ID
  -------------		-----------
  location1		passagelocation1
  location2		passagelocation2
  Some Other Title	passageSome Other Title
  

  
  So your example CSS would look like the following:

  .passage[id="passagelocation1"] .header {
  	background-image: [img[hugemountains]];
  }
  .passage[id="passagelocation2"] .header {
  	background-image: [img[grimswamps]];
  }
  
• Eucrowe

  May 2015

  Thanks so much for your patience and clear explanation! It all works great! Cheers!