0 votes
by (730 points)
I've tried looking everywhere for an answer to this problem but to no avail. How do you use CSS to style a <<textbox>>macro? I want to make it look like the Google search bar, but I don't know how (still a noob at coding).

Also, how do you style a <<button>> macro and change its color, for example?

1 Answer

+1 vote
by (159k points)
selected by
 
Best answer

You can use the Inspect feature of your web-browser's built-in Web Developer Tools to examine the HTML elements that are generated for both the <<textbox>> and <<button>> macros, and if you select those elements within the Elements panel (or equivalent) you will see the CSS being used to style that element.

1. Google's search field.

The HTML input element look something like the following:

<input class="gsfi" id="lst-ib" maxlength="2048" name="q" autocomplete="off" title="Search" type="text" value="" aria-label="Search" aria-haspopup="false" role="combobox" aria-autocomplete="list" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background: url(&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D&quot;) transparent; position: absolute; z-index: 6; left: 0px; outline: none;" dir="ltr" spellcheck="false">

... and the CSS being used to style that input element looks something like:

element.style {
    border: none;
    padding: 0px;
    margin: 0px;
    height: auto;
    width: 100%;
    background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
    position: absolute;
    z-index: 6;
    left: 0px;
    outline: none;
}

.gsfi, .lst {
    font: 16px arial,sans-serif;
    line-height: 34px;
    height: 34px !important;
}

2. The <<textbox>> macro.

Using the first example of the macro documentation as a basis the input element looks like:

<input type="text" id="textbox-pie" name="textbox-pie" class="macro-textbox">

... and the CSS being used to give it its default styling looks like:

input[type=text], textarea {
    min-width: 20em;
}
input {
    padding: 2px 3px;
}
input, textarea {
    color: #fff;
    background-color: #111;
    border: 1px solid #444;
    padding: .4em;
}
button, input, textarea {
    outline: 0;
}

If you look at the HTML input element you will notice that it has been assigned an ID of textbox-pie which is the name of the variable being passed to the <<textbox>> macro with the text "textbox-" added to the start of it. You can use that information to determine the ID to target your custom CSS at, which for the above element would look something like:

#textbox-pie {
	font: 16px arial,sans-serif;
    border: none;
    padding: 0px;
    margin: 0px;
    outline: none;
    line-height: 34px;
    height: 34px;
}

note: The above should be placed within your Story Stylesheet area, I have remove some of the properties that are being applied on the Google input element.

3. The <<button>> macro.

If you inspect the HTML button element being generated by the macro it looks something like:

<button class="link-internal link-button macro-button event-click">Click Me</button>

... and the default CSS being used to style it looks like:

button, input, textarea {
    outline: 0;
}
button {
    cursor: pointer;
    padding: 4px 6px;
    color: #fff;
    background-color: #36c;
    border: 1px solid #58e;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
    text-shadow: 1px 1px rgba(0,0,0,.4);
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
}

If you look at the HTML button element you will notice that it doesn't have an ID so there is currently not way to target a single button but you can change the colour of all buttons by targeting the same select as the above CSS. eg. If you want to change the background colour of all buttons from blue to green you could do the following:

button {
	background-color: green;
}

If you want to target a single button then you need to implement a means to uniquely identify that button and one way to do that is you wrap the button within an element with an ID like the following TwineScript:

<span id="warning"><<button "Click Me">><</button>></span>

 ... and then use CSS targeting the ID plus the element type like so:

#warning button {
	background-color: orange;
}

 

...