Fairy Tail RP

Would you like to react to this message? Create an account in a few clicks or log in to continue.

• Patch Notes •                 • New User Guide •                • Guild Information •

    Using CSS to Improve Your FTRP Life

    ivyleaf33
    ivyleaf33

    Moderator- Main Account- Alignment Shift- Dragon VIP Status- VIP- Quality Badge Level 1- Quality Badge Level 2- Quality Badge Level 3- God Of Ishgar- Ten Wizard Saint Member- Rising Star- Guild Master- Dark Guild Ace- H-Rank- S-Rank- A-Rank- Wanderer- Eevee- Working Together- Forever Solo- Christian Minecraft Server- Teaming Up!- Limited Edition- Achiever- Expert Achiever- Buddy Buddy- Obligatory Beach Episode- Sticking Around- Loyal to the Bone- Fan Artist- Taskmaster- Halloween gfx'ers- Halloween Social- Halloween job event participant - Fan Art Contest Participant- Haiku Contest Participant- Rich- Veteran Level 4- Veteran Level 3- Veteran Level 2- Veteran Level 1- Character History!- Magic Application Approved!- Get A Pet!- Character Application Approved!- Complete Your First Job!- Obtain A Lineage!- Join A Faction!- Tertiary Magic- Grand Master [2000]- Master [1000]- Senior [500]- Novice [250]- 2nd Place Event/Contest Winner- X-Mas Event Participant- Summer Special Participant- Have Onida On Your Friend's List- Player 
    Lineage : Spirit Warrior
    Position : None
    Posts : 2989
    Guild : Fairy Tail
    Dungeon Tokens : 0
    Age : 21
    Mentor : Speculo (former)
    Experience : 779,415

    Character Sheet
    First Skill: Advanced Solid Script
    Second Skill: Aura Manipulation
    Third Skill: N/A

    Information Using CSS to Improve Your FTRP Life

    Post by ivyleaf33 23rd August 2018, 8:26 pm

    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:

    Text text


    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":
    Your post goes here!






    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.



    Last edited by ivyleaf33 on 23rd August 2018, 10:25 pm; edited 3 times in total
    Cr1tikal
    Cr1tikal

    Player 
    Posts : 1756
    Cosmic Coins : 8
    Dungeon Tokens : 0
    Age : 34
    Experience : 0

    Character Sheet
    First Skill: FrostFire Dragon Slayer
    Second Skill: Cosmic Slayer
    Third Skill:

    Information Re: Using CSS to Improve Your FTRP Life

    Post by Cr1tikal 23rd August 2018, 10:05 pm

    first


    _____________________________________________________________________________________

    Using CSS to Improve Your FTRP Life MQNhOUw

    ivyleaf33
    ivyleaf33

    Moderator- Main Account- Alignment Shift- Dragon VIP Status- VIP- Quality Badge Level 1- Quality Badge Level 2- Quality Badge Level 3- God Of Ishgar- Ten Wizard Saint Member- Rising Star- Guild Master- Dark Guild Ace- H-Rank- S-Rank- A-Rank- Wanderer- Eevee- Working Together- Forever Solo- Christian Minecraft Server- Teaming Up!- Limited Edition- Achiever- Expert Achiever- Buddy Buddy- Obligatory Beach Episode- Sticking Around- Loyal to the Bone- Fan Artist- Taskmaster- Halloween gfx'ers- Halloween Social- Halloween job event participant - Fan Art Contest Participant- Haiku Contest Participant- Rich- Veteran Level 4- Veteran Level 3- Veteran Level 2- Veteran Level 1- Character History!- Magic Application Approved!- Get A Pet!- Character Application Approved!- Complete Your First Job!- Obtain A Lineage!- Join A Faction!- Tertiary Magic- Grand Master [2000]- Master [1000]- Senior [500]- Novice [250]- 2nd Place Event/Contest Winner- X-Mas Event Participant- Summer Special Participant- Have Onida On Your Friend's List- Player 
    Lineage : Spirit Warrior
    Position : None
    Posts : 2989
    Guild : Fairy Tail
    Dungeon Tokens : 0
    Age : 21
    Mentor : Speculo (former)
    Experience : 779,415

    Character Sheet
    First Skill: Advanced Solid Script
    Second Skill: Aura Manipulation
    Third Skill: N/A

    Information Re: Using CSS to Improve Your FTRP Life

    Post by ivyleaf33 23rd August 2018, 10:11 pm

    heck u


    _____________________________________________________________________________________


    Using CSS to Improve Your FTRP Life B2WXv4aK_o
    sorano granon | solid script | aura manipulation | bank | armory
    i pretend i really liked it this way-- you see, my heart won't die, though i've really tried.


    Althea
    Althea

    Developer/GFX Artist- Main Account- Gain An Artifact- Quality Badge Level 1- Quality Badge Level 2- Quality Badge Level 3- Rising Star- Dragon Slayer- Neutral Guild Ace- X-Rank- H-Rank- S-Rank- A-Rank- Wanderer- Eevee- EXP Grinder- Jewel Grinder- Job Creator- Working Together- Forever Solo- Christian Minecraft Server- I Have Friends...- Limited Edition- Hired Help- Unknown Legend- The Completionist- Achiever- Expert Achiever- Over Achiever- Buddy Buddy- Obligatory Beach Episode- Sticking Around- Dank Memer- Fan Artist- Solo Artist- Taskmaster- Halloween Social- Halloween job event participant - Fan Art Contest Participant- Rich- Veteran Level 3- Veteran Level 2- Veteran Level 1- Magic Application Approved!- Obtain A Secondary Magic!- Character Application Approved!- Complete Your First Job!- Obtain A Lineage!- Join A Faction!- Tertiary Magic- Senior [500]- Novice [250]- 1st Place Event/Contest Winner- Advertisement Achievement Badge- Hero- Summer Special Participant- Have an Admin as a friend!- Player 
    Lineage : Eater of Dreams
    Position : Shitposter
    Faction : The Luminous Covenant
    Posts : 936
    Guild : Fairy Tail
    Cosmic Coins : 0
    Dungeon Tokens : 0
    Mentor : Mura Kensho
    Experience : 3,920

    Character Sheet
    First Skill:
    Second Skill:
    Third Skill:

    Information Re: Using CSS to Improve Your FTRP Life

    Post by Althea 24th August 2018, 1:22 pm

    "The crackers were stale."
    -Rain, Yelp Reviewer


    _____________________________________________________________________________________


    ivyleaf33
    ivyleaf33

    Moderator- Main Account- Alignment Shift- Dragon VIP Status- VIP- Quality Badge Level 1- Quality Badge Level 2- Quality Badge Level 3- God Of Ishgar- Ten Wizard Saint Member- Rising Star- Guild Master- Dark Guild Ace- H-Rank- S-Rank- A-Rank- Wanderer- Eevee- Working Together- Forever Solo- Christian Minecraft Server- Teaming Up!- Limited Edition- Achiever- Expert Achiever- Buddy Buddy- Obligatory Beach Episode- Sticking Around- Loyal to the Bone- Fan Artist- Taskmaster- Halloween gfx'ers- Halloween Social- Halloween job event participant - Fan Art Contest Participant- Haiku Contest Participant- Rich- Veteran Level 4- Veteran Level 3- Veteran Level 2- Veteran Level 1- Character History!- Magic Application Approved!- Get A Pet!- Character Application Approved!- Complete Your First Job!- Obtain A Lineage!- Join A Faction!- Tertiary Magic- Grand Master [2000]- Master [1000]- Senior [500]- Novice [250]- 2nd Place Event/Contest Winner- X-Mas Event Participant- Summer Special Participant- Have Onida On Your Friend's List- Player 
    Lineage : Spirit Warrior
    Position : None
    Posts : 2989
    Guild : Fairy Tail
    Dungeon Tokens : 0
    Age : 21
    Mentor : Speculo (former)
    Experience : 779,415

    Character Sheet
    First Skill: Advanced Solid Script
    Second Skill: Aura Manipulation
    Third Skill: N/A

    Information Re: Using CSS to Improve Your FTRP Life

    Post by ivyleaf33 24th August 2018, 8:07 pm

    RainCalamity wrote:"The crackers were stale."
    -Rain, Yelp Reviewer

    We here at Procrastination Co. would like to apologize for this unacceptable situation. Our crackers have been replaced with high-quality organic crackers that are refreshed every day. We hope this will be to your satisfaction.

    Thank you for the feedback!


    _____________________________________________________________________________________


    Using CSS to Improve Your FTRP Life B2WXv4aK_o
    sorano granon | solid script | aura manipulation | bank | armory
    i pretend i really liked it this way-- you see, my heart won't die, though i've really tried.



      Current date/time is 5th November 2024, 12:36 pm