HG Collins’ Handy Styling Guide
This guide is for anyone wishing to add their own unique style to their stories. Don't know how to code? Style your stories without learning CSS with The Simple Universal Stylesheet.
This is a guide for anyone who isn't all that familiar with CSS, but would like to add some style elements to their stories. These are simple things you can copy and paste into your stylesheet or in between the CSS tags at the top of a story page. Here is the link for setting up CSS on your stories. It's pretty simple to use once you get the hang of it and if you're using a browser like Chrome, you can right click and inspect element to look at a page's code and test things out to see what they'll look like. Using the "Show preview" button will come in handy, too. If you're using a stylesheet instead of inline CSS, keep in mind your CSS changes might not appear right away if your browser has already cached them to save on load time. This is where using a private browser window comes in handy.
Most of the CSS code templates I include in this page will deal with ease of readability. I'm real big on making my stories as easy to read as possible.
I'll be adding to this periodically as I have time. I occasionally just drop code in here so it's in one convenient place for me instead of having to dig through the site's code again to find what I want.
Paragraph Style
This code will make all of your paragraphs larger and make your stories easier to read. You can change the number to make it bigger or smaller. The “p” represents paragraphs, and you can add other lines of code in between the { } in order to add additional styling. Examples of things you can do are included in this page.
p {
font-size: 16pt;
}
Changing the size of your paragraph font will also change the size of the font in the announcement bar at the top of the page. This can be annoying if you're increasing the font size, especially on mobile devices where it can take up the entire page. The following code takes care of that issue.
#localNotice p {
font-size: 11pt !important;
}
You can add elements like colors and different fonts to your paragraphs. Here's an example of a paragraph with a custom font. Example:
p {
font-size: 16pt;
font-family: Georgia;
color: Blue;
}
Text Style
Changing the font family is an easy way to make your text fancy. You can use a few standard fonts and ATF stories has a few in their code you can choose, too. I have included all of them below.
Georgia
This font is Georgia. It's a great standard paragraph font to use because it's very easy to read and it's the paragraph font on this page!
font-family: georgia;
Arial
This is the most widely used font. You've probably seen it before...
font-family: arial;
Monospace
Simplicity at its most boring. Just my thoughts on the matter.
font-family: monospace;
Sans Serif
Simple yet respectable. Just the way you like it.
font-family: sans-serif;
Garamond
This font is another one that is nice and easy to read. I still like Georgia better.
font-family: garamond;
Trebuchet MS
This is a pretty nice looking font. I've always liked how this one looks bolded.
font-family: trebuchet MS;
Times New Roman
This font probably doesn't need an introduction.
font-family: times new roman;
Brush Script MT
Well, aren't we getting fancy now? Some mobile browsers ignore this font, it seems.
font-family: brush script mt;
Great Vibes
I personally use this font for my chapter titles. It's another one that looks great bolded!
font-family:Great Vibes;
Dawning of a New Day
Sign your name on the dotted line...
font-family: Dawning of a New Day;
Cursive
Just looks like Comic Sans to me, may show up differently on other browsers/devices.
font-family: Cursive;
Fantasy
Wow, it's like I woke up from a dream with elves and unicorns,
font-family: fantasy;
A few more things you can do with text
This text is bold
font-weight: bold;
This text is underlined
text-decoration: underline;
This text is italicized
font-style: italic;
This text is centered
text-align: center;
This is the fancy header text I've been using on this page
font-size:50px;
font-weight: 700;
font-family: times new roman;
-webkit-text-stroke: 1px #000000;
color: #f4bceb;
Color
This code can be added to a paragraph code to change the color of your font. Just use a color picker tool and copy the hex code. This example with make your text dark blue!
color: #260C83;
This section has a colorful background
<div style="background:#F4BCEB"> Your content goes here! </div>
Here's how you can color your text
Adding Color to a paragraph
Use this if you want an entire paragraph to be a different color.
style="color:#c912ab"
Adding color to only select text
Use this if you only want to a small part of you text to have color
<span style="color:#c912ab">Your Text Here</span>
How to add a background to an entire story simply include this code in your stylesheet or inline style and change the color to whatever you want. This will also add padding of 40px all around so your text doesn't run up against the side.
.mw-parser-output {
background: #F3D6FD;
padding: 40px;
}
Mobile Responsive Elements
ATF stories doesn't have a mobile site, so fonts can look really small on mobile devices. I don't like that, so I wrote this bit of code to tell phones to make my paragraphs larger. Always place this code last in your CSS. Otherwise other CSS will override it.
@media screen and (max-width: 992px) {
p{
font-size: 25pt;
}
}
Learn More at W3 Schools