[Origin Cave]

CSS Style Guide

So you want to have mastery over CSS on Origin, do you? Well, you've come to the right place! This thread will tell you all you need to know about using CSS on Origin.

What is CSS?
CSS, or Cascading Style Sheets are how you can customize your content. You may be familiar with inline style sheets (ex: <*span style="color:#000">the underlined part is the inline style sheet<*/span>) as they are often used to customize small segments of data, like in a single div, span or table. There are also external style sheets, which are files linked to in the head of a document, and internal style sheets, which are styles defined within a <*style> tag in the head of a document. Keep in mind that in practice, these tags don't have * in them - we're just using them as an example.

How do I use CSS?
CSS consists of using selectors (ex. p, .class, #id, etc) and properties (ex. color, font-size, etc) in declarations ( { curly brackets } ) to define the characteristics of content. When you become familiar with CSS, you can recall properties with ease and customize your content using inline style sheets in your tags. Otherwise, we highly recommend learning CSS with our favorite online resource, w3schools. You can reference this site when working with CSS to ensure your style sheets are accurate.

Where can I use CSS on Origin?
You can use CSS in posts and in custom member profiles. Advanced coders may use CSS in other profile fields, but this is not recommended unless you have a complete understanding of what you're doing.

How to use CSS in posts:
We have a special BBcode tag for CSS. It only works for internal style sheets however, and we recommend you put it at the top of your post. You can also place this part in your signature so that you do not have to copy/paste it into every post. It is as follows:

[*style] .selector { attribute:value; } [*/style]

How to use CSS in custom member profiles:
There are only a few customization options for the member profiles, mostly because there are already so few selectors you can fiddle with. For a completely customized profile, we recommend you input the following into the "Edit Profile Skin" field in the UCP:

body {
background-color: #hexcode;
background-image:url('image url');
}
.thead {
background-color: #hexcode;
background-image:url('image url');
}
#panel .upper {
background-color: #hexcode;
}
.statsbar {
background-color: #hexcode;
}
a:hover {
color: #hexcode;
}

body is the selector referring to the background. This encompasses the entire document. For this selector, you are only changing the background colour and image. Our skins use the size 1600x1050 for background images, but yours can be whatever size.

.thead is the header above your profile information. This usually appears as an image, but you can omit the background-image attribute if you just want a solid colour. If you choose to do an image, our skins use the size 1041x83.

#panel .upper is the header for the news box, toggle sidebar and the recent threads.

.statsbar is the thin bar above the Cbox with the 'Discord' and 'Open Cbox in New Tab links'.

a:hover is the colour of the text when your mouse hovers over it.

It should be noted that we have a 400 character limit on custom profiles - if your style sheet is over 400 characters, it will not appear on your profile. This is because we believe that you don't need to alter more than what we recommend. There is some leeway and you can add different attributes to each selector, but you cannot customize your profile beyond that.

Need any CSS help?
Consult with one of our staff members. We're all pretty much CSS experts. Or, give us a shout in the cbox; somebody else may be able to give you a hand!

---

Adding Additional Sidebar Options
To add additional sidebar options, use this code in your Other field:

Code:

</div><div style="padding: 4px 4px 4px 10px; border-bottom: 1px solid #000; border-top: 1px solid #000;  background-color: #bfbfbf; font-size: 9px"> <b>NAME</b> </div><br/>
<div style="padding-left: 10px; font-size: 11px;"> Contents </div>

---

Basic Table Guide

How to make a basic table:
In this section we'll cover how to make a basic table, with a background image, background color, and space for your image to show. The CSS inside of the [*style] tag cannot have line breaks.

It is important to know what pieces you are using in the [*style] tag. We'll be working with classes:
.class — a class has a period in front of it while inside of the CSS, but does not have the period when inside of the HTML when you call it with class="yourclass". For character tables, it is easiest to make the class your character's name and a number, or some kind of thing you can remember the table by. If you are using lyrics, maybe a word from them you remember, such as .name-word

We will use Rohan as our character name and Wolf as our word.
Our class for this table is .rohan-wolf

And these properties:
margin: auto; this centers the table

width: the width of your table; subtract padding from this number - for example, if your background image is 500px big and you want to have 20px padding each side, you add 20+20 (for each side) for 40, and subtract that from 500. So your width will be 460px

background-color: the color of the background where there is not image

background-image: url('link'); - the URL to your background image

background-repeat: whether or not the background repeats

background-position: how the background is situated with your table

^ These properties can be put together in the order that you see them, if you want to shorten it:
background: color url('') repeat position
and in use:
background: #hex url('') no-repeat center top

padding: four numbers that tell the padding between your text and the outside of the image. The order of these numbers is important, and they go: top right bottom left. You will mainly be changing top or bottom numbers depending on if you have an image positioned top or bottom; this tells the text to stay, for example, 400px away from the top so that your image can be seen. The easiest way for me to remember the number order is to think of a compass - North, East, South, and West. It is the same direction.

color: the color of the table text

font-family: (optional) a different font family for your table text

font-size: (optional) a different font size for your table text

text-align: (optional) aligns your text; the most popular is justify

border-radius: (optional) rounds the borders of your table

.class b: new brackets; how to make your bold tags a different color, like for speech

.class i new brackets; how to make your italic tags a different color, like for thoughts

.class p (optional) -- this is useful if you want your text to have a different background color, such as a lighter color, but you need to define all of your text elements in here then such as font-family, font-size, and color; you then need to tell this to use the bold and italic options, such as: .class>p>b {} and .class>p>i {}


Put those together, and you essentially have your CSS:
[*style] .rohan-wolf { margin: auto; width: 460px; background-color: #hex; background-image: url('link'); background-repeat: no-repeat; background-position: center top; padding: 400px 20px 20px 20px; color: #hex; font-family: arial; font-size: 11px; text-align: justify; border-radius: 20px; } .rohan-wolf b { color: #hex; } .rohan-wolf i { color: #hex; } [*/style]

This CSS section is what you will put in your signature if you want to use it as a signature table, so you only have to type the HTML when you write posts. The HTML is:

Code:

<div class="rohan-wolf"> your post here -- <b>"speaking"</b> and <i>thoughts</i></div>

So let's fill this out with the stuff you might add:

Code:

[style].rohan-wolf {margin: auto; width: 460px; background-color: #89b8dc; background-image: url('https://i.imgur.com/jqaAigg.png'); background-repeat: no-repeat; background-position: center top; padding: 400px 20px 20px 20px; color: #2c4c7a; font-family: arial; font-size: 11px; text-align: justify; border-radius: 20px;} .rohan-wolf b {color: #f6faf8;} .rohan-wolf i {color: #d5f7ff;}[/style]

Code:

<div class="rohan-wolf"> post here. <b>"speaking"</b> and <i>thoughts</i></div>

post here. "speaking" and thoughts

With optional paragraph (p) tag for a different background color on text:
Note in the HTML we are using and closing p as well as the div tag
This can also have a border-radius

Code:

[style].rohan-wolf2 {margin: auto; width: 460px; background-color: #89b8dc; background-image: url('https://i.imgur.com/jqaAigg.png'); background-repeat: no-repeat; background-position: center top; padding: 400px 20px 20px 20px; border-radius: 20px;} .rohan-wolf2 p {color: #2c4c7a; font-family: arial; font-size: 11px; text-align: justify; background-color: #bed8ec; padding: 20px; border-radius: 20px;} .rohan-wolf2>p>b {color: #f6faf8;} .rohan-wolf2>p>i {color: #d5f7ff;} [/style]

Code:

<div class="rohan-wolf2"><p> your post here. <b>"speaking"</b> and <i>thoughts</i></p></div>

your post here. "speaking" and thoughts

[Origin Cave]

Simple HTML Codes

What is HTML?
HTML means "Hyper Text Markup Language," and is used to describe simpler markup text that tells your browser how to display a webpage. While CSS is flowing and complex, HTML is the older basis (and a little chunkier) that CSS works alongside. We tend to use HTML on Origin for simpler code, like bolding text, a simple font color change," including links, or displaying images.

Adding Links
Links on Origin are usually automatically linked simply by pasting the URL, like so:

/guidebook.php

However, this is ugly and can be replaced with custom in-line text. For example, clicking this link--Guidebook--will take you to the Guidebook.

For this example, your code would look like this:

Code:

<a href="/guidebook.php">Guidebook</a>

And here's an empty version for you to copy and paste:

Code:

<a href="URL">Text Here</a>

You can also format the text in a link so that it's clearer that it is a link. For example, adding bold or font color tags around the link code will format the link's text. We'll have more examples of text formatting below, but as one example, here's an underlined, bolded link: Guidebook

Code:

<b><u><a href="/guidebook.php">Guidebook</a></u></b>

Images
Including images is great for including pictures in a character's profile outside the Profile Image space, or linking images into art threads and so forth. Use an "img src" tag, with the URL in quotation marks, to paste an image. (Protip: you can use "center" tags to align the image to the middle.)

Code:

<img src="/images/origin-av2.png?dateline=1481482485">

Here's another empty one for you to copy and paste:

Code:

<img src="URL">

If an image is too large, it will stretch the page. You can resize an image by adding a "width" modifier. Here's one with the "center" tag and a "width" modifier; you can change "100px" to up to "600px" or so without stretching the page (on profiles, this should be 500px max). Images resized in this way keep their aspect ratios (in other words, they're also automatically resized vertically so that they don't look stretched).

Code:

<center><img width="100px" src="/images/origin-av2.png?dateline=1481482485"></center>

Warning: never link an image that you are not, yourself, hosting on an image site. If you do not own the link, you may be stealing bandwidth or, worse, subjecting Origin to sanctions if the site's owner chooses to change what that link points to. For example, if you paste an image link directing to another site, and the site changes that picture to something inappropriate, Origin will then be displaying an inappropriate picture on its pages! Instead, use a personal account on (for example) Imgur, Postimg, or a similar site to host your images.

Simple text Formatting
Bolded Text, Strikeout Text, Italicized Text, and Underlined Text are all ways to add emphasis of varying kinds to your text.

Code:

<b>Bolded Text</b>
<s>Strikeout Text</s>
<i>Italicized Text</i>
<u>Underlined Text</u>

Profile Linebreaks
In character profiles, paragraphs are not automatically broken up as typed (as they would be in forum posts). You will need to add the following code for single or double linebreaks.

Code:

<p> - double linebreak/new paragraph
<br> - single linebreak

Font Modifiers
Font color, size, shadow and type can easily be modified for a single line, or reused to denote speech, thoughts, and so on.

Purple Font

Code:

<font color="purple">Purple Font</font>

Span styles can be used for all three;

Shadowed, colored text of a larger size and font family Garamond.

Code:

<SPAN STYLE="text-shadow: 0px 0px 8px #210f38;color:#481a82; font-size:14px; font-family: Garamond;">Shadowed, colored text of a larger size and font family Garamond.</SPAN>

These features can be changed or mixed and matched as you wish. Be sure to use a "web safe" font if you use fonts single lines like this; "web safe" means fonts installed on most computers and browsers. Using a non-"web safe" font just means it won't display the correct font to your readers.

Alignment
Text and images can be aligned left, right or center. Either of these will work for center alignment:

Center

Center

Code:

<center>Center</center>
<p style="text-align:center;">Center</p>

And left/right can be done like so:

Left

Right

Code:

<p style="text-align:left;">Left</p>
<p style="text-align:right;">Right</p>