Leviathan (2015-03-11 23:52:07)

---

Here is a bit more comprehensive guide to styling your profile.





First thing you should know, is that styling your profile has two basic rules.

1. Follow the Syntax or it wont work.

2. Keep your styling in the "About me" section.




The syntax is the order in which you must write your code. it goes

[style] selector{property; property; property;}[/style]

This is a must in every code you make. IF you don't do it right, you won't get the intended result.


Selector: What you are trying to style.

Property: how you are styling it.

Lets cover the basic selectors.

----SELECTORS----



The above is an image of every part of the profile page, and its corresponding selector. So if you wanted to style the header image, you would put "[style]img#header{property;}[/style]" in your about me section.

You can also style certain parts of the comment boxes, with the following selectors:



The only other thing is the Friends list spoiler.

The selector for the spoiler itself is ".friends_spoiler_full" and to select the contents, like the links inside it, you use ".friendslist_spoiler_content". To select the spoiler header individually from the spoiler contents, use ".friends_spoiler_if".

Here are the navblock selectors:



You can also select things as a whole, if they have no class. If you wanted to select every Image, use the "img" selector. There is also Span, Input, a, and H2.

Lets get down to properties.



----PROPERTIES----



A property is what you are doing to the selector. In order for a property to work, you must have it in between the "{}" brackets, and you must put a semicolon(";" at the end of each property you apply. You can apply multiple properties to a single selector, in the same set of brackets, so long as you seperate them with a semicolon. such as [style]selector{property1; property2; property3;}[/style].

These are a few of the properties that currently come to mind. Most properties have something called a value. A property with a value must be written as follows.

"property: value;"

So since the background color property changes a selectors color, you would have to tell the property what color you want. So if you wanted blue, you would have it be "background-color: blue;".

Here are the properties and values I know(or at least that come to mind.). If anybody has anymore, please tell me, and I'll add it. If a property can have different values, I'll put all the values in parenthesis.


Display: (none, visible, inline);
position: (relative, absolute, fixed);
z-index: (Any number); - The Z-index property allows you to set which selectors should be on top of each other. The higher the number, the higher the selector.
background-color: (hex color code or color word);
margin-left: (number+px); - This sets how far away from the left of the screen the selector is.
margin-right: (number+px);
margin-top: (number+px);
margin-bottom; (number+px);
border: (number+px);



There A LOT more, but my mind went blank for some reason. Help me out and remind me of more properties guys. :/



----TRICKS----



Here are a few novelties that few people remember or know they can do.


Selecting an image:

You can use the following code to select an image by source, without having to use a selector.

[Style]img[src='image url']{property;}[/style]

Now, when doing this, make sure the "image url" does NOT include the 3dsplaza url. So if you're trying to get rid of the image at "http://www.3dsplaza.com/images/Leviathan.png" then your URL really is just "/images/Leviathan.png".

Here is a code I made that replaces an image with another image:

[Style]img[src='/images/picture.png']{display:none;content:url(http://www.url.com/picture.png) any extra properties like positioning, etc.;}[/style]


Hovering:

by adding ":hover" to the end of a selector, you can set the properties to only happen when your mouse hovers over it.






Thats it! If you have anything to add, please send me a PM!


Happy styling!

This post has been edited one or more times, the last time was:
2015-03-12 02:07:25

---

UnitedUdders (2015-03-12 01:28:46)

---

This isn't an entire styling guide, but it's neat.

---

StarLord (2015-03-26 04:31:19)

---

+1 Something for the new users out there.
[STICKY REQUEST]

This post has been edited one or more times, the last time was:
2015-03-26 04:31:42

---

Fazbear (2015-03-27 00:45:49)

---

I don't believe this should be stickied, it is very generic and we've got like, so many guides that contain identical information.

---

DrakeJericho (2015-03-28 01:11:51)

---

^

---

SMOGamerX (2015-04-02 21:25:58)

---

Not bad

---

Majora (2015-08-08 09:27:51)

---

Bump BC useful.




Hehehe


Deal with it, Leviathan.

This post has been edited one or more times, the last time was:
2015-08-16 00:03:10

---