Using CSS to Improve Your FTRP Life

Hey kids, welcome to the product of my procrastination!!!

CSS and HTML (coding languages) might seem like terrifying things from outer space that you'd never touch with a 10 meter pole, but believe it or not, they can in fact make your life a lot easier as well. Coloring your text with the little buttons in the Forumotion editor may be easy, but it can become awfully time-consuming. While using Notepad to go through and color in bold words nice and fast when stylizing an app is definitely a way to alleviate the pain of highlighting every single word, it's simply not as cool as sticking a line of CSS in that automatically colors all bold words.

For those who are lazy, the copy/paste code for this process is shown below:

Code:

<div class="insertuniqueclassnamehere">Text [b]text[/b]</div>
<style type="text/css">.insertuniqueclassnamehere strong {color:red;}</style>

For those who would like to customize this process further, the actual tutorial starts here.

1. Creating a classed "div" for your post to be located in. This step is crucial as it defines a space for your stuff to be in. Without a container for your code, the CSS will affect everything else on the site too, leading to glitches all over the page.

In HTML, divs are defined by the beginning <*div> tag and the ending <*/div> tag. (The actual code should not contain the asterisks - they are merely there to keep the editor from registering it as actual code.) The div can then be further clarified through classes, styles, and all sorts of other wonky things. For the purposes of what we want to do, however, we will only be adding a class to our div.

This will be done by editing the beginning tag to this: <*div class="">. Within the quotation marks, you can create your own unique class - the more unique the better, as it decreases your chances of the class coinciding with someone else's and causing issues for both of you. A good example would be something like "ivytestcontainer". By adding my own name to the class, it decreases the chances of this class being the same as someone else's.

The result should look like this:

Code:

<div class="ivytestcontainer">Your post goes here!</div>

2. Next, you'll have to add in your CSS. In order to use CSS on Forumotion posts, it must be contained with style tags. Similarly to the div tags, these look like <*style><*/style>. Your CSS code will go between the beginning and ending tags.

However, before you can go ahead and use CSS, you must first define the style as CSS. This can be done by specifying a style "type": <*style type="text/css"><*/style>.

The end result should look like this:

Code:

<div class="ivytestcontainer">Your post goes here!</div>
<style type="text/css">CSS goes here!</style>

3. Finally, the CSS itself! As this is a bit of a different language than HTML, the template for CSS is a bit different. Since we have defined a class already, we will use the class to specify exactly what we want the CSS to affect. We will start off with ".ivytestcontainer". The period before the class name tells the page that "ivytestcontainer" is a class - not an id or anything else.

After our class, we add what part of the ivytestcontainer we want the CSS to affect. In this situation, I want it to change the color of any words I bold using the Forumotion post editor, and as such, I will add "strong" after my class. It should look like ".ivytestcontainer strong".

Now that we've defined exactly what we want to change, we can get down to what we want to change bolded text to, exactly. Our instructions will be in enclosed within these brackets: {}.

I would like to change the color to red, so doing that is as simple as writing "color:red" within those brackets. Putting the CSS together should look like this:

Code:

.ivytestcontainer strong {color:red}

Putting everything together now, we get:

Code:

<div class="ivytestcontainer">Your post goes here!</div>
<style type="text/css">.ivytestcontainer strong {color:red}</style>

If you've done everything correctly, any word you bold within your post should become red as well.

Let's test this below - I have bolded the word "post":

---

Please feel free to ask below with any questions you might have about this, or even test this out - just keep in mind that the most important part of this whole code is the class. If you don't make a unique one, it will clash with everyone else's.

If you're interested in changing the properties of any other parts of your post, "strong" can be replaced with "u" (underline), "i" (italics), "strike" (strikethrough), "a" (links - this includes mentions!). For people who already know how to deal with HTML, "div", "span", "img", etc can also be used - just remember to specify a class.