Create an html button because I can't use image

nowherecity24

Hi All,
Using Sugarcane.
This is in reference to another post where I wanted to use an image button to set a variable not point to a passage.
No one has answered that so I assume it can't be done so I had another idea.
Could I use html to create a button that is not actually an image but just html formatted to look buttonish (if that makes sense).
that way I can just use the html with a setter link.
Can anyone give me some idea if its possible to format something like a button in html?
Thanks
nowherecity24
 

AteYourLembas

Another user recently posted with a similar question--how to update a variable by way of a click but without leaving a passage: http://twinery.org/forum/index.php/topic,1907.0.html

It might be a good thread to watch.

Hope this helps. I'm looking into this question tomorrow. It's relevant to my interests, too.

greyelf

I have posted a possible answer to your img link question here.

A possible solution to this new question is to try wrapping the links you want to appear as buttons using a <span> tag with a class of button and add CSS to your Stylesheet Passage to make them look like buttons:


:: Start
The following links should look like buttons.

<span class="button">[[Attack]]</span>
<span class="button">[[Defend]]</span>

:: Stylesheet [stylesheet]
#passages .content .button {
display: inline-block;
width: 5em;
background-color: tan;
border: 1px solid grey;
margin: 0.5em;
text-align: center;
}


The width property makes all the buttons the same size, you may need to increase the value if your using longer text or remove the width property if you don't want all the buttons to be the same size.

nowherecity24

Hi Greyelf,
Thanks for the reply, I actually already did what you suggested.
This is what I came up with.
<style>
.passage a.internalLink, a.externalLink {
  border: solid #000 0.05em;
  background-color: #e82e60; 
  white-space: nowrap;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border-radius: 0.6em;
  font: calibra;
  font-size: 10;
  color: white;
}
.passage a.internalLink:hover, a.externalLink:hover {
  text-decoration: none;
  box-shadow: #000 0 0 0 0.1em;
  color: grey;
}
. passage a.internalLink:active, a.externalLink:active {
  color: red;
  background-color: red;
}
</style>\

I put this style in the passage where I want the buttons, I don't do it as a stylesheet because I only want it to apply to the links within the passage and not to the whole panel as I have links in my sidebar which I don't want to change the look of.
I'm guessing that by using tags and stylesheets I could probably achieve it properly but just copying and pasting the style is not difficult!
Cheers again
nowherecity24

greyelf

nowherecity24 wrote:

I'm guessing that by using tags and stylesheets I could probably achieve it properly

Yes, that is why I wrapped the links that are to be button in the <span> in my example, so the CSS would only effect those links and not others.

nowherecity24

Thanks greyelf,
Now I know what span does, next I must look up Div as everyone seems to use that.

TheMadExile

They're both style-free container elements.  The chief difference between them, by default, is: <span> is an inline element (e.g. like <em>), <div> is a block level element (e.g. like <p>).

greyelf

This link explains the basic differences between Div and Span, but basically both are used to wrap other HTML tags/element.

Div is a Block container and Span is a inline container.

Edited: I was pipped at the post by TheMadExile lol