›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

Sidebar elements order (Sugarcube 2.11.0)

Jud_CasperJud_Casper
edited November 2016 in Help! with 2.0
I'm playing around with a sidebar inventory system using simple (if true then print) macros, but whatever I name the sidebar passage for the inventory system, it places it at the top above all the other links.

I want the inventory to be last in the sidebar list.

I could live with it being at the top, but the problem is that as the list of carried items grows, the little '<' icon I have for collapsing the sidebar doesn't get moved down, so ends up being overlapped by the other links.

Comments

  • TheMadExileTheMadExile
    You cannot expect us to be able to help you when you haven't shown us what you're actually doing—code wise.
  • Jud_CasperJud_Casper
    edited November 2016
    Apologies, but I'm not sure what you need. I have a lot of CSS which styles the sidebar links and also hides some, but it's a lot of code to post.

    In my sidebar, from the top, I have:
    backwards
    forwards

    save/load
    restart

    <
    If I create any of the sidebar passages (Menu, Caption, Author, Banner) for the purpose of an Inventory system, and give it the heading Inventory:, I end up with:
    inventory:

    backwards
    forwards

    save/load
    restart

    <
    As I say I could live with this, but the '<' function doesn't move down as the inventory list is compiled, so it ends up being overlapped by the other links.

    Here's all my CSS: 
    @import url('https://fonts.googleapis.com/css?family=Special+Elite');
html {font-family: Special Elite; font-size: 110%;}
.passage {font-family: Special Elite; font-size: 130%; margin-top: 5.2em; margin-left: 1em; width: 70%; color: #bbb; text-align: justify;}
h4 {font-style: italic;}

body.intro {-webkit-animation: introfade 20s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: introfade 20s; /* Firefox < 16 */
        -ms-animation: introfade 20s; /* Internet Explorer */
         -o-animation: introfade 20s; /* Opera < 12.1 */
            animation: introfade 20s; width: 500px; margin: 250px 0 0 50px; }
@keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes introfade {from {opacity: 0;} to  {opacity: 1;}}

body.deathout .passage {-webkit-animation: fadeout 10s;
       -moz-animation: fadeout 10s; 
        -ms-animation: fadeout 10s; 
         -o-animation: fadeout 10s; 
            animation: fadeout 10s;
	          opacity: 0;}
@keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-moz-keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-webkit-keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-ms-keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-o-keyframes fadeout {from {opacity: 1;} to  {opacity: 0;}}

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: .5em; /* change this to whatever height you want it */
}

body.dayfade .passage {-webkit-animation: fadeday 10s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeday 10s; /* Firefox < 16 */
        -ms-animation: fadeday 10s; /* Internet Explorer */
         -o-animation: fadeday 10s; /* Opera < 12.1 */
            animation: fadeday 10s;}
@keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes fadeday {from {opacity: 0;} to  {opacity: 1;}}

body.intro #menu li a, body.intro #ui-bar-toggle::before { display: none; visibility: hidden; }
a:hover {color: #bbb;}
background: #111; border: none;
body.restart #menu-story, body.restart #ui-bar-toggle::before { display: none; visibility: hidden; }
#story-title {display:none;}
#menu-item-restart a::before, #menu-item-saves a::before {content: "";}
#menu-item-restart a, #menu-item-saves a {}
#menu li a {border: 0px; color: #ccc; display: block; padding: 0em 0em 0em 0.75em; text-transform: lowercase; font-size: 90%; text-align: right;}
#menu li a:hover {background-color: transparent; text-decoration: none;}
a.link-external, a.link-internal {text-decoration: none; font-weight: normal;}
.passage a.link-internal {-webkit-animation: fadein 30s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 30s; /* Firefox < 16 */
        -ms-animation: fadein 30s; /* Internet Explorer */
         -o-animation: fadein 30s; /* Opera < 12.1 */
            animation: fadein 30s;}
@keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes fadein {from {opacity: 0.5;} to  {opacity: 1;}}

a {color: #bbb; cursor: pointer;}
#menu-item-restart:hover, #menu-item-saves:hover {text-decoration: none; color: #999;}
#menu li:not(:first-child) {border-top: 0px;}
#menu ul {border: 0px;}
#ui-bar.stowed #ui-bar-toggle::before {font-weight: normal;}
#ui-bar-toggle::before {font-weight: normal;}
#ui-bar.stowed ~ #story {text-decoration: none; margin-left: 20em;}
@media screen and (max-width: 1136px) {#ui-bar.stowed ~ #story {margin-left: 19em;}}
#ui-bar-toggle {border: 0px; color: #999; font-size: 90%; margin: 20.5em 2.2em 0 0;}
#ui-bar-toggle a {font-weight: bold;}
#ui-bar-toggle:hover {background-color: #111;}
#ui-bar-body {height: calc(100% - 2.5em); margin: 5.1em 0;  padding: 0 2.4em 0 1em;}
#ui-bar {text-align: right; color: #ccc; height: 100%; left: 0; margin: 0; padding: 0; position: fixed; top: 2em; transition: left 0.1s ease-in 0s; width: 20em; z-index: 50; background: #111; border: none;}

    I also have a StoryMenu with the following: 
    <<link "backward">><<script>>Engine.backward()<</script>><</link>>
<<link "forward">><<script>>Engine.forward()<</script>><</link>>
<<if Story.lookup('tags', 'bookmark').length gt 0>>
\<<link "Jumpto">><<script>>UI.jumpto()<</script>><</link>>
\<</if>>

    Although I can't remember why I have this. I thought I could just add the Inventory stuff on the end of this, but it doesn't display.
Sign In or Register to comment.