Howdy, Stranger!

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

Messenger style of stylesheet?

Hey guys! i'm kinda new in this software and i would like to know if it possible to make a messenger style Twine game/app ?

This is what im thinking of http://imgur.com/a/zxGbE

Comments

  • The answer here is lots of CSS and clever use of display/include- and replace-style macros. There's no out-of-the-box solution to help with this that I'm aware of; you'll likely have to code it up yourself.

    My suggestion would be to start with the CSS and get things looking how you want.

    I would probably use SugarCube personally, if only for it's easier in-passage jQuery manipulation and widget system. After getting the CSS working right, I'd try to make a couple of widgets using <<include>>, <<replace>>, and <<append>> that automate as much of the 'chat' process as possible.

    After you've laid the groundwork, you should be able to simply write your story the same way you would any Twine story.

    Note that Harlowe could work, but would probably be a bit harder in this case.
  • You need to state the name and full version number of the Story Format you are using, as answers can be different for each one.

    As @Chapel stated it is definitely possible, and there are at least two existing threads on this forum showing possible techniques for doing it.

    a. Conversations like in a chat(sugarcube 2)

    b. Chat like Conversations for Harlowe

  • Thank you everyone
  • edited May 18
    In addition to the advice mentioned, @21rv3 you might also want to have a look around sites like codepen where people post web development & design snippets. For example: here is a recreation of ios7 messages in CSS. The main styling comes from the message & to/from classes in the CSS. (The :before and :after pseudo-elements are just used to create the little curve in the corner of the message.)
  • @mikewesthad thank you it's pretty good :)
  • edited May 18
    How can i delete the Sugarcube 2 Tab? @mikewesthad @greyelf @Chapel

    Or change it? i tried a few methods but it doesn't worked, still the same.
  • edited May 18
    Tab? If you're referring to the UI bar, then you may use the UIBar.destroy() method.

    For example: (goes in Story JavaScript)
    UIBar.destroy();
    
  • Oh wow you're awesome thank you @TheMadExile
  • How do i add a header? i tried but no luck

    i'm thinking about this: http://imgur.com/a/ShIX2

    how do i make a template like this? without functions? @TheMadExile
  • 21rv3 wrote: »
    How do i add a header?
    Do you want that header to appear at the top of every passages in your story or only selected passages.

    A. All passages:

    1. Create a PassageHeader special passage, give it a nobr passage tag, and then place the content you want displayed in the message header into it.
    It could look something like the following which displays the current value of the $messageTitle and $messageSubtitle variables.
    <div id="message-header">
    <div class="title">$messageTitle</div>
    <div class="sub-title">$messageSubtitle</div>
    </div>
    

    2. Use CSS in the Story Stylesheet area to style the message header. The following assumes a HTML structure like the one from the above point 1.
    #message-header {
    	background-color: blue;
    	color: white;
    }
    #message-header .title {
    	text-align: center;
    	font-size: 150%;
    }
    #message-header .sub-title {
    	text-align: center;
    	font-size: 75%;
    }
    


    B. Only in selected passages.

    The solution to this is version similar to A except the content in the PassageHeader needs to be gated somehow. I suggest assigning a known passage tag to all the passages you want the message header to appear on, you can name that tag whatever you like but this example will use message.

    The following uses the tags() function to access the list of passage tags for the current passage being shown, and is based on the examples shown in its documentation.
    <<if tags().includes("message")>>
    <div id="message-header">
    <div class="title">$messageTitle</div>
    <div class="sub-title">$messageSubtitle</div>
    </div>
    <</if>>
    
  • @greyelf Thanks it worked but it only shows the text i mean it's nothing like in the picture.
  • edited May 18
    21rv3 wrote: »
    i mean it's nothing like in the picture.
    I created an example showing you how to do a (conditional) header containing multiple components, including ones that auto-refreshed during passage traversal. I wrongly thought you would be able to layout out whatever components you wanted in that header.

    The following should be done using HTML div elements combined with CSS to lay them out as needed, so that the layout can be designed to automatically change depending on the horizontal dimension of the player's viewport. But due to time constraints I will be using a table element instead.

    Replace the PassageHeader content with something like the following:
    <div id="message-header">
    <table>
    	<tr>
    		<td>
    			[img[left-arrow.png][Left Arrow Feature]]
    		</td>
    		<td class="titles">
    			<div class="title">$messageTitle</div>
    			<div class="sub-title">$messageSubtitle</div>
    		</td>
    		<td>
    			[img[phone.png][Phone Feature]]
    		</td>	
    		<td>
    			[img[three-dots.png][Three Dots Feature]]
    		</td>	
    	</tr>
    </table>
    </div>
    
    ... and replace the CSS in the Story Stylesheet area with something like the following:
    #message-header {
    	background-color: blue;
    	color: white;
    }
    #message-header table {
    	width: 100%;
    }
    #message-header td {
    	text-align: center;
    }
    #message-header .title {
    	font-size: 150%;
    }
    #message-header .sub-title {
    	font-size: 75%;
    }
    
  • Thanks but i already did my own @greyelf but i have a problem, texts keep scrolling over the header, how can i stop that
  • 21rv3 wrote: »
    ... but i already did my own ... how can i stop that
    It is difficult to debug a problem without seeing an example of the code you used to implement your header.
Sign In or Register to comment.