Hey guys, relatively new to Webstory but I finally figured out how to use the engine. It was like I was running into a brick wall until I learned how to jump (and by that I mean copy the example game and replace the content with my own needs). Really loving the engine right now :V
That out of the way, I've been trying to figure out how to get the textbox looking the way I want it to. I got 2 questions:
1. How do I put in my custom textbox?
2. For a narrator without a name, how do I get rid of the namebox?
I looked here:
http://webstoryengine.org/language:elements:textbox
And I tried to set names="yes" to names="no" but that completely removed the text altogether. Poof. No text at all.
If it means anything, I found the default.css file and changed:
font-family: Comic Sans MS, cursive;
font-size: 1.5em;
Any help is appreciated. Thank you!
#WebstoryEngine #textbox #bugs
Hi CheeryMoya!
First of all, which version of the engine did you use? The 0.2.1 beta from this site? The 0.3 from the GitHub site is not stable at all right now, so you shouldn't use that for real projects.
I just downloaded the 0.2.1 package myself the way it is, to be sure I have a clean version, gave the speaker in the sample novel a
Code:
<displayname>Speaker</displaynem>
and it worked as expected, putting the speaker's name into the textbox itself instead of an extra box on top of it.
To style your textbox, you can give the asset definition inside your WebStory a cssid="whateverTheIDShouldBe" and then in the CSS code you can apply styles to it by using:
<pre>
Code:
#whateverTheIDShouldBe { [your code here] }
</pre>
As for you second question: Right now it is not possible out of the box to hide the name box when the speaker does not have a display name. It could probably be done by writing an extension. I don't have enough time to test that right now, maybe I will do it later.
By the way: I am not quite sure that everyone has Comic Sans MS... Windows users, yes. But what about Mac OS X? Do they have that font? Linux users usually don't. If you want to make sure that everyone sees the same font, you will need to define an @font-face in your CSS and put the font-file on your server, too.
If the error still happens, you could send me what you have (maybe putting it on your server in a password protected directory and mail me the credentials to access it) and I can take a look later.
I'm pretty sure I got the 0.2.1 BETA Full download, but I re-downloaded that and reset the
js and
styles folders. I tried it again but it just doesn't show:
Code:
<character name="w" textbox="tb_other">
<displayname>William</displayname>
</character>
<textbox name="tb_other" width="790px" height="130px" x="5px" y="450px" names="no"></textbox>
When William speaks, the game doesn't show his text. It still requires a click forward though.
Bleh, I'm not the best at CSS so my attempt at customizing the textbox failed.
Code:
#custombox
{
position: absolute;
/* top: 50px; */
bottom: 50px;
padding: 20px;
left: 200px;
right: 200px;
padding-top: 20px;
background: url(assets/images/spiky flower.png) left top;
}
When you release 0.3, would it be possible to have a working code of this and the definable @font-face in the CSS file in comments? It'd help a lot of users who aren't so savvy in CSS.
IDK what I'm doing anymore, so here's a zip of the practice project where all the problems are.
https://dl.dropbox.com/u/73604278/More_than_Forever.zip
I changed back the
w speaker so the text shows up. (Also tell me if my defined @font-face is at the right spot, I'm really bad at this >_>)
I tried the game on Linux with Chrome and Firefox - the names of the speakers are displayed as expected. What browser and plattform did you use to test this?
You did not set the cssid= attribute on the textbox. So the engine does not know that you want the box's style to be associated with #custombox.
Here is what I used:
<pre>
Code:
<textbox name="tb_other" width="790px" height="130px" x="5px" y="450px" names="no"></textbox>
<textbox name="tb_main" width="790px" height="130px" x="5px" y="465px" names="no" cssid="custombox"></textbox>
</pre>
As for you CSS... there are some things wrong with it. First of all, when you reference something from a CSS file via "url()" the URL you need to specify must be relative to the directory where the CSS file is on the server. That means that in this case, you need to put a "../" before what you already wrote, because the CSS file is in styles/, and so you need to go up one directory to be in the root directory of the WebStory and then from there go into assets/ etc.
Then also, what you probably want to add to your CSS is that you disable the border and the box-shadow and you probably want to set the font-color to something darker so that text can be read when there is no text-shadow.
Here's the CSS that produced the result you can see in the screenshot below:
<pre>
Code:
#custombox
{
position: absolute;
/* top: 50px; */
bottom: 30px;
padding: 20px;
left: 200px;
right: 200px;
padding-top: 20px;
background: transparent url('../assets/images/spiky flower.png') left top;
border: 0;
color: black;
box-shadow: none;
text-shadow: none;
font-size: 0.9em;
line-height: 1.2em;
}
#custombox .text
{
padding: 15px;
padding-left: 10px;
}
</pre>
I would put the @font-face at the top of the file, but I guess technically it doesn't really matter.
Screenshot
I use Windows 7 + Google Chrome. Strangely enough, using your codes fixed everything :c
I ended up breaking a lot of things and then eventually ending up with this code for the textbox:
Code:
.WSEStage .textbox, #NvlTb
{
position: absolute;
background: transparent url('../assets/images/spiky_flower.png') left top;
padding: 10px;
box-shadow: 10px 10px 40px black;
left: 10px;
border: 0;
color: black;
box-shadow: none;
text-shadow: none;
font-size: 0.9em;
line-height: 1.2em;
border-radius: 5px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
Which does indeed work. The game is ready to go and once I upload it to a server, I'll post this in the completed games section. Thank you for putting up with me and this joke game OTL Next one will be a more serious story!
You are welcome, @CheeryMoya. It's good to see the engine being used.
@CheeryMoya:
The URL in your @font-face declaration misses a '../' just like it was the case with the textbox background. I didn't realize that sooner because I had Comic Sans installed on my system. But I recently had to re-install my OS and when the font file wasn't on my computer I saw that the font in the game wasn't Comic Sans and, indeed, the debugger told me it could not load the font file from your server.
I also had the problem that the background music didn't loop. I don't know why that is (worked in all my tests) - maybe it has something to do with the server configuration... I'll look into that problem when I have the time.