I need to make the interface look almost like a chat, with the text inside "boxes" of different color, some aligned on the left, some aligned in the middle and other to the right. I checked Markdown and JS tutorial but I didn't find anything useful. Maybe I just don't know where to look for, or what to look for. Even just a tip about how to look for it or where would be appreciated.
Thanks for any help!
You'll have to create custom CSS and modify the Squiffy HTML template. There's no easy way of doing this and you will need a reasonable understanding of web development to achieve this effect.
Here is what I did to make it look like a chat.
you need to make styles for it. Here is for the sender and receiver.
Just an example
hello
hi
how are you
Im, Fine
and the code
Just remove the "--" inside the "<--code>"
<--style>
.sender {
background-color: skyblue;
padding: 10px;
border-radius: 30px;
text-align: left;
}
.me{
background-color: yellowgreen;
padding: 10px;
border-radius: 30px;
width: 70px;
text-align: right;
margin-left: auto;
}
<--body>
<--p class='sender' style='width:70px'> hello <--/p>
<--p class='me' text-align='right' style='width:50px' > hi <--/p>
<--p class='sender' style='width:100px'> how are you<--/p>
<--p class='me' text-align='right'> Im, Fine <--/p>
Looks like it didn't display the result here. to view the result copy and paste it on the comment and you will see the result in there.
(sorry for bad english):
Thanks! That would be awesome...but unfortunately it does not work. I carefully removed all the -- in the code, so it should work.
I would be happy even with just an option to customize each single string of text: align the text left, right or center, to modify its color and size. How could we accomplish that?
PS are you italian?
Thank you!
Squiffy doesn't read the CSS styles, if you tried this on the squiffy editor it will not display the styles it will just ignore it.
to view the result you need to BUILD the game as an HTML file.
you can paste the styles on the styles.css.
if you just wanted the text alignment its <p text-align='right'>or <p text-align='left'>
you need to wrap your text with the code. (I think squiffy won't display the result either, so you need to BUILD the game as an HTML file)
The last code I posted works, It's just that squiffy doesn't display it. Too see what I meant
copy and paste this code to http://htmledit.squarefree.com/
.sender {
background-color: skyblue;
padding: 10px;
border-radius: 30px;
text-align: left;
}
.me{
background-color: yellowgreen;
padding: 10px;
border-radius: 30px;
width: 70px;
text-align: right;
margin-left: auto;
color: white;
}
</style>
<body>
<p class='sender' style='width:70px'> hello </p>
<p class='me' text-align='right' style='width:50px' > hi </p>
<p class='sender' style='width:100px'> how are you</p>
<p class='me' text-align='right'> Im, Fine </p>
I'm not Italian. :D
Welcome
A friend from our forum suggested this:
"minor"div style="border-style: dotted;""greater"
In addition to sections, Squiffy has the concept of passages. These are sections of text that don't advance the story. Passage links use single square brackets. For example, you can click this [passage link], and this [other passage link], but the story won't advance until you click this [[section link]].
"minor"/div"greater"
"minor"div style="border-style: dotted;""greater"
In addition to sections, Squiffy has the concept of passages. These are sections of text that don't advance the story. Passage links use single square brackets. For example, you can click this [passage link], and this [other passage link], but the story won't advance until you click this [[section link]].
"minor"/div"greater"
<p>
"minor"div style="text-align: center""greater"
In addition to sections, Squiffy has the concept of passages. These are sections of text that don't advance the story. Passage links use single square brackets. For example, you can click this [passage link], and this [other passage link], but the story won't advance until you click this [[section link]].
"minor"/div"greater"
<p>
It works on Squiffy just fine!
I had to write "minor" and "greater" instead of < and > because for some reason otherwise the post would not be accepted.
Oh, that's inline CSS. what I did is Internal CSS.
Designing your game will be much easier if you use External or Internal CSS so rather than setting your design every time you use it You will just need to make it once then just call the design when you need it.
and using squiffy instead of using "div" it's much better to use "span" ("<"span">)
I have problems using div when there is too much content on the screen
So are you saying that your CSS would not be read in the "preview" field of Squiffy editor but would work once I "BUILD" it as Html? I thought that the prewiew was accountable. This could explain why sometimes I can't make some code work.
And what about publishing it from the browser editor? Would it work that way?
Yes, yes. CSS and styles would not be read in Squiffy Editor.
When you BUILD the game as an HTML it will create files to be opened in the browser.
Yes, the browser publish also works.
If you design inside the styles.css note that everytime you build the game it override it as a blank one so before you build it save a copy of it then paste it back.