Howdy, Stranger!

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

CSS questions...

Hello forum. Again.

I thought I'd compile some questions I've had relating to CSS in particular.

First of all, is there a way to adjust the text to the right?
I am familiar with
<p align ="right"></p>

But I was looking for something I could add to my stylesheet in order to abbreviate my work. My intention was to use it for dialog purposes, in a way that would spare me from writing it down every time, specially considering the amount of things I already have going on in my passages.

Is there something I can add to what I already have:
  color:#EFE747 ;
  font-style: italic;
  font-family:Courier New;
  font-size: 20px;

Having an area like a dialog box, for example, is it possible to adjust the text so it stays in the middle? My explanation may not be clear so I'm attaching a picture as example of what I'm looking for.

Third, and finally,
Is there a way of making transitions or effects for text to enter or leave the passage? I am familiar with transitions between passages, but I mean, for elements inside the passage itself.
I have written things like
#dialogue-bar {
transition: bottom .5s ease-in-out;
I saw it in some post (I'm sorry I can't remember where), but it does nothing...

So yeah...
That's it.
If anyone with more knowledge about css and stuff wishes to help out, It would be awesome! Thanks :)


  • edited July 2017
    1. The CSS equivalent of your <p align ="right"></p> example is:
    p {
    	text-align: right;
    ... so you may achieve the result you want by adding a text-align property to your .npc class selector but without an TwineScript example of how you're using that class it is difficult to know for certain because alignment generally relies on the element being a block based one.

    2. Without an example of the TwineScript you are using to create/display the 'dialog' it is difficult to state how to centre it vertically (based on your image), but one possible method is to set an element's top & bottom margin property to auto depending on the HTML structure of your page.

    3. The transition example you supplied it activated when the position based bottom property changes value, if that property is not changing value then that transition does notion. Again we need to see an example of the element itself and of what properties you are planing on changing.
  • edited July 2017
    @ Question 1:

    You can use text-align within your CSS for aligning the text (left, right, justified, center, etc.). Just make sure you use it with a block-level element -- it won't work in individual spans, for example.

    @ Question 2:

    You can try using vertical align or using margins around the smaller item to position it exactly in the middle of the larger container, if you know the fixed size of the container. I find vertical-align to be pretty convenient tho.

    @ Question 3:

    Chapel has great code for fading text in and out.

  • First of all, thanks for your feedback.
    As for the right alignment question, I've been using code like the following to create dialogue between the player and npcs:
    @.npc;The conversation comes to an end@@]>>
    <<set $count to 0>>
    <<replace #dialogue-bar">>
    <p align="right">
    <span id="content">$conversation[$count]</span> <br>
    <<button Continue>>
    		<<if $count > $conversation.length - 2>>
    			<<set document.getElementById("dialogue-bar").style.visibility = "hidden">>
    			<<set $count += 1>>
    			<<replace "#content">>
    				<span id="content">$conversation[$count]</span>

    And I've been using
    as an easy way to control, visually, how each line looks. The example I used before of my npc class helps me do this, but there may be a better way to apply it in the actual passage. It would be very helpful if I could add the alignment property to what I already have. Of course, if there's a better way I'm up to learn it.

    As for my second question, with the vertical alignment/margins it would be to fit this same dialog inside a box I created in css and javascript like so.
    $('<div id="dialogue-bar"></div>').appendTo(document.body);

    #dialogue-bar {
    	position: fixed;
    	z-index: 50;
      	background-color:rgba (0,1,0,0.5);
    	border: #fff double 0.4em;
    	height: 20%;
    	right: 0.25em;
    	left: 20%;
      	bottom: 0.25em;
    	padding: 1.5em;

    Should I apply the margins solution to the css of the dialogue bar? or create a class that surrounds the actual coding of the dialogue text? thanks :)
Sign In or Register to comment.