HTML/CSS basics for Rolplay Chat Profiles

Everything related to our vore chat room and vore roleplaying room can go here!

HTML/CSS basics for Rolplay Chat Profiles

Postby Eka » Sat Jul 06, 2013 4:35 pm

HTML/CSS basics for C3 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.


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 c3 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 28200 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 C3 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 28200 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)


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.
Once you have your image uploaded...
<img src="http://www.examplewebsite.com/exampleimagename.png">
Simple.
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://aryion.com/forum/download/file.php?avatar=808_1322627784.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="//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.

-links
span & div
More goes here later

Example Profile
Example profile goes here.


How to learn from other profiles
Perhaps you've seen someone 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 c3.
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.

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. credit goes to here
User avatar
Eka
Administrator
 
Posts: 4492
Joined: Fri May 13, 2005 10:59 pm
Location: Canada

Re: HTML/CSS basics for C3 Chat Profiles

Postby tod3690 » Sat Jul 06, 2013 9:02 pm

I can't really comment on the instructions, I'd still I'd like to thank you for giving this to us for free.
User avatar
tod3690
---
 
Posts: 1094
Joined: Thu May 17, 2007 11:00 pm

Re: HTML/CSS basics for C3 Chat Profiles

Postby Alon » Wed Aug 07, 2013 5:12 am

very informative post about CSS and HTML...:)
testking 70-462 testking 70-462
actualtests scwcd certification actualtests scwcd certification
Alon
New to the forum
 
Posts: 4
Joined: Wed Aug 07, 2013 5:07 am

Re: HTML/CSS basics for C3 Chat Profiles

Postby Haloveteran » Mon Mar 13, 2017 12:47 pm

I dont think the image line works anymore. I tried my own links, the one on this page, and two different ways or typing up the link. Nothing pops up when i click to view my profile, the link just stays a link.
User avatar
Haloveteran
New to the forum
 
Posts: 3
Joined: Sun Jun 29, 2014 11:00 am

Re: HTML/CSS basics for C3 Chat Profiles

Postby Midir » Sun Apr 23, 2017 12:54 pm

Haloveteran wrote:I dont think the image line works anymore. I tried my own links, the one on this page, and two different ways or typing up the link. Nothing pops up when i click to view my profile, the link just stays a link.

Is "Use HTML For Profile Body" ticked?
User avatar
Midir
Intermediate Vorarephile
 
Posts: 452
Joined: Fri Feb 26, 2010 7:38 pm

Re: HTML/CSS basics for C3 Chat Profiles

Postby Nightmare49 » Sat May 20, 2017 12:14 pm

Personally i've been thinking of creating some HTML RP Profile Templates for others to download and use. Going to a make a topic about it. :)
User avatar
Nightmare49
Been posting for a bit
 
Posts: 56
Joined: Mon Jul 21, 2014 3:09 pm

Re: HTML/CSS basics for C3 Chat Profiles

Postby Shirehorse7 » Wed Jul 26, 2017 10:55 pm

This is a very helpful guide, though one thing that I'm confused with is the text color. I've been trying to put in the way it says, but nothing happens. For example I'm trying to change the heading color yellow, how would I input it with the "<h1>"and </h1>" in place?
User avatar
Shirehorse7
Somewhat familiar
 
Posts: 81
Joined: Thu Jul 25, 2013 9:53 pm

Re: HTML/CSS basics for C3 Chat Profiles

Postby Fenondya » Wed Aug 21, 2019 4:26 am

Thanks for very useful guide.
Fenondya
New to the forum
 
Posts: 1
Joined: Wed Aug 21, 2019 2:25 am

Re: HTML/CSS basics for C3 Chat Profiles

Postby Someone92 » Tue Jan 26, 2021 2:27 pm

Has something changed due to the recent update of the chat? Cause linking youtube videos do not work anymore.

Code: Select all
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
User avatar
Someone92
Intermediate Vorarephile
 
Posts: 366
Joined: Sun Jan 10, 2010 6:26 pm

Re: HTML/CSS basics for C3 Chat Profiles

Postby matthewthawes » Fri Feb 19, 2021 5:14 pm

I can't get a background to work not sure what I'm doing wrong or what I'm missing

{background-image:url('https://66.media.tumblr.com/90f377de9b08a266bc6613a7fd74546e/tumblr_pg23wovb1U1v6fd1fo1_1280.png');}
User avatar
matthewthawes
Been posting for a bit
 
Posts: 28
Joined: Tue Sep 12, 2017 10:06 pm
Location: got a an apartment

Re: HTML/CSS basics for C3 Chat Profiles

Postby MaxTwenty » Fri Feb 19, 2021 5:22 pm

You'd have to do
Code: Select all
body{background-image:url('https://66.media.tumblr.com/90f377de9b08a266bc6613a7fd74546e/tumblr_pg23wovb1U1v6fd1fo1_1280.png');}
specifically in the CSS pane.
User avatar
MaxTwenty
Advanced Vorarephile
 
Posts: 675
Joined: Sun Oct 16, 2005 11:00 pm


Return to Our chat room

Who is online

Users browsing this forum: No registered users