Howdy, Stranger!

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

[Snowman] Minor Stylesheet Issue

Hello! It's been a long time since I last posted, I hope I'll still be able to find some help with this.

I'm having a minor visual stylesheet issue with Snowman. Everything works fine, but there is a size discrepancy between the Choice Button and the Name Input Button I'm using. (Shown below via Imgur.) The Top button is the Name Input button and the second is the Choice Button.

5rMk3Fq.png

I'd like to have the Stylesheet code for the Name Input button resemble the Choice button Stylesheet, but am unsure how to correct this. The Name Input button won't move any further left when I adjust the size, and the Stylesheet code for both buttons differs in how they're built; so it's harder to match their height and width.

Here's the Stylesheet for the Choice Button
#choices {
	list-style: none;
	padding: 0;
	border: 1px solid #bbb;
}
#choices li {
	margin: 0;
	padding: 0;
}
#choices li:not(:first-child) {
	border-top: 1px solid #bbb;
}
#choices li a {
	display: block;
	margin: 0;
	padding: 0.5em 0.8em;
	border: none;
	text-decoration: none;
	font-size: 75%;
}
#choices li a:hover {
	color: #fff;
	background-color: #718389;
}

And here's the Stylesheet for the Name Input button.
#nameinput button {
  display: block;
	width: 100%;
	border: 1px solid #bbb;
	background-color: inherit;
	line-height: inherit;
  	padding: 0.5em 0.8em;
	text-align: left;
  	font-size: 85%;
  
}
#nameinput button:hover {
	color: #fff;
	background-color: #718389;
}

I'd appreciate any help offered on this little problem. Thanks! If you need any more information, I'd be happy to provide it.

Comments

  • This seems familiar to me.

    What markup are you using? Why use a different control/element for them if you want them to look exact the same?
  • Would you mind posting an HTML example? It's hard to guess just looking at it. I suspect it's a CSS rule you haven't posted that's causing this.
  • This seems familiar to me.

    What markup are you using? Why use a different control/element for them if you want them to look exact the same?

    Here's where I originally posted, you helped me with this back in February of 2016. I'm using a lot of code you and greyelf provided, as I'm not proficient in coding myself. I couldn't tell you much about it.
    http://twinery.org/forum/discussion/5503/disguising-buttons-as-links-snowman-1-2#latest
    klembot wrote: »
    Would you mind posting an HTML example? It's hard to guess just looking at it. I suspect it's a CSS rule you haven't posted that's causing this.

    I'm using JavaScript. If it helps, here's the full code from this project.
    function wordWrap(str, maxWidth) {
        var newLineStr = "\n"; done = false; res = '';
        do {                    
            found = false;
            // Inserts new line at first whitespace of the line
            for (i = maxWidth - 1; i >= 0; i--) {
                if (testWhite(str.charAt(i))) {
                    res = res + [str.slice(0, i), newLineStr].join('');
                    str = str.slice(i + 1);
                    found = true;
                    break;
                }
            }
            // Inserts new line at maxWidth position, the word is too long to wrap
            if (!found) {
                res += [str.slice(0, maxWidth), newLineStr].join('');
                str = str.slice(maxWidth);
            }
    
            if (str.length < maxWidth)
                done = true;
        } while (!done);
    
        return res;
    }
    
    function testWhite(x) {
        var white = new RegExp(/^\s$/);
        return white.test(x.charAt(0));
    };
    
    /*
    	Sets up a text input box and continuation button.
    
    	@param {string} selector - A jQuery-compatible selector for the wrapper element.
    	@param {string} variable - The name of the variable to modify, just the variable.
    	@param {string} passage  - The name of the passage to show upon completion.
    */
    window.textBox = function (selector, variable, passage) {
    	$(document).one("showpassage:after", function () {
    		var	$input  = $(selector).find("input"),
    			$button = $(selector).find("button");
    		$input
    			.attr({
    				"type"     : "text",
    				"tabindex" : 0
    			})
    			.on("change", function () {
    				story.state[variable] = this.value;
    			})
    			.on("keypress", function (evt) {
    				if (evt.which === 13) { // 13 is Return/Enter
    					evt.preventDefault();
    					$(this).change();
    					$button.click();
    				}
    			});
    		$button
    			.attr("tabindex", 0)
    			.on("click", function () {
    				if (story.state[variable] && story.state[variable].trim() !== "") {
    					story.show(passage);
    				} else {
    					window.alert("Enter your name to continue.");
    				}
    			});
    	});
    
    };
    

    And the full StyleSheet, just in case I missed something in the initial post.
    @import url(https://fonts.googleapis.com/css?family=EB+Garamond);
    
    /*choice button*/
    
    #choices {
    	list-style: none;
    	padding: 0;
    	border: 1px solid #bbb;
    }
    #choices li {
    	margin: 0;
    	padding: 0;
    }
    #choices li:not(:first-child) {
    	border-top: 1px solid #bbb;
    }
    #choices li a {
    	display: block;
    	margin: 0;
    	padding: 0.5em 0.8em;
    	border: none;
    	text-decoration: none;
    	font-size: 75%;
    }
    #choices li a:hover {
    	color: #fff;
    	background-color: #718389;
    }
    
    /*passage stylesheet*/
    
    h1 {
    	font-family: Adobe Garamond Pro;
    	font-size: 30px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: 400;
    	line-height: 33px;
    	text-align: center;
    	margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 125px;
      margin-right: 125px;
    }
    h3 {
    	font-family: Adobe Garamond Pro;
    	font-size: 20px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: 400;
    	line-height: 22px;
    	text-align: justify;
    	margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 125px;
      margin-right: 125px;
    }
    p {
    	font-family: Adobe Garamond Pro;
    	font-size: 16px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: 400;
    	line-height: 21.4285717010498px;
    	text-align: justify;
    	margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 100px;
      margin-right: 100px;
    }
    blockquote {
    	font-family: Adobe Garamond Pro;
    	font-size: 20px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: 400;
    	line-height: 28.5714302062988px;
    	text-align: justify;
    	margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 125px;
      margin-right: 125px;
    }
    pre {
    	font-family: Adobe Garamond Pro;
    	font-size: 15px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: 400;
    	line-height: 21.4285717010498px;
    	text-align: justify;
    	margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 125px;
      margin-right: 125px;
    }
    
    .carden {color: #FF9912;}
    .sorrel {color: #3299CC;}
    .marian {color: #6B8E23;}
    .wilmet {color: #EE4000;}
    .kalisa {color: #CD2626;}
    .ellery {color: #B23AEE;}
    
    body {
        background-color: #FFF8E7;
    }
    
    /*name input button*/
    
    #nameinput button {
      display: block;
    	width: 100%;
    	border: 1px solid #bbb;
    	background-color: inherit;
    	line-height: inherit;
      	padding: 0.5em 0.8em;
    	text-align: left;
      	font-size: 85%;
      
    }
    #nameinput button:hover {
    	color: #fff;
    	background-color: #718389;
    }
    
  • @Glitch
    Could you supply the content of the passage you are trying to display/style?

    I am assuming it is a modified version of the following, but we need to know exactly what modifications you made.
    [
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi felis, feugiat a augue ac, posuere volutpat nibh. Cras vel iaculis nulla, sed semper turpis. Aenean et lorem accumsan, finibus libero at, feugiat magna. Morbi posuere elit commodo, placerat velit at, fermentum nulla. Sed in enim viverra, iaculis nunc ut, accumsan orci. Integer vel orci leo. Vivamus arcu magna, pretium eu faucibus a, imperdiet eget ante. Suspendisse quis leo in leo gravida volutpat. Mauris lacus lorem, pretium eget libero ut, lobortis tristique quam.</p>
    
    <p>Integer lobortis diam sed malesuada scelerisque. Nam pretium sollicitudin ex et varius. Proin consequat nunc at mi suscipit, vitae pretium velit bibendum. Aenean feugiat lobortis tincidunt.</p>
    <hr>
    <button>Next</button>
    ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>
    <hr>
    
  • edited March 2017
    You really needed to show the markup for the passage as well.

    I'm going to assume that your basic issue is that the text <input> and <button> elements are being folded into a <p>—something along those lines—thus the left/right margins you're seeing the <button> be constrained by. Without the markup to test, however, it's hard to say for certain.

    I'm also going to assume, for the moment, that you want the text <input> within the paragraph, or whatever, and its <button> outside, so it can match the style of the choice links. If so, then you'll need to separate the <input> and <button> into their own wrappers with the same class, rather than having them both in the same wrapper with an ID, which is probably what you're doing now.

    Probably something like the following mockup:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet posuere sapien, ac convallis est. Fusce blandit sem non dui imperdiet fringilla. Mauris erat velit, tempus ut imperdiet nec, tempus sit amet turpis. Morbi at tristique nisi. In vitae molestie magna. Integer sapien libero, accumsan posuere accumsan in, maximus at magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam consequat neque eu faucibus fringilla. Integer vulputate id ligula vitae feugiat. In hac habitasse platea dictumst.
    
    [… <input> …]{.nameinput}
    
    <hr>
    
    [
    <button>Next</button>
    ]{.nameinput}<% textBox(".nameinput", "name_player", "Next Passage") %>
    
    <hr>
    
    <ul id="choices">
    …
    
    The important parts here being a) the use of class and b) using a <span> for the text <input>, so it's wrapped into a <p>, and a <div> for its button, so it does not get wrapped in a <p>—the gymnastics here are required to placate the Markdown parser.

    You'll also need to change the selectors in your CSS from #nameinput to .nameinput.

    PS: You're also currently setting a font-size of 85% on the button, but 75% on the choice links. You'll want to normalize those if you want them to look the same.
  • edited March 2017
    Oh, I'm not familiar with the terminology. That post provided some much needed context. Here's how I've got the markup structured. Sorry to confound things.
    -----
    
    <h1>Narrative Title</h1>
    
    [
    <hr>
    <p>Lorem ipsum dolor. Sit amet nibh quis vel lorem. Metus in nam sed id neque. </p>
    
    <p>Velit habitasse montes. Cras id conubia. Phasellus tempus dolor diam tempus.</p>
    
    <p>Donec fusce lobortis eros vestibulum nonummy. Mollis eu sit eget tellus non.</p>
    
    <p>My name is <input>.</p>
    <hr>
    <button>Next</button>
    ]{#nameinput}<% textBox("#nameinput", "name_player", "First Passage") %>
    <hr>
    

    The first passage is the only one to use that markup so far. The rest are structured like this.
    -----
    
    Lorem ipsum neque. Ac eu tellus. Non quis laoreet. Natoque est duis. At aliquam sit at nunc mi dolor.
    
    -----
    
    <ul id="choices">
    	<li>[[Choice One]]</li>
    	<li>[[Choice Two]]</li>
            <li>[[Choice Three]]</li>
    </ul>
            
    -----
    
  • edited March 2017
    @Glitch
    Remove the line-break between the second <hr> and the <button>Next</button> elements, and that will stop the button element being embedded within a paragraph element which is messing up the CSS.

    eg. Change these two lines in your example
    <hr>
    <button>Next</button>
    
    ... to be the like this instead
    <hr><button>Next</button>
    


    comment: I never realised how many empty paragraph elements get inserted in to Markdown output, one for each line-break.
  • edited March 2017
    @greyelf
    Wow, I'm surprised that fix was so simple. Thank you! And yeah, I'm glad I don't have to manually write markup for the entirety of the CYOA novel. That would get tedious pretty quick. I’d’ve never gotten this far without Twine and the help of everyone here.
Sign In or Register to comment.