Post by Zophrenia on Apr 3, 2018 4:30:39 GMT -5
Posting this here for the sake of my own memory and for those I stumble across needing help in making cool posts.
This wont include coding that can simply be applied from the options given when making posts, since you could literally just press the button to get it working.
:: Introduction ::
First of all, If you wish to do fancy stuff like this with your posts;
Then you will need to have this open when doing this stuff. Preview will only help you see what you've done so far.
Secondly you'll need Images. Preferably free to use images and seamless textures.
Some sites you can use:
www.sketchuptextureclub.com/textures
www.cadhatch.com/seamless-textures/4588167680link
www.wildtextures.com/
There are some on DeviantArt too if you look for it!
Lastly, keep in mind what kind of design you want and what its for.
Are you making it just for posting on the site?
Is it for Roleplay? Or Bios?
What about a theme?
:: Backgrounds ::
Backgrounds are useful for basically everything in a post, Making headlines stick out, adding theme to the post or simply for fun. Adding one to your post can change the way its meant to be viewed and draw the users eye to certain details that are important to note. In my earlier example, how did I use backgrounds? Did it draw your attention to the important details?
Its also all about colour you choose,
Lighter things ontop of a dark background will pop out to the person looking, Use colours and hues to grab veiwers attention.
-------------------------------------------------
This wont include coding that can simply be applied from the options given when making posts, since you could literally just press the button to get it working.
:: Introduction ::
First of all, If you wish to do fancy stuff like this with your posts;
Then you will need to have this open when doing this stuff. Preview will only help you see what you've done so far.
Secondly you'll need Images. Preferably free to use images and seamless textures.
Some sites you can use:
www.cadhatch.com/seamless-textures/4588167680link
www.wildtextures.com/
There are some on DeviantArt too if you look for it!
Lastly, keep in mind what kind of design you want and what its for.
Are you making it just for posting on the site?
Is it for Roleplay? Or Bios?
What about a theme?
:: Backgrounds ::
Backgrounds are useful for basically everything in a post, Making headlines stick out, adding theme to the post or simply for fun. Adding one to your post can change the way its meant to be viewed and draw the users eye to certain details that are important to note. In my earlier example, how did I use backgrounds? Did it draw your attention to the important details?
Its also all about colour you choose,
Lighter things ontop of a dark background will pop out to the person looking, Use colours and hues to grab veiwers attention.
-------------------------------------------------
Heres an example of a background with a seamless pattern;
The Code:
[div style="width:620px;border:0px solid #040031;text-align:justify;padding:3px;background-image:url(http://i428.photobucket.com/albums/qq2/Zophrenia/Leafyleafcartoon_zpsk7km4omf.jpg);"]
[/div]
The breakdown:
- "width: 620px;"
This defines how wide the box will be, changing the number will change the width.
It's possible to also add "height:200px;" if you have a set height in mind. - "border:0px solid #040031;"
This gives the box a line around the edges.
Changing 0px to 10px will go from no line to a thick line.
Solid is the line type. Others that you can use are;
dashed, dotted, double, groove, hidden, inset, outset, ridge, none
#040031 Is the colour. You can get different numbers from clicking the Font Color button. - "text-align:justify;"
This tells it where to align text you write inside it.
You can also change justify to; left, right or center.
- "padding:3px;"
Padding is the 'walls' of the box. It protects the sides from tex or images. If you don't want any padding and don't mind text touching the side then set "3px" to 0px. - ";background-image:url(http://i428.photobucket.com/albums/qq2/Zophrenia/Leafyleafcartoon_zpsk7km4omf.jpg)"
This is where the image goes. Paste your background image link Between the brackets (, and ).
Image must be uploaded somewhere on the internet and have a link to work. - "div style & /div"
This is the start and end of the code. It is absolutely nessisary in order for any of this to work.
If you want just a solid colour for a background and not an image;
Example:
Code
" background-color:#1979e6; "
Is what has changed.
#1979e6 Like I noted before, is the colour.
:: Round Corners ::
Example;
Add border-radius:29px; after border:0px solid #040031;
As usual, replace 29px with what ever number you like.
If you want specific corners round and the others sharp try this;
border-top-left-radius:0px;border-top-right-radius:15px;border-bottom-right-radius:15px;border-bottom-left-radius:0px;
You should be able to figure out how to change each side at this point.
:: Background in a Background ::
Example:
Code:
You can do this as many times as you want.
You basically put
It works the same as when you use b and /b for bolding text!
If you want to put a background in a background please remember to make the inner background smaller then the outer one. or it'll look funny. Unless its appart of your design of course.
Example:
[div style="width:620px;border:2px solid #040031;text-align:justify;padding:3px;background-color:#1979e6;"]
[/div]
" background-color:#1979e6; "
Is what has changed.
#1979e6 Like I noted before, is the colour.
:: Round Corners ::
Example;
Add border-radius:29px; after border:0px solid #040031;
As usual, replace 29px with what ever number you like.
If you want specific corners round and the others sharp try this;
border-top-left-radius:0px;border-top-right-radius:15px;border-bottom-right-radius:15px;border-bottom-left-radius:0px;
You should be able to figure out how to change each side at this point.
:: Background in a Background ::
Example:
[div style="width:620px;border:3px solid #040031;text-align:justify;padding:3px;background-image:url(http://i428.photobucket.com/albums/qq2/Zophrenia/Leafyleafcartoon_zpsk7km4omf.jpg);"]
[div style="width:600px;border:3px solid #040031;text-align:justify;padding:3px;background-color:#1979e6;"]
[/div]
[/div]
You can do this as many times as you want.
You basically put
[div style="width:600px;border:3px solid #040031;text-align:justify;padding:3px;background-color:#1979e6;"][/div]
After[div style="width:620px;border:3px solid #040031;text-align:justify;padding:3px;background-image:url(http://i428.photobucket.com/albums/qq2/Zophrenia/Leafyleafcartoon_zpsk7km4omf.jpg);"]
And before the [/div]
'/div' acts as the end for the code line 'div style', telling it where to stop the code.It works the same as when you use b and /b for bolding text!
If you want to put a background in a background please remember to make the inner background smaller then the outer one. or it'll look funny. Unless its appart of your design of course.
Things to note;
▸ Please only type 'color' and not 'colour' in the coding or it wont work.
▸ ' ; ' is what you use to seperate each code phrase. [Eg. width:620px;border:2px solid #040031;]
▸ Boarders are optional
▸ You can put more then one background in a background.
▸ Only do coding in the BBCode tab. Preview is only to type text and see how your coding is doing.
▸ This only applies to proboards. Other sites may use different code.
▸ Some proboard sites prevent this kind of BBCode by putting the site into 'light bbc' mode, make sure the site allows advanced BBCode.
▸ All the information above is what I've learned. There may be much more out there that I don't know.
▸ Some Proboard sites use plugins to change coding or add more coding for better styles. Check with the boards admin or forums to see what they may have added.
▸For coding regarding text go here: Click Link