You have code in the sidebar, but where and how did you add it? Regardless, there are easier ways to achieve this.
<script>$('html').addClass('cellhome');</script>
You don't need to / shouldn't do this in SugarCube.
- 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.
- SugarCube has an <<addclass>> macro. Using jQuery is fine, this is more of an FYI.
- 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.