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