ilia (2013-12-21 21:35:24)

---

Welcome to the Complete Guide to everything about Profile Designing.

Hi. My name's ilia and I'm a Profile Designer. Although I haven't been on Plaza that long, (not even a year yet) I wanted to do something to really help all you plaza users ^-^
To those of you who remember my old guide, I was locked out of my account by some form of glitch, yes glitch. I could no longer maintain my guide so it became necessary for me to create a new one that I could manage.

So this is my complete comprehensive guide of just about every convenient and useful Profile Designing code there is. I haven't taken the time to sort it between beginning users and advanced users like myself, but I know all of you will have a lot of fun using this. So enjoy ^-^

Copy-paste to your heart's content, because I know that's what everybody does. Lol, no worries. I don't mind one bit.

Oh, one more thing before we get started. At the very bottom of the page, you'll find some important notices. Make sure to read through those.

And if you see this image by any code: it means that code is actually hard to find. So have fun with them

---

Backgrounds!
So, to start I chose backgrounds as our first topic. Obviously, these codes put backgrounds onto your profile.

[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)'.

---

Members Menu
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!

---

Back to the Menu
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.

---

Profile Header 2
This is the part of your profile that would say: ilia'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. So make sure you bookmark your edit page before you use this code.

---

Title box
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.

---

Comment Boxes
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.

---

Links and Hovers
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.

---

Profile Text
These codes are for designing the text on your profile.

.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 ^-^

---

Text at the top and bottom of your profile
It's all in the name This will put text at the top and bottom of your profile.

.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.

---

Borders
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.

---

Signatures
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.

---

Rep Bar
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'

---

Profile Header
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.

---

Spoilers
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 example:
Example!


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.

Example

(Unfortunately at the moment, it appears someone fixed this glitch...)


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.

---

Colors and Hex Coding
This is anywhere from short-cut colors to advance Hex codes. Have fun and enjoy some variety

To start, I'm going to list what I call short-cut colors. For these to work, remember to omit the spaces in the brackets.

[green ]green[/ green]
This is my favorite color
Other available colors
red
orange
yellow
lime
blue
purple
pink

Now on to the intermediate colors.

[color =maroon]Text[/ color]
This code, if you omit the spaces, will do more unique colors like: Maroon, teal, violet, tan, grey. Test them out.

Colored Boxes

[box =black]Text[/ box]
This will put a black box as the background for your text.(omit spaces) You can't use the box code and the intermediate color code at the same time so make sure to use a box with short-cut colors.
Example:[box =black][red ]Text[/ red][/ box]


[rbox =black]text[/ rbox]
This code will make a round box. (omit spaces)

[sgauge =green,74]
This code will make a gauge of any color and the percentage you want. Just change the number (omit spaces)

example:

[rgauge =maroon,15]
This will make a round gauge. (omit spaces)

example:

Now for the Advanced Colors: Hex Codes.
Hex codes are sorta like colors to the extreme. You see them as #00FF00 numbers and a hash tag. You can use these in any of the codes above that asks for a color, or use them in the color= section.

Here's a link that shows you all the HTML color codes Color Chart
Go ahead and use that code to select/create your own color. Memorize the number you get #071907 ect. and then apply it to any code.

Example: [color =#071907] or {content:#071907} {border:10px soild #071907}
Any codes ^-^

---

Codes I find Annoying
These are several codes you can use that I don't particularly like. Feel free to look through them though.

div.gauge_container{background:green; border:8px outset silver;}
This code lets you border the respect meter. You can design a background and border

div.gauge_container{background-image:url(Url Here);}
This code lets you put an image as the background for your respect meter.

.signature{dispaly:none;}
This code removes the signatures from your comments. Where's the fun in this? I think the signatures are the best part.

div{border-radius:25px;}
This code should curve the borders of anything on your profile. I've never actually used it so experiment with this as you wish.

Bordering words you write in menus.
Yes, when you insert text in the menu button and anywhere else, you can actually border the text. Just add {border:10px dotted green;} or any style of border that you like.

img{border:5px inset black;}
This code borders all images on your profile. I've never found this code very appealing.

[simg ]Url Here[ /simg]
This lets you put an image anywhere you want on your profile. (omit spaces) The only problem is, this code makes these images GIGANTIC!!!!
Definitely not a good look ^^'

div.header{display:none;}
This code removes the header all together. Personally, why not just put something in the header instead, but it is your profile I guess.

.content{background:url('Image Url Here';background-repeat:no-repeat;}
This code I guess is somewhat useful. Tired of your backgrounds repeating? Just use this code to make the background a single picture instead of repeating across the page.

---

Text and Other Shortcuts
This is a very short section on text decorations. Make sure to omit the spaces in the brackets.


[center ]This code centers text[/ center]
Example: This code centers text

[u ]This code underlines text[/ u]
Example: This code underlines text

[b ]This code makes text bold[/ b]
Example: This code makes text bold

[i ]This code italicizes text[/ i]
Example: This code italicizes text

[s ]This code Strikes out text[/ s]
Example: This code strikes out text

[hl ]This code highlights text[/ hl]
Example: But it only highlights in yellow

[line =Number here%] Makes a line of any size you want

---

[img ]Image url Here[/ img]
This code puts an image on your profile.

[img =WidthxHeight]Image URL[/ img]
This code lets you manually size an image.

[link ]URL here[/ link]
This makes a link

[link =URL here]Words here[/ link]
This allows you to name your link

[link =URL here][img ]Image URL here[/ img][/ link]
If you want to make an image link, use this.

[forum =Words here]ID here[/ forum]
This is very useful if you want to send people to a certain forum because it automatically puts people on the right forum for their device. And you can name your link too. I used this code on my profile as well.

Have you ever wanted to post a youtube video? Here's how.
[youtube ]Video id [/ youtube]

To find the video id, The video iD would be just like the following:
www.youtube.com/watch?v=gFmY8ex83Pc
Copy the section that's in bold and paste it in for the video id.
Here's an example of how it works. This is a fake movie trailer for my favorite tv show: Merlin. (it's quite funny )
Please note that the youtube videos only play in the forums.



[detect= device here]Words here[/detect]
This code let's you detect what device is being used: either pc, 3ds or dsi
[detect=3ds]Example: Welcome to the 3ds version of my profile guide[/detect]
[detect=pc]Example: Welcome to the pc version of my profile guide[/detect]
[detect=dsi]Example: Welcome to the dsi version of my profile guide[/detect]

---

(Detect project?)

Did you know that there's more to the detect codes than meets the eye?
For example:
[ detect = 3ds][style]div.titlebox:before{content:'Check out all the 3ds ';}[/style][ / detect]
If you used that (omit spaces) when people read the titlebox above your comments on their 3ds, it would say: 'Check out all the 3ds Comments.'

You can even combine this by adding:

[ detect = pc][style]div.titlebox:after{content:' for the Pc version of my profile.';}[/style][ / detect]
Add the top two codes and you'll have a Titlebox customized for both pc and 3ds. (sorry dsi users ^^' )

Personally, I use this for advanced codes. If you have a code that only effects the Pc and will ruin your 3ds, used the [detect =pc] around the codes. That way you will keep your profile organized and undamaged.

---

Schematic Tags
Everyone always asks about this and what it does. It's for redesigning the respect button to the old styles.

Here are the only known styles.

this.profile.repbar=dark
If you enter this, you'll turn your respect buttons to dark red and green

this.profile.repbar=blue
This one is my personal favorite because it's the old dark colored one. It makes the buttons dark blue.

this.profile.repbar=old
This button makes the respect button into rounded rainbow colored.

---

Usefulness of content url (for advanced users)
This is a brief discussion on the uses on the {content:url;}

As you might have noticed with the h2{content:url...}

The content:url will put pictures into basically anything and can be used for a wide variety of things.

For example put:
div.menu{content:url(Url Here);}
This makes the back to the menu button turn into a picture. Now I wouldn't suggest using it because most pictures are enormous and not everyone knows how to resize that.

You can use this in just about any code although it does have some problems. Be careful, if you don't plan how best you use this, the {content:url} can be quite a handful.

Want a tip? Try using before/after in your code

Example
h2:after{content:url(Image url here;}
This will put a picture after your H2.

---

Important!!!

Please read the following information before starting on your profile. These facts will answer alot of potential questions.

1. If your codes aren't working, let me remind you that you have to put [style][/style] around the codes. I removed this in most of the codes above for convenience, but if you leave them out. The codes will not work.

2. You put all the codes in the ''about me'' box on your profile.

3. In all the codes that include text, be sure not to use any contractions and apostrophes, or the codes will not work.

4. Please note that certain codes and styles don't always work for every profile. There are a number of profiles (and I have no idea why) that just can't use certain codes, such as the div.menu or even things as simple as the [purple] short cut color. I deeply apologize for those of you who enter the codes correctly and discover this. My old profile couldn't use the color purple or the div{background:url...}. But for the most part, just consider that you might have entered the code wrong. (If you need verification that the code does not work, just contact me and I'll check it out for you.)

5. I know this was a big question for me when I was a newbie. How do you get a url? Well the answer is, only on your computer. Find a pic you like online and right-click on it. Then select ''copy image Url'' or whatever seems closest to that if your computer doesn't have that option.
From there, paste the url in the section it's needed in your codes.
(noted you can get a Url on your 3ds as well, but that tends to cause more problems than it's worth. I'd suggest using a Pc unless otherwise impossible.)

6. Now here's something very important for all the people I've come across that have this problem. A few people have gotten their hands on the code that makes their profile invisible. Sure this is awesome, but they quickly change their mind when they find out that they can no longer access the ''edit profile'' page. To access the ''edit'' page, type in the following url
http://3dsplaza.com/members/profile_edit.php?user=(profile name here)&urlbase

(and the pc version of this)
http://pc.3dsplaza.com/members/profile_edit.php?user=(profile name here)

---

Credits and updates

---

Thank You!!!

A huge thank you goes out to all of you that have chosen to use my guide, as well as those of you who have been so kind as to solicit information. It's been fun and I'm glad I could finally be of some help to everyone.

If you have any questions, leave a comment. I wouldn't suggest PMing me, because I have the tendency to never check there. ^^'

And if you like this guide, be sure to spread it around. I'd really appreciate it.
Comments are appreciated whether they pertain to the guide or not. Thanks everyone.

I'm a profile designer. And I believe everyone can become a profile designer too, all you need is a little help

---

So tired....

This post has been edited one or more times, the last time was:
2015-12-09 19:19:04

---

ilia (2013-12-21 22:14:52)

---

This post has been edited one or more times, the last time was:
2013-12-21 22:21:19

---

ilia (2013-12-22 19:30:42)

---

---

ilia (2013-12-27 09:06:47)

---

---

PewdiepieParty (2013-12-29 21:21:09)

---

I have a suggestion, you should add,
This v
So here is the first guide that talks about animation via css.

DISCLAIMEThese codes are primarily for the 3DS and may or may not work for other devices)

PART OF PROFILE refers to css entities such as: a, span, h2, div, .commentbox_1, etc.


COLOR CHANGING WORDS:

[style]@-webkit-keyframes color{0%{color:red}20%{color:yellow}40%
{color:green}60%{color:cyan}
80%{color:blue}100%{color:magenta;}}part of profile{-webkit-animation:color 1s infinite linear;}[/style]

ROTATION VIA X-AXIS:

[style]@-webkit-keyframes orbit{0%{-webkit-transform: rotateX(0deg)}100%{-webkit-transform: rotateX(360deg);}}part of profile{-webkit-animation: orbit 9s infinite linear;}[/style]


ROTATION VIA Y-AXIS:

[style]@-webkit-keyframes spin{0%{-webkit-transform:rotateY(0deg)}100%{-webkit-transform:rotateY(360deg);}}part of profile{-webkit-animation: spin 9s infinite linear;}[/style]


BLINKING CODE:

[style]@-webkit-keyframes blinker{0%{opacity:0}100%{opacity:1;}}part of profile{-webkit-animation:blinker 2s infinite linear alternate;-webkit-font-smoothing: antialiased;}[/style]

And here's a little bit of other stuff not talked about in other guides


Turn text into bullets:

[style]part of profile{-webkit-text-security: disc;}[/style]


Make comments unpostable:

[style]input#submit_YOUR PROFILE NUMBER{display:none;}[/style]


Make users not able login via your profile:

[style]input.username,input.pasword{display: none;}[/style]



To the guide, for advanced profile designers, I copied this from an old thread. :-)

Thank you.

---

ilia (2014-01-04 08:12:51)

---

This post has been edited one or more times, the last time was:
2014-05-29 13:09:33

---

ilia (2014-01-13 22:13:17)

---

---

PewdiepieParty (2014-01-15 00:54:07)

---

No problem. ^

Keep doing what you do best,Ilia.

---

Super_~_Junior. (2014-01-22 19:52:42)

---

The [ style ]div.titlebox{content:url(Url Here);} [/ style ] code doesn't exactly work ^^;;

---

Ganondorf (2014-01-23 03:46:28)

---

Much wow. Very amaze. Such code.

---

ilia (2014-01-23 06:48:18)

---

---

Super_~_Junior. (2014-01-23 21:37:07)

---

Yeah, Anyway this is a great helpful guide for newer users & users whom haven't learned a thing about CCS! This thing should be sticked..

STICKY REQUEST

---

Foreverluv (2014-01-23 23:05:24)

---

Omg thanks this helps a lot!!

---

ilia (2014-01-24 06:53:23)

---

---

~Leafeon~ (2014-02-09 07:06:52)

---

how do i put a border around texts .-.

---