DarthLordX (2014-02-22 04:38:40)

---

Hi there here I will show you how to customized and edit your profile to you liking.

Lets get started! ( These codes are for styling a 3DS/dsi/pc devices )

--These codes go into about me on your profile.--



Backgrounds


[style]body{background:Color Here;}[/style]

The code above will change the outer background colors.

[style]body{background:url('Image URL here';}[/style]

The code above will do the same thing, however this will use an image.

To do the main background, use the div class known as: content

[style].content{background:COLOR HERE;}[/style]

Or do a background image:

[style].content{background:url('Image URL here';}[/style]

If you want to have the whole profile have one background do:

[style]div{background:url('URL HERE';}[/style]

NOTE show




Comment Boxes


[style].commentbox_1{background-image:url(Image URL Here) ;}[/style]

The code above will style comment box one with an image.

[style].commentbox_2{background-image:url(Image URL Here) ;}[/style]

This will do comment box two.

[style].post_comment{background-image:url(Image URL here);}[/style]

This will put an image around the text area where a user can post a comment.
NOTE show



Text and Links


Alright. Say you just made a black background, and you can't see any text. Well you could always use BBcodes for the About Me: but what about the Last Online: 4 hours ago ect.? Just use this:


[style].content{color:Color Here;}[/style]

You can also do more text styling, like making all text bold.

.content{color:yellow; font-weight:bold; text-decoration:underline;}

The code above will make all text on your profile yellow, bold font, and underlined.
NOTE show


Don't like the default link color? Hard to see on your blue or purple profile? No problem.

a:link{color:Color you want Links to be;}

But when a user visits a link... it turns purple? o.O This my friend, is called a visited link. To style a visited just use:

a:visited{color:Color you want Links to be;}

Also when a mouse hovers over a link, you can make it another color. ( You can play around with hover A LOT and its very cool. )

a:visited{color:Color here;}

There are TONS more things you can do with hover. If you'd like to see these, click on the spoiler below.

Link Hover show


List Of Borders for advanced hovering! show


Text Decoration show




Changing Words


Want your profile to say: "Welcome to _______ Profile! "
To do this, its quite simple. We change the content
Use this to make words before it says: ____'s Profile:

[style]h2:before{content:'Words you want to say before here';}[/style]

How about after?

[style]h2:after{content:'Words you want to say after here';}[/style]

Do more Heading Styling! show


Want to change what the menu button says? ( This is a common one. )

[style]div.menu:before{content:'Words you want to say before here';}[/style]

The code above will change what the menu says before. To do after just use:

[style]div.menu:after{content:'Words you want to say after here';}[/style] To see an example of what I'm talking about, go to my profile and see. My back to menu button ( 3DS version ) says: "You Bored? Fine. Go Back to the menu."
Style Comments.

[style]div.titlebox:before{content:'Words Here';}[/style]

Or as always, you can make it say something after:


[style]div.titlebox:after{content:'Words Here';}[/style] Images


Yeah I'll make this short and sweet. ( Put No Space )

[ img ] URL HERE [/ img ]

The code above will make an image... This works on forums too... So I guess this is a BBcode...? Whatever. =P

[ simg ] URL HERE [ simg ]

The code above will re size the image to fit the screen resolution the user is using.



Messing With Signatures.


.signature{content:'Gray Is Awesome.';}

The code above will make all signatures that are on the comments of your profile say, "Gray Is Awesome."

Obviously, you can change "Gray Is Awesome." and make it whatever you please.

( This next code is a GOD SEND. -_____- )

Sick of those giant My Little Pony images that are freakin 5000x5000 pixels?! Well I for one, am. ( And I just joined not too long ago... like 50 people welcomed me and they all had giant images in there signatures. )

.signature{display:none;}

The code above takes all signatures off your profile!!!

Or want to just take the images off but leave the text? ( Give a thanks to Proxion. ) Use this:

[style].signature img{display:none;}[/style]



Friends List


I'm just going to make this short section straight to the point.

[style]a:friend_links:before{content:'What you want to say about your friends here';}[/style]

The code above will make it say anything you want before your friend. Then as always you can do it after:

[style]a:friend_links:after{content:'What you want to say about your friends here';}[/style]

You can also do images before and after:

[style]a.friend_links:before,a.friend_links:after{content:url('URL HERE';}[/style]
Also Reputation box! Images


Yeah I'll make this short and sweet. ( Put No Space )

[ img ] URL HERE [/ img ]

The code above will make an image... This works on forums too... So I guess this is a BBcode...? Whatever. =P

[ simg ] URL HERE [ simg ]

The code above will re size the image to fit the screen resolution the user is using.



Messing With Signatures.


.signature{content:'Gray Is Awesome.';}

The code above will make all signatures that are on the comments of your profile say, "Gray Is Awesome."

Obviously, you can change "Gray Is Awesome." and make it whatever you please.

( This next code is a GOD SEND. -_____- )

Sick of those giant My Little Pony images that are freakin 5000x5000 pixels?! Well I for one, am. ( And I just joined not too long ago... like 50 people welcomed me and they all had giant images in there signatures. )

.signature{display:none;}

The code above takes all signatures off your profile!!!

Or want to just take the images off but leave the text? ( Give a thanks to Proxion. ) Use this:

[style].signature img{display:none;}[/style]
Spoilers! [style]div.spoiler_content{INSERT STYLING'S YOU WANT HERE}[/style]

A few things you can do with this is add a background ( Image or color ), change the word color in it ( Or you could just use BBcodes... ), change the font size, change the font family, and add a border. =P
Reputation bar!
[style]span.rep_title_span{CSS HERE}[/style]

To put something in front, or before the words do:

[style]span.rep_title_span:after {content:'WORDS HERE';}
[/style]

The code above makes words after.

[style]span.rep_title_span:after {content:'WORDS HERE';}
[/style]

The code above makes words before.
[img]URL Here[/ img] "No Spaces" to add gifs and pictures. Thank you for read also have fun with your profiles

This post has been edited one or more times, the last time was:
2014-02-22 04:39:42

---

DarthLordX (2014-02-22 04:55:57)

---

Hi

---

Abbz (2014-02-22 14:10:48)

---

thx joshy

---

SackThing101 (2014-02-22 16:16:10)

---

Copy and pasted from Gray's profile guide.

---