›

Howdy, Stranger!

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

Sign In Register

Categories

How to have your story title appear at the top of the webpage centered and formatted

PaulPaul
in Help! with 2.0
I tried to do this in the <body> of the web page that Twine 2 compiles to but it appeared with a linebreak at the first of my two word title making it appear on two lines and forced to the left margin. I was using standard html tags and inline style. <h2> tags worked. that was all
Thanks,
Paul

Comments

  • SharpeSharpe
    You've replied when asked before that you're using Harlowe.

    This is the standard way to center an <h1>:
    <center><h1>This is the Title</h1></center>

    Copy and pasted from a game so I know it works.

    You don't need to edit the HTML file; you can put that code right into a Harlowe passage.

    Here is a link for styling <h1> to <h6> HTML tags: http://www.w3schools.com/tags/tag_hn.asp

    Most browsers will display the <h1> element with the following default values:
    h1 { 
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

    I don't know how Harlowe's default CSS styles <h1>'s, but you can mess with that to change it to whatever you'd like.
  • ClarettaClaretta
    edited June 2015
    If h2 tags worked but h1 tags did not, the culprit is your passage area is not wide enough to support the h1 tags.

    Alternatively you can simply use an image for the title, since images overflow the page margins and are not cut off.
  • SharpeSharpe
    Oh, wrapping is the problem? I see. Didn't read closely enough.

    Might try this:
    h1 { 
	white-space: nowrap;
}
  • greyelfgreyelf
    By default the Harlowe tw-story element is setup to only use 60% of the browser's viewable width.
    This is one of the reason why wider h1 elements would be wrapping, although @Sharpe's suggestion will stop the wrapping from occurring it may also cause your page to now have a vertical scroll bar.
  • PaulPaul
    Well Ok. I better explain better what I want. Most websites now limit their main content to 900px in the center of their pages. I want the whole interaction(with title) to appear within that 900px, would like the title centered, colored, and a size that's larger than the story text. I consider myself an intermediate beginner in programing, even though I have been programing off and on a long time. When I can't remember syntax I usually just google it. The problem with Twine though, it's just not as popular as HTML or JS or jQuery.

    So that's why I chose to put the title in the html file, rather than the start passage. If that will work, fine, I'll do it. I guess I could just copy and paste Twines whole html file inside one of my own. Whatever will do the trick I say! :)

    Sharpe's post confuses me. Where would that snippet go? It's not valid JS and has curley braces. In the first passage maybe?
    OK I just put the Title in the main Passage using <center><h1>This is the Title</h1></center> and it worked fine, no wrapping.
  • SharpeSharpe
    Paul wrote: »
    Sharpe's post confuses me. Where would that snippet go? It's not valid JS and has curley braces. In the first passage maybe?
    CSS for Twine 2 goes in the stylesheet found in the Twine menu in the lower left corner. :-)
  • ClarettaClaretta
    edited June 2015
    Paul wrote: »
    Well Ok. I better explain better what I want. Most websites now limit their main content to 900px in the center of their pages. I want the whole interaction(with title) to appear within that 900px, would like the title centered, colored, and a size that's larger than the story text. I consider myself an intermediate beginner in programing, even though I have been programing off and on a long time. When I can't remember syntax I usually just google it. The problem with Twine though, it's just not as popular as HTML or JS or jQuery.

    So that's why I chose to put the title in the html file, rather than the start passage. If that will work, fine, I'll do it. I guess I could just copy and paste Twines whole html file inside one of my own. Whatever will do the trick I say! :)

    Sharpe's post confuses me. Where would that snippet go? It's not valid JS and has curley braces. In the first passage maybe?
    OK I just put the Title in the main Passage using <center><h1>This is the Title</h1></center> and it worked fine, no wrapping.

    The solutions are still appropriate for what you want to do. Your issue is that the default Twine passage area is not large enough to display the size of the title you want. Please note that Twine is not designed around "most websites", so if you want 900px, you will need to specify it yourself.

    Twine is just HTML and CSS anyway. You can place HTML in the passages.

    Maybe try css like:
    #tw-story {
width: 900px;
}

    Then write the <h1> title in the starting passage.

    Note I'm not a Harlowe user so not sure if I have that css element correct.


    Alternatively, if you are able to host images, what I mentioned about the use of images still holds up. Images are not clipped by elements, so you can just reference a title image of your text at the top of your start passage and it will ignore passage width constraints.
  • greyelfgreyelf
    @Claretta's CSS was mostly correct, though the HTML element's type is tw-story not it's ID.

    Click on the name of your story in the bottom left corner of the Story Editor and select the Edit Story Stylesheet option, then paste in the following CSS: 
    tw-story {
	width: 900px;
}
    ... that will make Harlowe's main HTML element tw-story the width you want.
    All of the other HTML element's generated by the Harlowe engine will be created within the tw-story element, these include tw-passage, tw-sidebar, and any HTML elements contained within your story's passages.
  • PaulPaul
    Thank you all for those informative comments about CSS! I like the idea of an image bearing the title also. What I would really like is to freeze the title at the top but don't know how without involving complicated iframes. I used to have a family tree website where I put everything inside a rounded rectangle, using CSS. I'll have to go back and extract that bit if code and see if it will work on my Twain Story.
  • PaulPaul
    Somebody pick a best answer. They were all good!
  • ClarettaClaretta
    You can choose them all.

Sign In or Register to comment.