The Simple Universal Stylesheet: Difference between revisions
No edit summary |
No edit summary |
||
| Line 3: | Line 3: | ||
<h2>The Simple Universal Stylesheet</h2> | <h2>The Simple Universal Stylesheet</h2> | ||
<h3 class="center">Want your story to look fancy but don't know how to code?</h3> | |||
<p class="center">Then you've come to the right place!</p> | |||
The was made for anyone who doesn't know how/doesn't want to bother with CSS, but would still like to add styling elements to their stories. I designed it to be as user-friendly as possible. All it takes is a bit of copy and paste. Simply follow the directions below and make your stories fancy! | |||
Take a look at my story, [[Sexual_Research_Commission/Sorensen/1|The Sorensen Family]] for an example of the styling in this sheet. Everything in this sheet has been included on the first chapter. | |||
'''1. Copy this code and include it at the top of every page you want to add style.''' | '''1. Copy this code and include it at the top of every page you want to add style.''' | ||
You'll notice right away that your paragraph font and size have both been changed to make your text more easily readable. | You'll notice right away that your paragraph font and size have both been changed to make your text more easily readable. This alone will make a huge difference and allow your story to be more easily read across all devices (including mobile). If that's all you're looking for, this is all you need. | ||
<pre> | <pre> | ||
{{#css:simple-stylesheet.css}} | {{#css:simple-stylesheet.css}} | ||
| Line 39: | Line 41: | ||
'''4. Adding a line (horizontal rule)''' | '''4. Adding a line (horizontal rule)''' | ||
This code adds a line across the page. | This code adds a line across the page. | ||
<pre> | <pre> | ||
| Line 44: | Line 47: | ||
</pre> | </pre> | ||
This is a link to the stylesheet. Do not edit. [[simple-stylesheet.css]] | This is a link to the stylesheet. Do not edit. [[simple-stylesheet.css]] | ||
[[category:Styling Your Story - CSS Tips]] | [[category:Styling Your Story - CSS Tips]] | ||
Revision as of 09:19, 25 February 2022
The Simple Universal Stylesheet
Want your story to look fancy but don't know how to code?
Then you've come to the right place!
The was made for anyone who doesn't know how/doesn't want to bother with CSS, but would still like to add styling elements to their stories. I designed it to be as user-friendly as possible. All it takes is a bit of copy and paste. Simply follow the directions below and make your stories fancy!
Take a look at my story, The Sorensen Family for an example of the styling in this sheet. Everything in this sheet has been included on the first chapter.
1. Copy this code and include it at the top of every page you want to add style.
You'll notice right away that your paragraph font and size have both been changed to make your text more easily readable. This alone will make a huge difference and allow your story to be more easily read across all devices (including mobile). If that's all you're looking for, this is all you need.
{{#css:simple-stylesheet.css}}
2. Copy this code and Use it for story titles or chapter titles.
Simply put your own title in between the tags
<h2>Your Text Here</h2>
This header is a bit smaller than the first. It's great for sub-headers
<h3>Your Text Here</h3>
3. Add a grey box around text.
This is great for things you need to make stand out. I designed this to display the characters for The Sorensen Family in the Sexual Research Commission.
<div class="call-out"> Write your content here! </div>
4. Adding a line (horizontal rule)
This code adds a line across the page.
<hr>
This is a link to the stylesheet. Do not edit. simple-stylesheet.css