+2 votes
by (250 points)

During my story, I want to have the image in the sidebar change. I found an old post on the forums about doing this in Harlowe, but I can't seem to get it to work. A little help?

Oh, and I know the problem is not that the image link is wrong; when I was just changing the background image in CSS, it showed up fine, but now that I'm trying some new code(as this code will let me change the sidebar's background image over time) the image won't appear. So yeah, it's not my image link.

In CSS, I'm putting this code:

html.cellhome #ui-bar {
    background-image: url('https://lh6.googleusercontent.com/JcV_HmV_ns77ODnhH0Py6mYO1BK1JLz75dD2k1VWTae2yAevPP_bh_g8RQnR7zKTxLTOpYxmJ2FzmFk=w1279-h668');
    width: 15em

In the sidebar, I have this code:


(Right now, I'm just trying to get the image to show up using this code before I start attempting to change to different images, but it's not working-- I just get a black screen.)

1 Answer

+3 votes
by (63.1k points)
selected by
Best answer

You have code in the sidebar, but where and how did you add it? Regardless, there are easier ways to achieve this. 



You don't need to / shouldn't do this in SugarCube.

  1. You should generally use the <<script>> or <<run>> macros for in-passage JavaScript, as <script> tags will exist outside SugarCube's scope.  Generally, only use script tags when you're certain you need to. 
  2. SugarCube has an <<addclass>> macro.  Using jQuery is fine, this is more of an FYI.
  3. A better way to handle this is likely through passage tags, which are automatically added as classes on the <body> element in SugarCube.

If you go with tags, you can use the tag 'cellhome' on any passage you want to change the UI bar image in.  Then you can handle everything else via pure CSS:

body.cellhome #ui-bar {
    background-image: url('https://lh6.googleusercontent.com/JcV_HmV_ns77ODnhH0Py6mYO1BK1JLz75dD2k1VWTae2yAevPP_bh_g8RQnR7zKTxLTOpYxmJ2FzmFk=w1279-h668');
    background-repeat: no-repeat;
    width: 15em

If tags aren't appealing to you for some reason, you can instead use the <<addclass>> macro (either on body or directly on the #ui-bar element) and place it in your PassageDone special passage, maybe with some conditions.

Edit: I don't have access to whatever image you linked above, and had to test this using another image. If I can't access the image, others won't be able to either, even from your code. The images you use generally need to be publicly available. 

by (250 points)
Based on your answer, I used <<script>> instead and it looks like it's working great. Thanks!