Justin789 (2015-04-29 09:00:35)

---

Hello there i'm Justin as u can tell and today we are going to do profile codes.


Start out with the basics

[ b] [/ b] = Bold
[ i] [/ i] = Italics
[ u] [/ u] = underline
[ s] [/ s] = strike-through
and finally
[ hl][ /hl = highlight


[style ]body{background:Color Here;}[/ style]
This code will put a color for your outer background.

[style ]body{background:url('Image url here';}[/ style]
This code will put an image as your outer background.

[style ].content{background:Color Here;}[/ style]
This code will put the color you choose as your main background.

[style ].content{background:url('Image Url Here';}[/ style]
This Code will set an image as your main background.

[style ]div{background:url('Image Url Here';}[/ style]
This code will set an image as your entire background.

[style ]div.content{opacity:0.65;}[/ style]
This code will make your inner background and commentboxes transparent so you can see the background underneath. Increasing the number will actually make it less transparent, just so you know. 0.0 will make your profile invisible.

[style ]body{background:color here; background-image:color here; opacity:0.7;}[/ style]
This code allows you to design both backgrounds at once as well as adding opacity. It works with images too. Just change 'color here' to 'url(Url Here)'.

The members menu is basically the log-in menu. It's also the menu that says pm, and log-out.


div.members_menu{color:lime; background:black;border:2px double lime;}
This code lets you design the log-in menu any way you want.

div.members_menu{background-image:url(Image url here);}
This code lets you put an image as a background for your log-in menu

.members_menu:before{color:green; content:'Words you want to say here';}
You can write text in the menu with this code. Just change the word from before to after if you want to write after the menu. You can even use both!

With these codes, you can style the back to the menu button.


div.menu{color:black;background:green; border:5px ridge silver;}
These code lets you design the back to the menu button any way you'd like.

div.menu{background-image:url(Image Url Here);}
This code lets you set an image as the background for the back to the menu button.

div.menu:after{color:lime;content:'Words you would like to say here';}
This code lets you write text in the back to the menu button. Just change the after to before if you want to write before it. You can even use both.

This is the part of your profile that would say: Justins's profile or whatever your name is. It's commonly called the H2 menu.

h2{background:black;color:lime;font-weight:bold;border:8px double lime;}
This code allows you to design your profile name however you like. Personally though, I'm not a big fan of the border, but it's up to you.

h2{background-image:url(Url Here);}
This code lets you set a image for the background. I've never actually tried this code, but I'm sure someone can make it work creatively for their profile.

h2:before{content:'Words you'd like to say here';color:blue;}
This code lets you write words before (or after if you replace the word 'before' in the code with the word 'after' your profile name.

h2{content:url(url);}
This code lets you put an gif for your profile header. But careful though. If you do this, you can't access your edit page unless you bookmark it.

This is the box just above the comments. It usually says "Comments!" unless you edit it with the following code.


div.titlebox:before{color:red;content:'Words you want to say here';}
This code lets you put text in your title box in any color you want. Remember you can also put words after if you switch the word 'before' to 'after'

.titlebox{background-image:none !important; background-color:black !important;color:white !important;}
This code is a very simple way to change the color of that ugly textbox (no offense) it looks much nicer when it matches the rest of your profile.

Now that we've covered how to style the comment title box, why don't we cover the Comment Boxes. These are where you leave a comment on someone's profile.


.commentbox_1{content:lime;background-image:url(Image Url here);}
This code lets you use an image for the first comment box. Unfortunately, there's no code for just a solid color background. If you change the content color, you can change the color of the text.

.commentbox_2{content:green;background-image:url(Url Here);}
This code lets you use an image for the second comment box. If you change the color of the content, you can change what color the text is for that comment box.

.commentbox_1{content:white;background-color:Color Here;}
This code is the first discovered code for making your commentbox a color instead of a picture. simply repeat for Commentbox_2.

.post_comment{background:Color Here;}
This code allows you to use a solid color for the background of the post comment box.

.post_comment{background-image:url(Image Url Here);}
This code lets you use an image for the post comment box.

.post_comment textarea{background-image:url(Image Url Here);}
This is a very exclusive code, given to me by my close friend Leadkisses. Without her help, I never would have known about this. This code lets you put an image in the text box where you write your comments.

.Post comment textarea{border:5px double green;}
This code allows you to put a border around the post comment text box.

.edit_warning:before(or after){content:'Text inserted here.';color:#173B0B;}
This code will put text in the warning box either before or after the text. And you can change the text color as well. My advice, make it say something funny

.edit_warning{display:none;}
This will remove the edit post altogether.

input{background-color:black;color:lime;}
This code colors the post comment button as well as the view user's profile bar. This code was a life-saver to me because I was always frustrated by the annoying colors of the buttons.

These codes cover the links on your profiles and hovers. (links are things like friend names, my profile, 2 pms, spoilers, etc. that you can click and open. Hovers is things that change when you move your mouse over them {pc only}.)


a:link{color:Color Here;}
This is a very basic code that changes the color of a link on your page.

a:visited{color:Color Here;}
This code changes the colors of your visited links. Feel free to be creative with this to help it match your profile.

a:link{text-decoration:none;}
I love this code because it gets rid of the underlines beneath your links.

a:visited{text-decoration:none;}
This codes removes the underlining beneath visited links.

a:hover{text-transform:uppercase;}
This code transforms links you hover over into uppercase letters. Thanks to XxElainexX for suggesting it.

a:hover{background-image:url(Image url here);}
This code makes a pic appear over any link you hover over. My advice, pic a small image. Remember, links are small. Transparent images are awesome!

a:hover{border:2px ridge lime;}
This code puts a border around any link you hover over. For more info on border types, see the below section: "Borders"

body, a:hover{cursor:url(Url Here), progress!important;}
This is an AWESOME code that changes the mouse cursor on your profile to anything you want!!!
Make sure to leave the comma in though. Oddly enough, the code won't work without it.

.content{color:Color Here;}
This code sets the main color for the text on your profile. It also can be overridden, which I'll show you how to do in the below section: "Colors"

.content{color:yellow;font-weight:bold;text-decoration:underline;}
This code does some advance designing to your profile text. Personally I don't see why you'd want it to look this crazy; but if you want to, go right ahead

.content{text-align:center;}
This code centers the text on your profile.

.content{font-family:Type of font you want;}
I LOVE this code. It changes the font on your profile to any font you'd like. However, please note it's only visible on the pc, and not all fonts work.

body{background-color:none!important; color:Color here;text-shadow:1px 1px Color here, -1px -1px White; font-family:none;font-weight:bold;font-size:15px ;}
This is a very advanced code that applies shadowing to your text on the computer. Personally, I think it's very hard on the eyes.

.content{text-shadow: 5px 5px 5px #FF0000;}
This code is actually a much more simple way to add shaded text to your profile if you want more than just the body to have shading.

.content{font-size: 40px;}
This code allows you to resize the text of your profile. The higher the px, the larger the text will be.
Both of the two above codes were given to me by Cr1tiKaL, and as always, I always appreciate the wonderful help from other users ^-^

.content:before{color:lime;content:'Words you want to say here';}
This code will put words ABOVE your profile name. (ilia's profile)

.content:after{color:red;content:'Words you want to say here';}
This will put words at the bottom of your profile and if you're on a 3ds, it'll also put these words just above your friend list.

This code lets you put a border around your entire profile. If you've been following along however, you would already have some experience with it if you bordered some of the menus in the previous codes.


div.page_container{border:10px outset green;}
This code puts a border of your choice around your profile. If you increase the 10px to a larger number like 15px, the border size increases. Decrease it, well you get the picture.

These are the signatures that appear in your comment boxes


.signature:before{color:lime;content:'Words you want to say here';}
This code lets you write something before the signatures(or after if you change the word 'before' to 'after'. Personally, go with before. If your commentator has a picture or something large in the signature, you won't be able to see your message if you choose to put it after.

.signature img{display:none;}
This code is awesome because it removes any pictures in the signatures. Saves your profile from taking forever to load.



Friends list
This is the spoiler containing your list of friends. Kinda self-explanatory


a.friend_links:after{color:green; content:'Words you want to say here';}
This code lets you put words after your friend list. (or before if you change the word 'after' to the word 'before'

a.friend_links:before{content:url('Image Url Here';}
This code allows you to put an image before your friends in your friend list. (or after if you change the word 'before' to 'after'

.friends_spoiler_full{background-color:color Here!important; color:Color Here!important; border:10px double black!important;}
This is an awesome code given to me by a very close friend of mine: Song_of_Storms. I've been looking for this code for a long time and wouldn't have been able to find it without his help.
This code lets you style the friend list spoiler. I added on the border styling for you and it looks great on profiles.

This is the portion of your profile that has the respect bar. (ugly little thing in my opinion ^^'


Span.rep_title_span:before{color:lime; content:'Words you want to say here';}
This code lets you write words before or after (change the word before to after) the percentage beneath your rep bar. For more codes, check out the below section entitled: 'Codes I find Annoying'


This is by far my favorite part of styling a profile, your header. It's a shame the header is only view-able on the 3ds.


img.header{height:0px;} div.header{height:200px; background-image:url(Image Url Here);}
This code puts an image in the header. Leave the first height at 0px. It makes the 3dsplaza header disappear. The second height: 200px adjusts the size of your new image. Feel free to adjust the 200px to the size you like.

img#header{display:none;}.header{height: 160px; background-repeat:no-repeat!important;background:url(Image url here);background-size: 100% 80%;}#navbar{margin-top:100px;}
This code allows you to change your header on the computer. I encourage you to adjust the sizes to your liking, although please remember it will also effect the appearance of your 3ds header.


div.header:before{color:green;content:'Words you want to say here';}
This puts text up in the header. There is no difference between putting the text before or after.

This is the spoilers you put on your profile.


[spoiler =Name of the Spoiler Here]Text and images you want to write, here. you can use the return key, that's totally fine. Put this at the end[/ spoiler]
That above code is the example for a spoiler. Make sure you omit the space between the spoiler and the =, and the spoiler and the /

[cspoiler =Name of title here]Text and images go here.[/ cspoiler]
This above code makes a clear spoiler. Again, remember to omit the spaces.

[spoiler =[green ]use[/ green] this [ red]to[/ red][ blue] color[/ blue] [ orange]spoiler titles[/ orange]]Make sure to put both brackets after your color[/ spoiler]
You can use this code to color your spoiler titles with any color you want, even use it multiple times to make the following

To make the famed unopenable spoiler, you can do one of two things. The first is easier.

1: Put a contraction in your spoiler subject: can't, won't Bob's, Uncle Lue (just kidding with that last one )

2: Make a nesting error in your spoiler by using a code or something else wrong.

div.spoiler_content{background:green; border:5px grey;color:lime;}
This code designs the spoiler with backgrounds, text color and such. Please note that this code does not work on clear spoilers.


Thank you so much this tuck me a week to do so ya thats it byeeeee.........

---

DrakeJericho (2015-04-29 11:28:43)

---

There are a number of reason this thread is to be closed.

- Wrong forum. Belongs in 'Help' or 'Profile Design'.
- All you did was copy-paste ilia's guide, which is thread stealing, which is unallowed.
- There are hundreds of threads like this.

Closed.

---