View topic - HTML/CSS basics for Fillydelphia Chat Profiles.

HTML/CSS basics for Fillydelphia Chat Profiles.

Out of character discussion for roleplay related stuff

HTML/CSS basics for Fillydelphia Chat Profiles.

Postby Shinula » Fri Jun 28, 2013 2:19 pm

HTML/CSS basics for Fillydelphia Profiles.

This is not necessary to learn but if you want to add some extra customization to your chatroom profiles, this guide will attempt to teach you how.

Please feel free to PM me or just leave a post if you don't understand anything, you want me to add something, or something is simply incorrect, or you need me to help you in person.
I really cannot stress this enough TELL ME OKAY?



What is HTML/CSS

HTML and CSS are different things with similar purpose. Very roughly and simply explained, they tell internet browsers what the page looks like.
They are NOT code, and are not considered programming. It's much simpler than that.


What are Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

Example:
Code: Select all
<tagname>content</tagname>


Don't understand tags still? Get more info about tags.
It's important you understand these.


What are tag attributes

  • HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name="value"

Example:
Code: Select all
<a href="http://www.w3schools.com">This is a link</a>

href=" " is the attribute and <a> is the tag


CSS style

Most of the 'visual' things are now done with CSS while HTML handles all the important formatting.
CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

  • Inline - using the style attribute in HTML elements
  • Internal - using the <style> element in the <head> section
  • External - using an external CSS file

However Fillydelphia has it's own Custom Stylesheet system, which will be used here to make things simpler. It is similar to using an external CSS file.
Tick the option "Use Custom Stylesheet", and it will open a new field for your CSS.
This is similar to the External method, and is the preferred method. Internal will not be covered here.
CSSexample.jpg
CSSexample.jpg (2.97 KiB) Viewed 5099 times

In the new space provided you can add CSS selectors and properties.
Example:
Code: Select all
body {
margin-top: 10px;
float: center;
color:white;
}
p {color:yellow;}

The selectors determine what will be affected, and the properties determine the effect.
Notice, p {color:yellow;}
The p selects all <p> tags, and the {color:yellow;} makes all <p> tags to change text to yellow.
Please note that you when you add multiple properties to a selector and how they all go inside the same set of { }
Also make sure you properly end each property with a ;

Inline
Inline is not ideal, as External is more preferable, but it's fine if you want the style to apply to one or two elements only, such as having one paragraph be a different colour from all the rest.
For this, what you do is insert a style=" " attribute to a tag, and list the chosen CSS properties.
Example of Inline:
Code: Select all
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>


An important note about Fillydelphia profile pages.

Profile pages have their own HTML built in. You'll notice on the profile edit page for your characters, a tick box which determines if auto-formatting is used or not. Depending on what you want to do with your profile you may need to disable auto formatting.
If you leave it on, some tags are invisibly added for your convinience such as </br>
Autoformatexample.jpg
Autoformatexample.jpg (4.73 KiB) Viewed 5096 times

Additionally, if you add a profile picture using the built in Upload Image function, it may upset SOME cases of formatting.(See the #Image section for alternate means)
Last edited by Shinula on Tue Jul 16, 2013 4:46 am, edited 8 times in total.
User avatar
Shinula
Celestia
 
Posts: 288
Joined: Fri May 06, 2011 2:46 am
Location: Australia

Re: HTML/CSS basics for Fillydelphia Chat Profiles.

Postby Shinula » Fri Jun 28, 2013 2:20 pm

Basic formatting tags

Emphasis
<b>Text</b> Bold
<i>Text</i> Italics
<u>Text</u> Underline
While these can be used for headings it is not ideal.
<small>Text</small> For small text


Headings
Headings come in sizes from 1 to 6, 1 being the largest and 6 being the smallest
<h1>Heading Text</h1>
<h3>Heading Text</h3>
<h6>Heading Text</h6>
These are for headings, not emphasis.

Paragraphs (May not be necessary if you have auto-html on but still useful)
For when you need to seperate blocks of text. Simple
<p>
Paragraph of text
</p>

Line Breaks (These are not necessary if you have auto-html on in your profile)
These tags do NOT need start/open tags. Merely add them as a closing tag at the end of a line if you want that line to end there, and have the next one start on a new line.

Line 1 </br> Line 2
Becomes
Line 1
Line 2


Alternate fonts and text colour (CSS)

Text Colour

External
{color:xxxxxx;}

Example: body {color:red;}
This will let you change the colour of all text in the <body>.
You can also assign colours for only select elements such as headings.
Example: h1 {color:green;}

Inline
style="color:xxxxxx;"
Examples:
<p style="color:blue;"> Paragraph Text </p>
This will make the whole paragraph blue and only that paragraph, blue.


Fonts

External
{font-family:"Times New Roman", Times, serif;}

Examples:
body {font-family:"Times New Roman", Times, serif}
This will set all text in the body to use the set font-family, in this case, Times New Roman.
Once again you can assign this style to select elements
p {font-family:Arial, Helvetica, sans-serif}

For a list of fonts that work with most browsers: http://www.w3schools.com/cssref/css_websafe_fonts.asp

(The reason font-family holds so many names for a single font change is due to compatibility reasons. It's not necessary but highly recommended)


Backgrounds (CSS)

Backgrounds are a simple and popular feature to pages and profiles it seems...
I would like to note, while it may seem cool to slap up an image you like or make it a colour you like, keep in mind these may either make text hard to read, or just become plain annoying to viewers.

Background Colour
This will give you a solid background colour instead of the usual black. It is suggested you keep it to a dark colour.
body {background-color:xxxxxx;} (Where xxxxxx is your colour of choice)

The background-color properties can also be applied to other things such as paragraphs.
This will allow you to give the paragraph a solid 'box'.
It's suggested you use these, if your background image makes text difficult to read.
Inline Example: <p style="background-color:yellow;"> Text </p>

Background image
body {background-image:url('http://www.examplewbesite.com/exampleimagename.jpg');}
Replace the example url with the url of your choice image.

Some notes about colours:
While I spell colour with a 'u' for HTML and CSS make sure to spell the American way.

Also, while you can simply enter the name of a colour, you can also use hex codes for more specific colours.
{color:#BF0040;}
Colours can be found here: http://www.w3schools.com/cssref/css_colornames.asp



Inserting Images

If you have extra images such as alternate art of your character, you need to FIRST, upload your image somewhere it can be accessed. This means it needs to be have something called "Inline Linking" or "hotlinkling" allowed. Some image hosting sites do not allow this so check first. (If they don't support it then you will end up with an image telling you so, usually.)
Once you have your image uploaded...
<img src="http://www.examplewebsite.com/exampleimagename.png">
Src is the source or URL of the image. So replace the example URL with the URL to the image you want to use.
You can also add width="x" and height="x" if your image is too big(or small), and manually change it.
Example:
<img src="http://fillydelphia.com/g4/data/1984-141.gif" width="100" height="115">


Tables and Lists

If you have data that needs to be orderly, depending on what it is, a list or a table would be good for keeping it neat.

Lists
Lists come in two flavours, unordered and ordered. Ordered lists have numbered points while unordered do not, they simply come with a bullet point.

Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Add as many <li></li> depending on how many items in the list you need.

Examples:
  • Hats
  • Boots

  1. Kick butts
  2. Chew bubblegum
  3. Buy more gum because you ran out
Tables
This may be slightly difficult to understand, and may be good to try out to learn.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

<tr> is a table row
<td> is a table cell
Enclose <td></td> between <tr></tr> to put a cell in a row.


Youtube embedding(theme music)

This is pretty simple and a lot of people do this already.
If you want some theme music for your profile, go to a youtube video of your chosen song, and click Share, and then Embed.
Then, simply copy the html text provided, and paste it into your profile where desired.

Example:
<iframe width="560" height="315" src="http://www.youtube.com/embed/1IMYLzAr7sk" frameborder="0" allowfullscreen></iframe>

Notice: You can embed music from other sources but please DO NOT use music that autoplays. It's highly annoying and may also reduce people from wanting to stick around and view your profile at all.


Other useful tags

You may not need these but they might come in handy.

Comments
When you add enough stuff to a page it gets messy, so you may need to leave yourself notes.
<!-- Comment -->
Anything enclosed in those 'arrows' will not show up on your page when people view. Refrain from using any special characters that are not standard letters, within your comments.

Span & Div
Sometimes you want to apply a CSS rule to something, but there isn't anything good to attach it too. For instance suppose you want a single word in a sentence to have a different colour. You can't simply put <p></p> around it since that will format the word to be it's own paragraph. Most tags have a purpose to make things on a page appear in a certain way.
<span> and <div> are different. By themselves they do nothing but can easily be used to set CSS style to elements on your profile.

Example:
"Hi, my name is <span style="color:pink;">Pinkie Pie</span> and I really like to Party!"
This would become:
"Hi, my name is Pinkie Pie and I really like to Party!"

<div> can also be used in this manner but is usually better for a large amount of content whereas <span> is better for smaller things.


More goes here later (links?)
Last edited by Shinula on Tue Jul 16, 2013 6:23 am, edited 11 times in total.
User avatar
Shinula
Celestia
 
Posts: 288
Joined: Fri May 06, 2011 2:46 am
Location: Australia

Other useful things

Postby Shinula » Fri Jun 28, 2013 2:20 pm

Example Profile
Example profile goes here.


How to learn from other profiles
Perhaps you've seen somepony with a nice profile page and you want to steal learn from them. Try right clicking on the page and then clicking 'view page source'
Your browser may also include an 'inspect element' function (Firefox has this I am not sure about other browsers)


Learn more about HTML/CSS

This tutorial is designed to be a crash course for the purpose of sprucing up profile pages on Filly.
It is NOT how to make web-pages properly, nor does it cover even half of what you can do.

If you wish to learn more there are plenty of websites out there to help you. Here are just two:
http://www.w3schools.com/
http://www.yourhtmlsource.com/


Feedback
Please leave a post including your thoughts about the tutorial, whether anything does not make sense, if you want me to add something, or if you need personal help with something.
Please tell me if anything is difficult to understand so I can make it better for every one.

Special thanks to Blue-Thrush for looking over this guide and offering useful feedback.

Many parts of this guide have been directly taken from W3C schools in addition the author of this guide cannot be held responsible for any damage caused to your profile pages and everything you do is done at your own discretion and risk thank you.
User avatar
Shinula
Celestia
 
Posts: 288
Joined: Fri May 06, 2011 2:46 am
Location: Australia


Return to Out of character

cron