Why are they so weird?
I wanted to feel cool and make them like serial numbers, but don't be fooled they aren't random numbers and letters.

Code Series
CC - Just means Cera Code, they're random thoughts I have and make into a code.
RC - Codes that have been requested in the past and since abandoned and revamped.
VS - Vocaloid Series (A special code series inspired by vocaloid songs).
GS - Gamer Series (Inspired by games or game characters).

The number usually indicates the order I either thought of them or began working on them. Not when I finish them.

B - Beginner.
E - Easy.
M- Medium.
H - Hard.
A - Advanced.

Remember, this is relative. I'm fairly skilled with CSS so it is rather difficult for me to guess at how novices will feel when working with a certain code. I've tried to make them as friendly as possible to novices, which coincidentally makes it a little harder to do really specific CSS edits. Codes marked advanced, however, are the ones I struggled with while making them.

N - Non-tabbed. You don't have to click anything to view all the content.
T - Tabbed. You'll have to click stuff to see everything.

Mobile Compatibility
M - Mobile compatible.
S - Semi-mobile compatible. It usually looks really terrible and is a nightmare.
I - Mobile incompatible. If you want people to be able to see your profile on phones or iPods or anything with a screen the size of a palm, don't use the codes marked with this. Or anything that requires a finger-touch usually.

This is likely the least accurate thing the title tells you, but I do try to test them all on my iPod.

It's a title. It's kind of descriptive. What more do you want?

+ - Precoded color alternates are available.
++ - Precoded layout/arrangement alternates are available.

II. Definitions

In HTML you will see a lot of < >. This is called a tag. When you open a tag such as < b > you must close it with < /b >. Tags can be used to create different things. The example I just used would make the text between the tags bolded. Primarily, tags are used to create elements. Such as "div"s, "p"s, and "a"s. An < a > tag will create a link element. A < p > tag will create a paragraph element. Both of these have a standard appearance without any outside fiddling. Linked text will appear blue and turn a purple color after its been clicked. Chunking up text into paragraph elements will give it a nicely spaced look. A div tag, however, creates a division element and they generally have a default setting that you're not going to notice the difference when you use them that way. Divs are the most useful in creating visually appealing pages because of this, but all elements are customizable. It is important to realizes that tags are what the HTML part is. The CSS part is explained in the next three sections.

CSS stands for Cascading Style Sheets. It is usually a separate document ending with .css that is linked to an HTML document. RPC doesn't really have this capability. However, both can be written in the same space just fine by placing CSS information between the opening tag < style > and closing tag < /style >. Ideally, you shouldn't have it inside any div or body tags, but it will still work inside the latter. As I write this, however, RPC has a three box structure for creating profiles. The first box is JavaScript, the second is for CSS information, and the last is the HTML (AKA all your element tags).

Selectors in CSS are used to select and style elements on the page. Examples would be "p" ".tab" and "#mugshot". The first selects all paragraph elements (< p >), the second selects all elements assigned with "class=tab", and the last selects the element assigned with "id=mugshot". A selector will be followed by a { to open it up for styling and then is closed by } when it's done. I personally refer to the CSS selector and everything inside its { } as a section since they make for nice blocks of text.

Between the { } in CSS sections are what actually do the styling. These are called attributes. Anything you want to change visually can be done using attributes. Your type of font, the color of the text, the width of a div, etc. Most attributes are listed on one line at a time for clarity, but it's not necessary. The important parts are the colon (:) and the semi-colon (;). The left side of the colon is the name of the attribute and the right side is the value. The semi-colon is how the browser knows that you're done playing with that attribute. A browser doesn't know a new line in a document correlates to something new on the page. Some attributes will accept a list of values as well so the semi-colon is very important. Failing to have one will stop the browser from reading the rest of the CSS in that section. Most attributes are pretty obvious, and when you want to change that attribute, all you need do is change the value to what you want. For example: "background-color:red;". Background-color is the attribute and it's value is red.

Remember that the browser cannot guess what you want. It has specific names. "text-color" is not an attribute, but "color" is.


In your body section (or other section title) between the { } should be an attribute that reads "background-image: url( );" find your image, copy it's location and paste it between the parenthesis.

If you didn't already have a background attribute you may need to also add in "background-repeat:no-repeat;" to keep it from repeating.

If your chosen image seems to be leaving an annoying chunk of your background uncovered and you think the image will look fine stretched, you can also add in "background-attachment:fixed;" and "background-size: 100% 100%;" to fix this.

There's four ways to designate colors:

Color names - You can just write in color names. Appears as: "background-color:black;" or for text: "color:white;" or for borders: "border:1px solid gray;"
Examples: black, blue, cyan, palevioletred

Hex codes - A six numbered/lettered code spanning from 0-F. Appears as: "background-color:#000000;" or for text: "color:#FFFFFF;" or for borders: "border:1px solid #808080;"
Examples: #FFFFFF (White), #B22222 (Fire Brick), #008080 (Teal), #DAA520 (Dark Golden Rod)

RGBA - Usually I only use this when I want the background to be see-through but not the text or images. The code looks kind of unsettling to novices. It appears as "background-color: rgba(0, 0, 0, 1);". RGBA stands for Red, Green, Blue, Alpha with the numbers in parenthesis corresponding to this order. Red, green, and blue is a number between 0 and 255. Alpha is a number between 0 and 1, it's a percentage and it changes opacity/transparency. If it is set to 0 then the element/div will be completely transparent. If set between 0.01 and 0.99 then the element/div will be see-through. Set to 1, it is completely solid. DO NOT BE AFRAID TO CHANGE THIS TO A NAME OR HEX CODE. Simply make sure that the "rgba()" parts are fully deleted.

HSLA - This is like RGBA and is designated by "background-color:hsla();". I'm not really familiar with what kind of values it accepts as I personally don't use it but it is an option. The letters stand for Hue, Staturation, Lightness, and Alpha.

I usually consult very basic colors here. If you have a specific color in mind but the name doesn't work you can find most color hexes on wikipedia or even websites for paint.

Find your body section and between the { } on a new line type in a "font-size:100%;". If you want your text bigger then write a number greater than 100%, if you want it smaller then write in a number less than 100%. This will change the size for the entire profile. If you want to change only a certain section of text then you will have to locate the matching id (#) or class (.) for that div or other CSS selector. You can also do it by pixels which would look like "font-size:12px;". A normal print size is usually about 12px for basic fonts. Other units exist but require explanation to understand.

I would stay in the 75%-130% range. Or the 8px to 24px range. I personally prefer text bigger so a code may already have this attribute in it.

Most likely you will need to change the #mugshot, .mugshot, or #mugbox section in your style. The element you're looking for will be either height or width. If both are listed then you should look at #mugshot (or .mugshot or #mugbox) img section (likely right beneath the other section) to see if it has height:100%; or width:100% and adjust accordingly.

If you've ever wondered why out of all the codes I offer so few specify the exact size of the images, this is because I rarely set both height and width dimensions for images. Setting both will often squish or stretch the image a user attempts to insert which is a look I do not care for. Sure, it's easy to crop and resize images as needed, but I decided to do my best to remove this middle step.

There's a feature in html that allows you to pair descriptions with your images that will display if the image fails to load. People viewing your profile/page who require a text to speech program to enjoy the internet will also have this description read aloud by the program. It's pretty easy to do just add in:

alt="Description here"

so it appears as below:

< img src="image url" alt="description"/ >

Most up-to-date versions of my profile codes should have this already in the image element.

If you're here reading this then clearly you care about the profile you're presenting and I strongly encourage you to add/fill out this bit of code if you feel you're capable.

To add more tabs you basically need to copy other parts of your coding. Step one is to add more internal links to your navbar. These read as "< a href="#somenumber" >Titlemaybe< /a >". Some of my codes have shapes that are the links and they don't have titles or contain an image. The number that goes after the # will depend upon how many you already have. Actually it doesn't have to be a number at all it just needs to match the second part's id.

Secondly, the part of your code that dictates the content to be linked needs to be copied. MOST of them will probably look like this:

< div class="tab" id="somenumber" >
Some information here
< /div >

Or possibly this:

< div class="infobox" id="somenumber" >
Some information here
< /div >

You really just need to look yourself to see what yours looks like, but most will be like one of these two, and this needs to be placed directly after the closing "< /div >" of your preceding tab. If you go past more than one "< /div >", most likely you've gone too far, but there are exceptions like in CC#02 Bubbles. The most important thing is that your "a href=" needs to match the "id=". If this makes no sense to you at all by this point, you should... probably not add any more tabs.

The coding for them appears as this: ​

::-webkit-scrollbar {
::-webkit-scrollbar-thumb {

The first background-color corresponds to what color the track will be. The thumb background-color is the portion that's dragged. If you don't touch Google Chrome with a ten-foot pole then I suggest deleting all webkit-scrollbar aspects as you can't enjoy them. Doubly so if you recolor the codes as just because you can't see them doesn't mean others can't. Don't have pink scroll-bars on your blood-lusting werewolf.

RPC now uses HTML5 audio tags. Thankfully, this is much easier to explain than youtube embeds. Simply pick where you want the player to go (it will not autoplay so you better make sure it's visible) and then insert the following code:

< audio controls >
< source src="url here" type="audio/mpeg" >
< /audio >

I have given the code for an mp3 file, this means that your music url must end in ".mp3" or it will not work. You will need to find a site that hosts music. I host my own music on Kiwi6.com most of the time even if I could find it elsewhere. To host something yourself, find a place that provides file storage and hot-linking. You also cannot make this music player do multiple songs very easily. You would need to know JavaScript which isn't allowed on RPC profiles unless you're a donator.

Step 1: In the CSS of a code locate the #credit selector and chage the position attribute from position:fixed; to position:static;

Step 2: If the code has a note detailing step 1, you're done. This step is already complete. If not then scroll down to the bottom of a code to cut and paste the entire tag to wherever your little heart desires. The tag should appear as something like this:

< a href="http://wix.cera-nore.com/" target="_blank" title="" >
< img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/ >
< /a >