Username:
Password:
Remember me:
Register
Back to the menu

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


Search forums via Google


24 Users appreciate this thread.

#1 Ultra Wicked Awesome Profile Tutorial
 >  >>
Started by kyleelyk
(2014-06-02 20:34:55)
kyleelyk (2014-06-02 20:34:55)
#1 Ultra Wicked Awesome Profile Tutorial

I'm gunna jump right in. I'm not the best with profiles, but I consider myself pretty good, so I want to share some of what I know for all you people who think they'll never be as good as others with profiling. Hopefully you'll learn from this, so you don't need to scour hours for codes other people might have written, and can figure them out yourself without needing to ask for help. :3

A Couple Important Things To Know Before You Start show

1. Plaza uses the CSS website design language in the [style][/style] tags. This is used by all modern sites on the web and just about every site uses it. It's also what I'm about to try to teach you. :3 It's not uncommon, or hard to learn. Which means anything you can't find here, Google is the answer. ^w^ An example search could be "CSS font color", and you'll find an answer easily, from all over the web, not just Plaza's Forums.

2. I'm asked a bunch "Where do you put these codes?" Well Mr. Noob, It's actually put in the same space you write on your profile in, the "About Me" text area. (Don't feel bad if you didn't know, it's not exactly written anywhere, atleast no where I could find ) Sometimes If you have alot of codes, its easier to put them in a pair of [^spoiler] [^/spoiler] tags.) (the '^'s are to be removed when you put them in your profile I'll do this abunch so it doesn't use the spoiler in this forum page. If you see a '^' in between '[' and ']', just assume you remove it.)

3. All the codes follow a specific syntax, or a specific pattern they have to be set in. See the refrences spoiler below for a link to a good refrence site, which I use CONSTANTLY. The internet is your friend, young padawan. ^w^

4. Most codes can get pretty specific on Plaza, and trial & error will be a part of the process. If you dont't have the patience, profiling can be a long task! If you don't feel up to it, there are alot of people willing to try to help. ^w^ I'll add a list of some of these people down below, and if you think your up to the challenge of helping, pm me and I will add your name to the list. ^w^ At first the list will be pretty empty, but they're out there! ^w^

5. You can find codes yourself. :3 If your on PC, your browser just might have a developer mode. I know on Chrome and Internet Explorer you can press F12 to bring it up. I use this whenever I'm trying out new codes, by editing the HTML of the page directly. If you really know what our doing, then you can edit much faster, tweaking little details without having to Update your profile every time. But what's really great, is you can find the Selectors you need to use to change a specific element. What you want to look for is in the '<' and '>' characters. You should see id=blah or class=blahBlah (I'm paraphrasing here ). Ids only appear once, so it is more specific than class, and for a selector using an element referred to by an id, you would type [style]#blah{Property;Value}[/style] For classes, it's [style].blahBlah{Property:Value}[/style]. Classes might refer to multiple elements on the page, keep in mind.

6. I wrote this in Notepad and Notepad++. Don't expect perfect spelling.

7. I'm using This Color In code that is correct and will run the way described, but code in italics is just a place holder for things you have to write, like numbers or words. If it isn't in that color or I didn't say it will run, It probably won't do anything in your profile. Also, all codes that aren't in-between [style] and [/style] on your profile won't do a thing

8. I Don't think I'm done yet. I'm sure there's mistakes I didn't catch or some formatting issues, so I'll try to fix them If you see a typo or code that doesn't work, pm me and I'll get right to it





Ok, so let's get started, shall we? :3
I'm going to assume that you've checked out some of the links in the reference spoiler, so you have atleast a basic idea of what CSS is.
If you didn't, on Plaza (and every other site ) what it does is it's going to modify how the page renders, or shows up.
Keep in mind that some browsers look at the CSS codes and have slight changes on what they each decide what to do with them.
When it runs through the [style][/style] tags, it looks for the selector you give , which I am going to go over a bunch of them.
Then what it will do is go to that element on the page, and tweak it a little, with the properties and their values that you define.
That might all just be words to you, so I'll try to simplify it.
You tell the browser in the [style] tags what to look for, what quality you want to change, and how you want to change it.
Keep in mind you can't change everything exactly to how you want it,
the Selectors are built into the plaza (and might not be there for everything on the page) and basic things every site can use.
So now that I think I covered some basics, I'll Start going over some Selectors you can use, then the properties that you can edit for them. :3



Selectors show

a These are links. If you wanted to change every link on your page to be a way, you would use this, but it's a little more complicated. I'll go more in depth below.
:after This one you add to other selectors, to style something after the element. (ex: [style].content:after{content:'Thanks for visiting!';}[/style])
b This is bold text. On my profile, I changed all the bold text into the Font Impact, made it slightly larger, and took off the bold effect.
:before The opposite of :after.
body That's just about the entire page, but if you try to change how it looks, it will be the background behind everything else.
#comments_titlebox The blue box above your comments that says "Comments"
.commentbox_1 The light Gray comments.
.commentbox_2 The dark Gray comments.
.content This is where everything you write in your about me goes, along with your friend list and comments.
.cspoiler_bar The Title of a cspoiler.
.cspoiler_content The content of a cspoiler.
.cspoiler_pad The entire cspoiler.
#current_selected_app The currently selected app under Games&Apps.
div This is kinda broad Selector, it's hard to explain, but think of it as every group you see on the page.
.edit_warning The warning that comes up when someone edits their comment.
font I don't know if this will be supported in the future, but think of this as inbetween the [^color=SomeColor] [^/color] tags.
.forum_link Links made from the forum tag.
.friend_links The individual names of your friends
.friendslist_spoiler_content the insides of the friends list spoiler.
.friends_spoiler_full The Friends List spoiler.
.game_app Contains the game or app icon in the Games&Apps.
h2 This is where it says "kyleelyk's profile", it is a header element that Plaza uses.
i This is like the 'b' selector, but for italic text.
.icon Icons under the Games&Apps.
img Gee. I wonder what this could be for. This selects all the images on the page.
input Correct me if I'm wrong, but I believe this will select all the text boxes and stuff where you input your data, like typing or clicking a button (not a link), but not textarea's like the comment box (see textarea).
.loginbar The box that has your name, and the links to log out, your PMs, Your Profile, Friends, and Games&Apps.
.menu The 'Back to Menu' box on 3DS and DSi.
.navblock All the next 6 buttons.
#navblock_1 Home Button
#navblock_2 About the 3DS Button
#navblock_3 News Button
#navblock_4 Chat Button
#navblock_5 Forums Button
#navblock_6 Links Button
.openbox The box that opens when you click Friends.
.page_container On 3DS and DSi only, it surrounds the entire page, except the body.
.post_comment The area that contains the textarea to post a comment and the buttons/label.
.posting_message The message that briefly appears when you post a comment.
#rickschamber ... witch craft. Little5 put it on my page via a comment, that I'm not going to put out yet, in fear of what it is.
s Like italics and bold, this is strike through, or the [s] tags.
#show_more_comments_box The box below your comments that holds the "Show more comments" button.
.signature The signature in comments.
.spoiler_content The insides of a spoiler.
style Not sure why you would use this aside from maybe showing all your [style][/style] codes. here's how: [style]style{display:inline !important}[/style] (I'll get to the "!important" part soon)
textarea In plaza, this mostly will refer to the comment box where you type comments, but there might be other textarea fields.
.titlebox The blue background box behind the word 'Comments' above your comments and the box holding the "Show more comments" button.
#total_new_pms That number that says how many pm's you have. (Mine is normally 0. :c)
u This refers to underlined text.
.user_image Images you put up with the [img] tag. Doesn't include emoticons and your profile image.
* Everything. If you Use this, beware, it might have some weird effects, or could be exactly what your looking for.

I'll Add More Possibly when I'm Bored


About Selectors and How To Use Them

To use them, its simple. In the [style] tag, put them as the first words.
Then after the selectors, you have the curly brackets ('{' and '}' which hold the declarations (properties and their values).
The selectors can be combined too, by adding them in order of broad to more specific, to single out specific parts.
Imagine your profile as a big container without a lid. You can put smaller containers in that big container,
and those smaller containers can hold their own containers. Say in one of those smallest containers is a image.
The container is a spoiler, and you have other images throughout the big container.
You only want to change the images in the spoiler though, so you would do something like:
[style].spoiler_content img{border-radius:10px}[/style]
This tells the browser "inside the elements with the spoiler content class, look for images,
then give those images a border radius of 10 pixels (which rounds it, see properties).
Also, another way to combine Selectors is to apply the same properties to multiple elements using ','s.
An example that would change the text color in both the comment elements:
[style].commentbox_1, .commentbox_2{color:Blue;}[/style]
Think of this as selecting a couple of those containers, and telling them "You all will look like this:".



Properties and Values show

Look in the references for a more complete list, but I will add some common (or rare ) ones here!
Also, don't type the words in italics, they define what you type! The words in the darker red you type.
Multiple choices are separated by 'OR'


background Defining everything in just this property is neater, but also more advanced. It's easier to use the following Properties: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, background-image (to define it all in one property, just put spaces in-between the values defined below)

|background-color:color Gives the background a color. Kinda simple

|background-image:url(url ) Sets the background to an image, that you provide a link to in the ')'s. It will repeat to fill by default.

|background-repeat:repeat(default, fills background with image) OR repeat-x(repeats it in a horizontal line) OR repeat-y(repeats it in a verticle line) OR no-repeat(repeats it once) This decides how you want a background image to repeat.

border Same as the background property, this one can be split up into individual properties: border-width, border-style, border-color

|border-color:color Defines the border color.

|border-image: url(url) Browser Specific! Use "-webkit-border-image" and "-o-border-image" in addition to the original to cover most browsers! This code will set an image as the border.

|border-radius: length (A number in pixels) This rounds borders;

|border-style:none OR hidden OR dotted OR dashed OR solid OR double OR groove OR ridge OR inset OR outset Gives the border a style, or design/pattern.

|border-width:thin OR medium(default) OR thick OR size (a number, easiest to define in pixels by adding 'px' after. ex: '5px' Sets how thick or thin the border is.

color: color This gives text a color. ex: If you want your words red, try "[style].content{color:red;}[/style]" (red can also be '#f00', '#ff0000', etc.)

content: "words" OR url(url) Has to be used with ":after" or ":before" selectors! Will add words(if words is used) or an image(if a url is given) to the front or end of what element your defining.

cursor: url(url) Sets the mouse to an image (if it's small enough) over whatever area your defining. I would use the '*' selector if you want it on your entire page.

display: inline OR block OR none Chooses how the element is displayed. Inline will keep it in the same line, block will make it move to the next line, and none will get rid of it making it take up no space.

float: none OR left OR right A little harder to explain, but think of it as where it will try to arrange the element you are defining. None is the default, and it doesn't try to move it.

font Like 'background' and 'border', this one defines multiple properties that define the font.

|font-family:font This defines the font. Some that work: Georgia, serif, "Times New Roman", Times, serif, and Impact, Charcoal, sans-serif. I took these from w3school's CSS Web Safe Font Combinations. Check it out, or you could google other web safe fonts.

|font-size: size (easiest in pixels, px) Defines a font size.

|font-weight: bold OR normal Defines how bold the text is.

height: size (again easy in pixels, but also helpful in % ex: '50%' Warning, it isn't easy to make the element bigger than the container it's in!) Defines how tall an element will be.

max-height: size Defines how tall the element can ever be.

max-width: size Defines how wide the element can ever be.

min-height: size Defines how short the element can ever be.

min-width: size Defines how skinny the element can ever be.

opacity: number (a number 0.0 to 1.0) How see-through the element is, 0.0 being invisible, and 1.0 being solid.

outline Another property that can define multiple properties. Outline is like a border, except it's around the border.

|outline-color: color By now I don't think I really need to explain some of these This defines the (wait for it....) outline color!

|outline-style:none OR hidden OR dotted OR dashed OR solid OR double OR groove OR ridge OR inset OR outset Gives the outline a style.

|outline-width:thin OR medium(default) OR thick OR size Defines how thick or thin the outline is.

text-align:left OR right OR center Gives the text a special alignment for the entire element.

text-decoration:none OR underline OR overline OR line-through Gives text in an element a line. You should know underline and none, but strike-through is is a line in the middle of text like this, and overline is.. well... a line over the text

text-overflow:clip OR ellipsis This tells your browser what to do with text that doesn't fit in it's element. Clip cuts off the text, and ellipsis adds '...' before it cuts off.

text-shadow: right number AND down number AND blur number AND color Gives the text a shadow. Right and down numbers are how far (in pixels 'px' it will add the shadow in the direction right and down. (For left and up, use negatives) You need these two, but the blur and color are optional. Blur, the bigger the number (yes, once again in pixels ) will make it all fuzzy the higher the number, and color is kinda obvious.

text-transform:none OR capitalize OR uppercase OR lowercase This messes with the cases (capitalization) of all the words in an element. You can capitalize each word, caps-lock the living daylights out of your profile, or turn every thing into little letters. c: Fun code to mess with, if I do say so myself.

transform If you ever took Geometry, you should know what this has to do with. Basically, think about moving, rotating, and scaling elements when you see this. This is one of the longer codes to explain though, so I'll let you advanced users check w3schools to see if you can figure it out. :3 If your not as advanced, maybe you can learn from it, or if you want, I or someone from the list of users below can try to explain it to you personally. :3

visibility:visible OR hidden Very much like the 'display' property, except for when the element is hidden, it will still take up space.

width: size (px or %) Like height, except defines how wide an element is.

word-spacing: size (pixels 'px' OR normal Defines how much space a space takes up.

word-wrap: break-word OR normal Tells the browser whether to break the word up if there's no more room on the line for it, or move the entire word to the next line.

z-index: order (A number, negative or positive, not in pixels(for once )) Thinking like elements are a stack of cards, this will choose which is "on the top of the deck". A higher order number means the closer to the top it is.


This is far from a complete list. I left out a bunch that may be too advanced for some users, like animations, and some that aren't supported by most the big browsers. If you feel I left out an easy one and think I should add it, feel free to drop me a line. :3


About Properties and Values and How To Use Them, along with Syntax

Each Property has a value or multiple values that can define it. These pairs (or groups) are declarations.
If you read the "About Selectors" (which you should have by now!), you would know that these declarations go inside the curly brackets ('{' & '}'. Multiple declarations are definitely allowed, making it much neater and easier to keep track of what selectors are being edited where. Here's an example from my profile that might not make sense, but I'll go through it piece by piece.
[style].user_image{position:fixed; left:0px; bottom:0px; z-index:1;}[/style]
This is a code I made myself that puts all the Images I put on my page on the bottom left, which includes the white fade that you see.
First, you see the opening style tag. Plaza takes this, then tells your page it's going to hold CSS code. Next you see the ".user_image" selector. This refers to images in the [^img] tags, if your one of them lazy folk and skipped the selector spoiler and didn't know this (shame on you ). This means we're going to be affecting all the images on my page. Now we go into the curly brackets, the meat of the style codes. Inside you'll see a few declarations, separated by semicolons (';'. This is how you start to chain multiple definitions together. Don't feel bad if you don't know how some of these ones, they are slightly more advanced so I didn't put them in the list, but know that the fixed position means it won't scroll with the page, and the bottom and left properties are how far from those edges the Image will try to stay. Next is the z-index property, with a value of 1. This is telling your browser that these Images should be above anything with a lower z-index, which is just about everything except the login bar and friends list open box. All set! Now I just had to make a quick fade from white up to clear, then put it as an image on my profile. :3 Feel free to copy this into yours too, but beware, unless you specify a certain image (which I was too lazy to do ), all the pictures you put up (not including comments or emoticons) will rest at the bottom left corner!
Back to the code, notice how each property and value is separated by a colon (':'. Some properties have multiple values, and those are separated by a space (' ' after the colon. This next code will do nothing, but it helps to see the syntax more clearly:
[style].Selector, #another_Selector{Property1:Value1 Value2; Property2:Value3; Property3:ValueOneMillion}[/style] (both the Selector class and the element with the another_Selector id will get these properties)
Also, a less known fact, you can have multiple of these statements in a single tag!
[style].a{aa:aaa;} .b{bb:bbb;}[/style] (the a class will get the a properties, and the b class will get the b properties)
This can chain as much as you want, but if you do this, don't try to use the enter key. The way plaza works, it can mess up some code if there is a "line break", so for readability multiple tags are a good practice.


Plaza BBCode Tags
In the spoiler I list as many of the codes as I can find. Some codes won't work without extra information, so I added what you need after "Extras:" and "In-between the tags:"
For the extras, you put it in the brackets after an equals sign ('=' and the In-between the tags in-between the tags like this:
[spoiler=Extra] In-between the tags [/spoiler]
[detect=pc]You're on the PC site good sir and or ma'am![/detect]

Custom Plaza Tags show

In this section, put the two brackets ('[' & ']' around words in this color! It WILL NOT WORK if you don't! All tags must be closed unless noted with '*'!

b Bolds text. kyleelyk
box Makes a box. Extras: Background Color
|>rbox Makes a rounded box. Extras: Same as Above.
center Centers text.
color Gives font a color. Extras: Font Color
|>red Red Text kyleelyk
|>orange Orange Text kyleelyk
|>yellow Yellow Text kyleelyk
|>green Green Text kyleelyk
|>blue Blue Text kyleelyk
|>purple Purple Text kyleelyk
|>pink Pink Text kyleelyk
detect Only runs what's inside if the Extra given matches the device being used. Extras: 3ds OR dsi OR pc
forum Gives an easy link to forum threads. kyleelyk (CSPL Generator) Extras:Link Name In-between the tags:Thread Number
hl Highlights text. kyleelyk
i Italicizes text. kyleelyk
img Inserts an image from a link. Extras:widthxheight In-between the tags:url
line * Creates a line, with an optional width. Extras: Percent (Optional, number in-between 0 and 100)
link Gives a link to any page. kyleelyk (My Website) Extras:url In-between the tags:Link Name
sgauge * Makes a squared-off box with a colored bar at a set percent. Extras:Color, Percent (Number in-between 0 and 100)
|>rgauge * Makes a Rounded Gauge. Extras: Same as Above.
spoiler Makes a spoiler. Extras: Spoiler Name (Optional) In-between the tags:Content
|>cspoiler Another type of Spoiler that has different CSS classes. It has no style by default, unlike the normal spoiler, so your starting from the ground up. Extras: Same as Above. In-between the tags: Same as Above.
tucs * The Unbreakable Chain Spriter Extras: tucs Number
u Underlines text. kyleelyk


Examples of some not shown in spoiler:

=================================

[box=black][red]kyleelyk[/red][/box]
kyleelyk

=================================

[rbox=black][red]kyleelyk[/red][/rbox]
kyleelyk

=================================

[center]kyleelyk[/center]
kyleelyk

=================================

[detect=pc]kyleelyk has a Windows 8 Laptop[/detect][detect=3ds]kyleelyk has a black 3ds[/detect][detect=dsi]-no comment-[/detect]
[detect=pc]kyleelyk has a Windows 8 Laptop[/detect][detect=3ds]kyleelyk has a black 3ds[/detect][detect=dsi]-no comment-[/detect]
=================================

[sgauge=#D90000,75]
[sgauge=#D90000,75]
=================================

[rgauge=#D90000,25]
[rgauge=#D90000,25]
=================================

[img=100x50]https://googledrive.com/host/0B9c9nOAto_OGa0pBM2xHWmNFTG8/kk.ico[/img]

=================================

[line=10%]

=================================

[spoiler=kyleelyk's Title]kyleelyk's content[/spoiler]
kyleelyk's Title show
kyleelyk's content

=================================

[tucs=1400]

=================================



Common Codes for The Lazier <3

In other words, neat codes that I have no use for that I made in the darkest parts of boredom. Copy and paste to your hearts delight, or If you wanna test your knowledge, mess the codes up and see what you can do! Your imagination is your limit.

The Good Stuff show


Rainbow Text -
[style]@keyframes color{0%{color:red}14%{color: orange}28%{color:yellow}42%{color:green}56%{color:blue}70%{color:indigo}84%{color:violet}100%{color:red}} @-webkit-keyframes color{0%{color:red}14%{color: orange}28%{color:yellow}42%{color:green}56%{color:blue}70%{color:indigo}84%{color:violet}100%{color:red}} body{animation:color 3s infinite linear; -webkit-animation:color 3s infinite linear;}[/style]
(This uses animations, so don't feel like the entire page was for naught if you don't understand this. )



Impact Bold Text -
[style]b{font-family:impact !important; font-size:18px; font-weight:normal;}[/style]
This takes all the bold elements, gives it the Impact font, makes it a little bigger, and takes off bold so it's easier to read.



Body Gradient -
[style]body{background: -webkit-linear-gradient(0deg, red, black); background: -o-linear-gradient(0deg, red, black); background: -moz-linear-gradient(0deg, red, black); background: linear-gradient(0deg, red, black);}[/style]
Notice how it repeats. This is to cover abunch of different browsers. You can change the 0deg from -90deg to 90deg, to give your gradient an angle. Also the colors are changeable so yea.



Neat Sci-fi Font -
[style]@font-face{font-family: tron; src: url(https://googledrive.com/host/0B9c9nOAto_OGa0pBM2xHWmNFTG8/TRON.TTF);}[/style]
(The actual font has nothing to do with Tron, except I was too lazy to change links, so I renamed the font I use to that so it didn't break) Now You can use "tron" like you would any font using font-family:tron;. If you have a .TTF, .OTF, or .WOFF font link, you can replace the src properties url value with it. :3
I've added a good resource in the references tag on where you can download fonts, but you have to put them online if you can't find it already up.



Transparent Background and Color-
[style].content{background-color: rgba( 255, 255, 255, 0.6)}[/style]
This one is simple. If you already know rgba, then this is common knowledge, but if not, then what it stands for is Red, Green, Blue, and Alpha. To define these colors, you give a number 0-255. (Three 255's is white, three 0's is black) But alpha is like opacity, if you read the properties. You use a number 0.0-1.0 to define how much isn't going to show from behind.



Get rid of the Signature Image Limit-
[style].signature{overflow: auto !important; max-height: none !important;}[/style]
I haven't tested this, so yea But I believe it should get rid of that limit, so people with those giant signatures can be happy again.



Get rid of ads-
[style]iframe, ins{display:none};[/style]
thx Little5, I didn't know there were ads on plaza



Don't think I've Stopped! I'll add more in time, grasshopper.





References show

CSS Selector Reference -W3Schools is like the best Site I can give you. I used it nearly for 100% of my profile. The main part of this page might be confusing, but on the left side, it lists mostly all the properties and a definition/examples, plus their options for values, if you follow their links.

Color Picker -Good for getting Custom colors. Sometimes you want a little more than just r.o.y.g.b.i.v., choose from +16,000,000 here ^w^ (dont forget the '#' before the 6 number/letters!)

Blooberry CSS Property Index -This page has another good list of CSS Properties, though a little out-dated.

CSS-Tricks -This site has some neat codes that you can maybe adapt to your profile.

Dafont -Download .TTF, .OTF, or .WOFF fonts here.


Any suggestions? Drop a PM or tell me below :3


People Willing To Help show

ME (kyleelyk)-Anything
Aleks -Anything
(.~Bellamy~.) -Codes
Amon -Graphic Designs
Nerfy -Graphic Designs
DrakeJericho -Graphic Designs


PM me if you want me to add your name here! Make sure not just friends can PM to you, or I might not answer. :3


Some Tips show

•Some codes won't work because they already have properties set by the Plaza. In this case, we add "!important" as a value. It tells the browser that your value is more important, so it has a higher priority of running. ex: [style]div.titlebox{background-image: url(https://googledrive.com/host/0B9c9nOAto_OGa0pBM2xHWmNFTG8/aqua_loop.png) !important;}[/style] sets the blue comment bar to my red and black one. Before the background image was set to their aqua_loop image, which I redid.

•When your trying to get the url's for pictures, it's easiest to do this on PC. Find your image online, and right click it. Look for an option that will copy the address or link of the image, then replace url with what you copied by pasting it there. Make sure this starts with http:// or https:// and ends in .png , .gif , .jpg , or any other supported file type name.

•Don't want an Emoticon to render? Inbetween the letters type "&nochar;" Example: :D > || :&nochar;D > :D This also works to stop a plaza bbcode tag from taking effect. Example: [&nochar;img]http://fake.com/img.jpg[/img] > [img]http://fake.com/img.jpg[/img]

•Want to only Select one image on your profile? Use this selector: img[src='image url']

•A code not working right? Sometimes if the code uses quotes around a url or a couple of words, Plaza gets confused when it's turning this " from your about me into code. :/ So instead of using ", I would use '. :3 It works the same, but doesn't trip Plaza up.

•Code creating alot of space on profile? Try something like this:
[style]line 1 /*
*/line 2 /*
*/line 3 /*
*/line four[/style] '/* */' is a comment and what your doing, it taking out the 'line break' each time you comment it out.








I'd Like to Acknowledge:
ilia -She made a really good guide too! I don't think I would have gotten into profile designing without her guide. If you ever need more help, look into her guide that I linked. :3
SPCOxion -An older forum, but It still helped me with finding some of the Plaza BBCode tags :3 If you ever need help with those, I would go to his forum.
w3schools This isn't a Plaza user or based on plaza, but I definitely owe a big part, mostly everything CSS related, to this site. If you're interested in going deeper into website design, I would check this site out, it has tutorials from HTML to PHP and a bunch more.
[link=../members/view_profile.php?user=little5]little5[/link] -Submitted an ad-removal code.

This post has been edited one or more times, the last time was:
2014-08-24 10:43:25

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
kyleelyk (2014-06-02 20:59:00)
Still a W.I.P. I've yet to add:
• More Examples and Specific Codes
• Better Formatting
• More Selectors

Warning: Sometimes during editing,I put in a bad code or mess something up. If it doesn't look right, check back in a couple minutes. :3





This post has been edited one or more times, the last time was:
2014-06-04 05:14:20

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
little5 (2014-06-02 21:13:37)
I'm sticky-ing this.. It looks extremely promising and it's not even done.
DrakeJericho (2014-06-03 03:11:26)
Why isn't this kid a profile mod yet
RobertABC (2014-06-03 21:47:23)
^Ikr

-claps- Best profile ever!
Hello
kyleelyk (2014-06-04 22:28:36)
:3 thx -everyone

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
Zedd (2014-06-05 02:17:52)
Fantastic.
kyleelyk (2014-06-11 15:18:34)
thx Adonis, but there's people better than me out there :3

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
(Capt.)Orb (2014-06-22 10:24:38)
Nice job!
Aviation fact: The a380 is the largest commerical aircraft in service!

Go to Splashiverse! Splashiverse
Super_~_Junior. (2014-06-24 06:52:57)
Purely genius, this is EXTREMELY helpful to newer users who wish to learn about CSS and how profile designing works.
jEsUs ChRiSt
kyleelyk (2014-06-27 17:51:36)
@hi [link=link to site]What you want it to say[/link]

This post has been edited one or more times, the last time was:
2014-06-28 00:52:11

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
Aleks (2014-06-29 22:47:27)
I have the patience to do others' profiles but not to read this. itz great tho. Very informative. Most profile guides just list all of the codes they know instead of explaining everything about the styling codes.

This post has been edited one or more times, the last time was:
2014-06-30 05:48:30
kyleelyk (2014-06-30 22:31:54)
.3. thx aleks and i noticed, so thats why i thought to make this

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
DrakeJericho (2014-07-02 13:51:30)
Kyle, can I be a person for graphic designs?
kyleelyk (2014-07-06 02:25:54)
@Drake added :3

[img]../images/moderator_icons/profile_mod.png[/img] Ex-Profile Moderator
 >  >>

Log in to submit a comment

This topic's ID: 70799

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



Total registered users: 8321
New registered users today: 7
Newest registered user: ElegantVulpes

©  Copyright 2026 3DSPlaza. All Rights Reserved