Howdy, Stranger!

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

Styling Links and Buttons in SugarCube

Quick question. While I understand how to style styling links in HTML and CSS, how can I style the standard wiki links using SugarCube 1 in Twine 1 so that each link is different in appearance?

Just to make sure I'm clear, I want these two links in the same passage to look different:
[[link1]]
[[link2]]

Thanks!

Comments

  • You might want to look at the SugarCube 1.x markup docs.

    If you want to be able to style links separately, then you need to be able to select them separately. You can do so by either wrapping them in some extra markup or by using HTML. Either way, you'll be adding classes, since I'm assuming you be wanting style categories (if not, you could use IDs or, possibly, the attribute selector; see below). For example:
    @
    
    /* HTML markup. */
    <a class="my-link-seduce" data-passage="link1">link1</a>
    <a class="my-link-intimidate" data-passage="link2">link2</a>
    
    The selectors are slightly different: (only showing one of the styles):
    @). */
    .my-link-seduce a {
    	color: hotpink;
    }
    .my-link-seduce a:hover {
    	color: pink;
    }
    
    /* For the HTML markup. */
    a.my-link-seduce {
    	color: hotpink;
    }
    a.my-link-seduce:hover {
    	color: pink;
    }
    

    Additionally, if you ever need to style a link based on the passage it links to, then you can simply use the attribute selector with the data-passage attribute (since all markup based links receive the attribute). For example:
    a[data-passage="link1"] {
    	color: hotpink;
    }
    a[data-passage="link1"]:hover {
    	color: pink;
    }
    
  • Okay, so one throws out the wiki link syntax and uses HTML like so:
    <a data-passage="passage name" data-setter="$variableName to 'variableValue'">link text</a>
    

    Then, style the link as one normally would do, by adding:
    <a class="class1" data-passage="passage name" data-setter="$variableName to 'variableValue'">link text</a>
    

    Then, in the stylesheet, add:
    a.class1 {
    	color: hotpink;
    }
    

    Okay, I think I got it!


    However, now I'd like to ask how one can style individual buttons using SugarCube's <<button>> and <<click>> macros. For the button, does one just use regular HTML/CSS like above?
  • You'd likely have to wrap them in SugarCube 1.x.
  • You'd likely have to wrap them in SugarCube 1.x.

    Well, I tired figuring that out, but I did it incorrectly (obviously, to someone who knows how to do this, lol):
    <span class="btn1">
    <<button "foo">><</button>>
    </span>
    
    button.btn1
    {
        display: block;
        font-size: 1.1em;
        padding: 10px 15px;
        margin: 20px auto;
        color: red;
        background-color: green;
        border: 0 none;
        border-radius: 3px;
        cursor: pointer;
    }
    
  • I just showed you how to do wrapped selectors above with the custom styles markup (it doesn't matter which markup you're using when you're wrapping, the selectors are exactly the same, because what you're doing is exactly the same).

    Example:

    Wrapping the button (either of these should work):
    @
    

    Styling it:
    /* CLASS_FROM_WRAPPER WRAPPED_ELEMENT */
    .btn1 button {
    	display: block;
    	font-size: 1.1em;
    	padding: 10px 15px;
    	margin: 20px auto;
    	color: red;
    	background-color: green;
    	border: 0 none;
    	border-radius: 3px;
    	cursor: pointer;
    }
    
  • So, I got the selector syntax wrong. Got it.
  • edited July 2015
    I just use <span> to do this. Basically what TME writes just above.
Sign In or Register to comment.