Ask a Question

CSS problems in sugarcube...

0 votes
by (2.9k points)
edited by

 

Hi, I'm trying to use CSS to make the header on one of my passages a certain color.

Here is the code that I thought would work but didn't,

}
header.head {
 background-color: grey;
 background-attachment: fixed; 
 background-repeat: no-repeat;
 background-size: cover; 
  
}

Thanks in advance

EDIT

I'm having problems with changing to color of a link.

This is the CSS

.head a { color :rgb (0, 64, 0) ; }
<<timed 100ms>><<replace "#story-title">><span class="head">[[Home<-Mega Servers]]</span><</replace>><</timed>>

And that is the code, the reason its so long is because I am trying to make the Story title into a link.

2 Answers

0 votes
by (159k points)
edited by

> trying to use CSS to make the header on one of my passages a certain color.

You don't state if you are trying to style:
a. the content of the #title ID'ed HTML header element contained within the default Left Side-bar.
b. the content of a PassageHeader special passage.

I will assume that you are trying to doing the first thing, and would suggest changing the CSS within your Story Stylesheet area to target the element's ID instead of it's type.

You also don't state how you are indicating which passage you want to apply the styling to, I will assume that you are assigning that passage a head passage tag.

If you use the Web Developer Tools of your web-browser to Inspect the HTML structure of the passage you have assigned the head passage tag to you will see that tag appears within a number of places.
(note: the following HTML structure has been simplified)

<html data-tags="head">
  ...
  <body data-tags="head" class="head">
    <div id="ui-bar">
	  ...
	  <div id="ui-bar-body">
	    <header id="title" role="banner">The title of the Story.</header>
		...
	  </div>
	</div>
    <div id="story" role="main">
	  <div id="passages">
	    <div id="passage-start" data-passage="Start" data-tags="head" class="passage head">
		  ...
		</div>
	  </div>
	</div>
  </body>
</html>

...it appears within:
a. the data-tags attribute of the html and body elements, and of the .passage classed element.
b. the class attribute of the body element and of the .passage classed element.

In your specific use-case I would suggest targeting the #title element when it's (great-grand) parent body element's data-tags attibute contains "head". The CSS rule to do that would look something like the following.

body[data-tags~="head"] #title {
	background-color: grey;
}


> I'm having problems with changing to color of a link.

If you Inspect the HTML structure of the #story-title element after your <<replace>> macro has been executed you will see that it looks somthing like the following.

<h1 id="story-title">
  <span class="head">
    <a data-passage="Home" class="link-broken" tabindex="0">Mega Servers</a>
  </span>
</h1>

... and to direct target the a (anchor) element of the above structure I would use a CSS selector like the following.

#story-title .head a {
	color: rgb(0, 64, 0);
}

warning: adding extra space characters into your CSS (like the one you have between the rbr function name and it's argument list) can cause it to become invalid.

NOTE:The method you are using to replace the default Story Title with a new link based one can result in the end-user briefly seeing the default one before the new one is shown.

0 votes
by (44.7k points)
edited by

I'm not quite clear what you mean by a "header", since that could mean a few things, but you could use this CSS:

.grey {
 background-color: grey;
}

then just wrap your "header" text inside a <div> with that class like this:

<div class="grey">Your text here.
This will all have a grey background.</div>

As for turning the story title into a link with a special color, there may be a better way to do it, but this works:

<<timed 100ms>>
	<<run $("#story-title").wrapInner('<a style="color: green" href="javascript:SugarCube.Engine.play(\'Test\')"></a>')>>
<</timed>>

Just put that code at the bottom of your starting passage and it should change the story title to a green link to the "Home" passage for the rest of the game.  It uses the jQuery .wrapInner() function to put the link around the story title.

Hope that helps!  :-)

Snow Theme by Q2A Market
Powered by Question2Answer
...