Remember me
Register
Back to forum: Profile Design (3DSPlaza BBCode and BBCode CSS)


Search forums via Google


123 Users appreciate this thread.

The Complete Plaza Profile Styling Guide (updated)
 >  >>
Started by ilia
(2013-12-21 21:35:24)
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)'.

Important, please read this spoiler show
To use these codes, remove the space in the [style][/style] brackets. And for the rest of the codes, I'll be leaving out those brackets but remember that the codes don't work unless you add them.





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!

more info show
If you change the color from green in the codes with text, you can write whatever you want in any color you'd like. Also as a warning, make sure you don't use any contractions or apostrophes when you write your text or the code won't work.





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.

more info show
In the back to the menu button, if you're writing text, remember that you can't remove the words 'Back to the Menu' so if you're writing a sentence, remember to work around it.
Example: Bored? Okay, Just go Back to the Menu.





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.

More info show
With that code you can write 'Leave your comments here if you dare!' by using the before code, and the after code.
Heads up though, the word 'comments' has to be included in your text. You can't remove that word.





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

More suggestions with text resizing show
Did you know you can actually use the property {font-size:10px;} in any code you want? This gives you the freedom to resize anything on your profile bigger or smaller.
You can use the property to make your h2 larger h2{font-size:16px;}
Or you can use it to minimize some things on your profile: div.titlebox{font-size:5px;}
As long as you're creative with your properties and values, you can have loads of fun with profile designing. ^u^





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.

Border Styles show
These are all the different types of border styles that are available. Test them out to see which you like best.
1. solid
2. double
3. dashed
4. dotted
5. ridge
6. groove
7. inset
8. outset





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.

more info show
With the image, it's best to pick something small for this or it will come out badly. Feel free to make a combo like I did in my spoiler by putting a pic before and words after or vice-versa.





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!
Taste the Rainbow show
What does that even mean!?


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
You can't open this (:< show
Ha!

(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]
Text


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

more info on how to color text in Pms show
Alot of people don't know this, but you can also use the color codes in pms too. Many people ask me how come my pms are always written in green. I use the [green ] short-cut. You can also use the boxes as well. Try it out and wow your friends

As a bonus. This also works in the titles of Pms as well. Just put [color]Your subject[/color] and there you go! That will get everyone's attention for sure





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

Example: Welcome to the pc version of my profile guide





(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)

Further info show
Oh and a head's up. For all you hackers out there, no the above code does not enable you to hack people's profile. You already have to be logged in to use this. Hacker's be gone with you





Credits and updates


My thank you to everyone show
First of all, I'd like to thank those who have sent in codes and other useful information to me.
I have made it my sole focus to credit everyone who reminds me of a code I might have missed or shares an idea with me that I have not even thought of myself. Without the help of others, this guide would never have made it this far.


I realize this is not a complete guide show
Secondly I realize that this is not in fact a complete guide to profile designing, despite what the title may say. I personally like to consider it as more of a launching board. Something that can give you ideas and the basic help to completing your own profile in original and inspiring ways.


I won't be including CSS3 show
Thirdly I know many of you have asked me to add CSS3 and other types of coding to my guide. Unfortunately I will admit that I'm never going to feature a section on this because of the fact that there are many other CSS3 guides circling and I'm not the type of person to steal information.
A wonderful beginner's guide to this is Adolf_Hitler's Guide


My inspiration and the best Plaza Mod show
In my honest opinion, the most helpful mod and profile designer is: Mega. If you're looking for something that needs answering, I can guarantee that he will more than likely have an answer for you. He knows for MORE about coding than I do
He also is the inspiration behind why I became a profile designer/moderator in the first place ^u^


I'm so sorry but I can't be on here much anymore show
Lastly... I'm not on plaza as much as I use to be anymore. As you can tell I do come online to check things and update this guide, but it's not very frequently. Getting older means finding a job and heading off to college so there's less time in a day to be a very active user. I'll continue to do what I can to help all of you with any questions you have so don't worry about asking me.


My apologies show
I apologize to those of you who Pm me to ask me to design your profiles. I would like to and I miss doing profile work like I did in the past, but again, I simply don't have the time to assist you. Designing is time-consuming and I only ever seem to end up declining in the end..


Sad news concerning profile work show
Unfortunately that means I also have to make the statement that: I no longer design profiles for users here.
I'm terribly sorry for the inconvenience to all of you and I'll miss the opportunity to get to know so many people through my work.
I'm still available to give advice and codes so please don't worry about that. I won't be leaving Plaza until this site finally meets it's end.. (which arguably has already seem to happen )


My final credit show
My final credit actually goes to an artist on Deviantart, kawiku. She was the wonderful person who designing this cute little icon here I've been using in my guide.
I love a great deal of her work and you can visit her through the following Link: Kawiko's profile

(I realize that some of you may be wondering if I have an account there as well, and yes I actually do. My account <3
I wouldn't suggest you messaging me there though because I'm incredibly lazy busy and I'm not on the site very much)






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

#Sexier than you



ilia (2013-12-21 22:14:52)
Thanks everyone who is viewing this.
This guide is the updated version of my old profile styling guide. My old guide

As I'm certain everyone knows by now, I was locked out of my original account and was no longer able to maintain my old guide. It was very sad for me to close my old guide at 60+ comments and 33 people having appreciated my guide.

But hopefully now, being able to finally manage this guide, I'll be seeing more visits and apprecations than that. I'm glad that I'm finally able to work on this guide again.

Thanks goes to all my devoted followers. It's you guys that inspired me to make this and I wouldn't have come this far without you. :')


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

#Sexier than you



ilia (2013-12-22 19:30:42)
No, not entirely. I couldn't manage my old guide because it belonged to my old account.

This one has a great deal more in it and hopefully I can get the old guide closed soon. (I can't close it myself because I no longer own it.)

I needed to do this eventually so I can keep working on this. And I added a ton of extra material.

#Sexier than you



ilia (2013-12-27 09:06:47)
Wow. Thank you ^D^
It means a lot to me that this guide has been able to help all of you out. And good news, I discovered a new code for the comment boxes. I'll upload that soon.

#Sexier than you



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)
Thank you so much.
I had left out information such as that since I didn't want to confuse any wayward newbies, but perhaps you're right.

However, I want to point out that there is another guide circulating that focuses primarily on CSS/CSS3 codes and I don't want to be the kind of person who steals all that info from others.

If you're looking for a guide on more advanced material, please check the stickied guides in the profile forums.

Thanks again.


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

#Sexier than you



ilia (2014-01-13 22:13:17)
You're welcome ^u^
Thanks for using it.

#Sexier than you



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 ^^;;
jEsUs ChRiSt
Ganondorf (2014-01-23 03:46:28)
Much wow. Very amaze. Such code.
ilia (2014-01-23 06:48:18)
@TVXQI know, right? It goes crazy ^^'

@Ganondorf. I'm glad you've come around. Thank you very much

#Sexier than you



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
jEsUs ChRiSt
Foreverluv (2014-01-23 23:05:24)
Omg thanks this helps a lot!!
i liek turtles

Okay?
Okay.

RIP mini Niall Ily<3
Aaron was here and loves you
ilia (2014-01-24 06:53:23)
You're all very welcome.
Thank you so much ^u^

I'll try to add an advanced codes section soon for the advanced users.

#Sexier than you



~Leafeon~ (2014-02-09 07:06:52)
how do i put a border around texts .-.
"What goes around comes back around..."-Justin Timberlake <3
 >  >>

Log in to submit a comment

This topic's ID: 67128

Back to forum: Profile Design (3DSPlaza BBCode and BBCode CSS)