Help with headers to paragraphs and changing fonts size mid paragraph

311 studios

Help with headers to paragraphs and changing fonts size mid paragraph  basically I'm using a main menu code and its not yet ascetically pleasing in my java script bin i have
$(document).on("click", "a#trigger", function(){
    $("#menu-saves a").trigger("click");
});

and in the first passage i have

Path

created by rufusphipps-kaye


<a id="trigger"><<button "Load Game">>Load Game<</button>></a>

or [[start new]]

this is my main menu but i want PATH to be bigger then created by so and so! can someone help me?

greyelf

You need to state which story format you are using, I am going to assume it is SugarCube because of the <<button>> macro.

The way you are trying to create your own Load Game link is incorrect for a number of reasons as explained by TheMadExile in this thread.


There are many ways to make text appear as a header, the simplest way is to use a HTML header (h1 to h6) tag.


<h3>Path</h3>


Another simple way is to wrap your text in either a <div> or <span> with a class and then use CSS to set the font size.
note: the first line in the following example goes in your passage, the rest goes in your Story Stylesheet


<span class="path">Path</a>

#passages .path {
font-size: 150%;
}


Claretta

I like the header tag approach as it also lets you style the text with custom margins, which can be important when you mix font sizes.

311 studios

THANKS SO MUCH sorry about forgetting to mention i was using sugercube ik this is off topic but is there any chance you know how to make an inventory and change the text font to a kind of 8bit?

greyelf

There are many 8bit looking fonts, this article talks about some of them.

You can use a @font-face CSS rule at the start of your Story Stylesheet area to load a font. This article talks about the different ways to use @font-face.

The following example uses a TTF font from the Open Font Library website, though for better compatibility it is generally better to use a WOFF (or WOFF2) font. Add the example to the start of your Story Stylesheet and i should change your story's passage text.


@font-face {
font-family: '8BITWONDERNominal';
src: url('http://openfontlibrary.org/assets/fonts/8bit-wonder/810653eb446c8181b8ccc7bb6ad2e28b/47592b1b6b2db3fdf06d3cbbfe462ef4/8BITWONDERNominal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

#passages {
font-family: '8BITWONDERNominal';
}


Claretta

You can use font squirrel to convert any font types to WOFF.

You'd then need to host the WOFF somewhere so you can reference it in your CSS.