The Simple Universal Stylesheet: Difference between revisions
No edit summary |
No edit summary |
||
| Line 4: | Line 4: | ||
<h3 class="center">Want your story to look fancy but don't know how to code?</h3> | <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> | <p style="margin-top: 0px; font-size: 28px;" 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! | 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. | 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. | ||
<hr> | |||
'''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.''' | ||
| Line 17: | Line 17: | ||
</pre> | </pre> | ||
<hr> | |||
'''2. Copy this code and Use it for story titles or chapter titles.''' | '''2. Copy this code and Use it for story titles or chapter titles.''' | ||
| Line 30: | Line 30: | ||
</pre> | </pre> | ||
<hr> | |||
'''3. Add a grey box around text.''' | '''3. Add a grey box around text.''' | ||
| Line 39: | Line 39: | ||
</div> | </div> | ||
</pre> | </pre> | ||
<hr> | |||
'''4. Adding a line (horizontal rule)''' | '''4. Adding a line (horizontal rule)''' | ||
| Line 46: | Line 46: | ||
<hr> | <hr> | ||
</pre> | </pre> | ||
<hr> | |||
Revision as of 09:21, 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