I've had a lot of people ask me what the codes are that I used to customize my profile. It has become a hassle trying to explain it over and over, and I haven't found any blogs that contains all the information needed. There is quite a bit you can do to your profile. If you need anything else, message me for more information. There is a way to make things transparent, change the font, etc. I can help with that, but I have seen few use it so I'll just go by personal needs with that. So here you go.
Note: The codes all contain brackets, and in order to prevent the codes from activating I have placed spaces after and before the beginning and ending brackets. These spaces DO NOT BELONG IN ORDER TO ACTIVATE CSS CODING
Basics
To bold text type [ b ] text [ /b ]
To underline text type [ u ] text [ /u ]
To cross out text type [ strike ] text [ /strike ]
To center text type [ center ] text [ /center ]
To change the word color type [ color=color here] text [ /color ]
Colors can be hex codes WITH THE POUND SIGN, or simply color names
To insert an image type [ image] Url of desired image [ /image ]
To insert a link type [ a ] link [ /a ]
To insert a link with substitute text type [ a=link ] Substitute text [ /a ]
Backgrounds
There are two main areas that you can change the image of. The first area is called the body. The body is the backmost image of the profile, behind the text boxes, bio, and other information.
This can be customized with preset images under your settings. It can also be customized using the following code;
[ style ]body{background-image:url(Link to desired image here)!Important;color:Desired color here};[ /style ]
The second area that can be modified is within the text boxes and bio, and it is called the TD.
The code is similar but there are minor changes, so beware. The code to change the TD is as follows;
[ style ]TD{background-image:url(Link to desired image here)};[ /style ]
Another area that an image can be placed in substitute for presets is the comment box, which is also very similar to the previous codes;
[ style ].form_textarea{background:URL(Link to desired image here;}[ /style ]
>Can't see what you typed? use this code to change the color of the text within the text box!<
[ style ].form_textarea{color:Desired color here}[ /style ]
You can also change the color of the other boxes/tables such as the Badges area and the Profile Pages section
Badges:
[ style ]Tbody{background:color here;}[ /style ]
Profile Pages:
[ style ]TD.Profile_Pages{background:color here;}[ /style ]
You can also change the color of the bars in the title section of each ares (they are blue by default)
[ style ]Td.title{background:color here;}[ /style ]
In this bar you can also place images before and after the text
Before:
[ style ]TD.title:before{content:url(Link to desired image);}[ /style ]
After:
[ style ]TD.title:after{content:url(Link to desired image);}[ /style ]
The area above your entire profile, containing your setting and log out, can be changed too.
[ style ]div.navbar{background:color here;}[ /style ]
The alert pop up (when you get a new message) can be changed
[ style ]div.alerts_popup{background:color here;}[ /style ]
Overall Colors
Another thing that can be modified is the color of text overall. Now, as already shown, you can change individual text with codes. This code changes all the text on your profile EXCEPT LINKS.
[ style ]td{color:Desired color here;}[ /style ]
The next code changes ONLY THE COLOR OF LINKS WITHIN YOUR PROFILE
[ style ]a{color:Desired color here;}[ /style ]
Avatars
In your comments, the users avatar is shown. It is 30 pixels high by default, and it can be changed to any desired height (note that it automatically scales the width)
[ style ].avatar{height:desired heigh (ex. 60)px;}[ /style ]
Tips
- When coding, use a PC, the DSi/3ds only allows so much to be typed in a text field
- Copying and pasting the url is easier than trial and error typing it
- When inserting an image, use the direct link (Right click -> Copy image url)
- These codes also work in blog posts and on group pages
- SOME codes work in comments
- When choosing images to use at backgrounds, keep in mind that text is should still be legible, so do consider using a lighter image or changing the color of the text
Thank you for reading, I hope this was helpful. If there is anything you'd like to see added, please ask. Also, for a list of colors that can be used in the coding, please see my Color Chart blog. I owe credit to Randy for giving me the badges code. It would not work for me and I had an OCD fit and a meltdown trying to decipher the code, and had to ask him to give it to me. Thank you, and have a lovely day~