Howdy, Stranger!

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

Help with Sidebar CSS

So I've been using The Earth's Story Illustrated CSS and making modifications as I need to, but I'm not the best with any of this as I'm very new to Twine and HTML/CSS/Javascript in general. I did figure out how to re-enable the sidebar, and it currently looks like this:SojFwea.png

My question is how do I remove the extra spacing between lines? I can't seem to figure it out myself and figured someone here would know.

Comments

  • Without see the contents of the passages making up your image I am going to guess your issue may be caused by extra line-breaks.

    Generally each line-break you add to your passage text is converted into a HTML br element, and this can result in blank lines appearing in the displayed passage.

    eg,
    <<set $variable to "value">>
    This text appears on the second line because of the line-break after the previous set macro.
    <<if $variable is "different value">>
    This text will not appear.
    <<else>>
    This text appears on the fifth line because of the line-breaks after the text on line 2 as well as the the one after the else macro.
    <</if>>
    

    There are three ways to remove the blank spaces:

    1. Remove the line-breaks from the passage contents.
    This can make reading the contents within Twine's Passage Editor difficult because everything ends up on a small number of lines.

    2. Use one or more <<nobr>> macros within your passage contents.
    This can result in the removal of line-breaks you actually want to appear in the generated passage output.

    3. Use the Line Continuations backslash \ character to selectively remove unwanted line-breaks.
    <<set $variable to "value">>\
    This text appears on the first line because of the backslash after the previous set macro.
    <<if $variable is "different value">>\
    This text will not appear.
    <<else>>\
    This text appears on the second line because of the backslashes on the code after the text on line 1.
    <</if>>\
    
  • edited July 2016
    Sorry I wasn't really clear enough with my previous post. I do want the line-breaks there, however I want the extra space between line-breaks removed. Like between the "Radio Controls" text and the buttons is a line-break, but as you can see there's a lot of excess room between the two. I want the buttons to be closer to the text.

    For instance what I want looks like this:
    Radio Controls:
    Play Pause

    But it looks like currently (at least to me) is like this:
    Radio Controls:

    Play Pause
  • The space is either additional line breaks, which greyelf has told you how to address, or margins/padding between the elements—it hard to say which from just a picture. Showing the code you're using would be helpful in diagnosing the actual issue—we aren't omniscient.
  • edited July 2016
    Sidebar passage:
    Radio Controls:
    <a href="#" class="musicButton" onclick="TwineAudioPlayer.play()">Play</a><a href="#" class="musicButton" onclick="TwineAudioPlayer.pause()">Pause</a>
    
    Current Inventory:
    <<inv>>
    
    <<mousereplace>><font color = "white">Tune Radio</font><<becomes>>[[Mojave Music Radio]]
    [[Radio New Vegas]]
    [[Black Mountain Radio]]
    [[Lone Ranger Station]]
    <<endmousereplace>>
    

    Sidebar/Passage Stylesheet:
    #sidebar {
    	padding-top: 5%;
    	font-family: monofonto;
    	font-size: 2em;
    	left: 0.5em;
    	width: 15%;
    	list-style: none;
    	z-index: 5;
    	left: 2.5em;
    }
    #sidebar li {
    	text-align: left;
    }
    #credits { 
    	display: none; 
    }
    #restart, #snapback, #bookmark { 
    	display: none; 
    }
    body {
      margin: 0;
      padding: 0;
      height:100%;
    }
    #passages {
      margin:0;
      padding: 0;
      height:100%;
      border-left:none;
    }
    #passages * {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    .passage {
      color: orange; 
      position:relative;
      width: 60%;
      font-size:2em;
      font-family: monofonto;
      margin: 2em auto 0 auto;
    }
    .passage .header {
      width:100%;
      height:480px;
      min-height: 480px;
      border: #FF8C00 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: #FF8C00 double 0.5em;
      border-radius: 1em;
      padding: 1em;
    }
    a.internalLink, a.externalLink {
      border-bottom: solid #FF8C00 1px;
      color:#eee;
      font-weight:normal;
    }
    a.internalLink:hover, a.externalLink:hover {
      text-decoration:none;
      border-bottom: none;
      color:#000;
      background-color:#FF8C00;
      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%;
      }
    }
    

    Minimap Stylesheet:
    #sidebar, #ui-bar
    {
    	top: 170px;
    }
    #minimap
    {
    	position:fixed;
    	left: 40px;
    	top: 36px;
    	width: 300px;
    	height: 300px;
    	overflow: hidden;
    }
    #minimap img
    {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	transition: all 2s;
    	-webkit-transition: all 2s;
    }
    #minimap-overlay
    {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	width: 300px;
    	height: 300px;
    	background-image: [img[minimapoverlay]];
    }
    

    Button Stylesheet:
    .musicButton {
    	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
    	box-shadow:inset 0px 1px 0px 0px #fce2c1;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #ff8c00) );
    	background:-moz-linear-gradient( center top, #ffc477 5%, #ff8c00 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#ff8c00');
    	background-color:#ffc477;
    	-webkit-border-top-left-radius:12px;
    	-moz-border-radius-topleft:12px;
    	border-top-left-radius:12px;
    	-webkit-border-top-right-radius:12px;
    	-moz-border-radius-topright:12px;
    	border-top-right-radius:12px;
    	-webkit-border-bottom-right-radius:12px;
    	-moz-border-radius-bottomright:12px;
    	border-bottom-right-radius:12px;
    	-webkit-border-bottom-left-radius:12px;
    	-moz-border-radius-bottomleft:12px;
    	border-bottom-left-radius:12px;
    	text-indent:0;
    	border:1px solid #eeb44f;
    	display:inline-block;
    	color:#1a161a;
    	font-family:monofonto;
    	font-size:15px;
    	font-weight:bold;
    	font-style:normal;
    	height:33px;
    	line-height:33px;
    	width:58px;
    	text-decoration:none;
    	text-align:center;
    	text-shadow:1px 1px 0px #cc9f52;
    }
    .musicButton:hover {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff8c00), color-stop(1, #ffc477) );
    	background:-moz-linear-gradient( center top, #ff8c00 5%, #ffc477 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8c00', endColorstr='#ffc477');
    	background-color:#ff8c00;
    }.musicButton:active {
    	position:relative;
    	top:1px;
    }
    

    Let me know if there's anything more you need.
  • Generally we need to be able to see the actual structure of the HTML elements that make up a page (the parent/child relationships between each element) and the CSS used to style/position the HTML elements that make up a page to be able to work out what is effecting a particular part of a page.

    What you have supplied us is bits and pieces of your page and we have to guess how those pieces related to each other, how you are inserting your sidebar passage into the page, where the HTML elements representing the sidebar appear in the structure of the page, and what other CSS selectors effect the sidebar besides the ones related to the #sidebar family of selectors.

    This is why we suggested you give us access to the source code of your story/project.

    Based on what you have supplied I am guessing that the vertical space between the "Radio Controls:" text and the two anchor element below it is a result of two things.

    1. The br element caused by the line-break at the end of the line of text.
    2. The CSS line-height of the line of text.

    I was able to reduce the vertical space by changing the line of text in the passage to the following:
    <div style="line-height: 0.8em;">Radio Controls:</div>\
    
    ... I used a backslash to suppress the line-break being converted into a br element, I wrapped the text in a styled div element so it would appear in block, and I reduced the line-height so that the text had less implied padding above and below the textual portion of the element.

    If this fixes the actual cause of your issue then ideally the style information should be moved to a CSS class.
  • You're probably falling victim to the setting of the line-height property for your chosen font and size within the sidebar.

    You could either change the line-height property for the sidebar itself—and children whom inherit the setting—or change just the line-height property for the text in question.

    Examples of each follow—use only one. n.b. You will probably need to adjust the actual value of the line-height property, as the examples are off-the-cuff.

    Change the line-height for the entire sidebar

    Add a line-height to your #sidebar rule. For example:
    #sidebar {
    	padding-top: 5%;
    	font-family: monofonto;
    	font-size: 2em;
    	line-height: 0.75;
    	left: 0.5em;
    	width: 15%;
    	list-style: none;
    	z-index: 5;
    	left: 2.5em;
    }
    

    Change the line-height only for the radio controls

    Wrap the radio controls: (note both instances of the line continuation markup)
    <div class="snuggle">\
    Radio Controls:
    <a href="#" class="musicButton" onclick="TwineAudioPlayer.play()">Play</a><a href="#" class="musicButton" onclick="TwineAudioPlayer.pause()">Pause</a>\
    </div>
    
    Then add the following style rule to your stylesheet:
    #sidebar .snuggle {
    	line-height: 0.75;
    }
    
  • edited July 2016
    Thanks guys, my knowledge of all of this is limited and I didn't realize line-height was the issue. It's fixed now with TheMadExile's suggestion, thanks a ton.
Sign In or Register to comment.