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.
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
And here's the Stylesheet for the Name Input button.
I'd appreciate any help offered on this little problem. Thanks! If you need any more information, I'd be happy to provide it.
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.
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
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
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.
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>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.
----- <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> -----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 ... to be the like this instead
comment: I never realised how many empty paragraph elements get inserted in to Markdown output, one for each line-break.
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.