Post by Roxy on Aug 22, 2011 18:18:31 GMT -5
Kayyy, so as you all have noticed I've added two codes to the site that add the use of CSS and a background color to a post. If you can't see the image (I can't T.T), then it's the broken one. The background colour is easy to do. Once clicked, it will appear as 
WARNING: THE USE OF THE CODE BELOW IS NOT FOR BEGINNERS[/b]
The use of CSS coding in a UBBC post is the harder code. Once clicked, it appears as
There are many things you can do with this. For example, if you look at my posting templates, I love this code.
So, if you want a border around the post, you would make the style code like this -
[style=border: 10px solid #032E2A]Blah blah blah[/div]
There is now a border around what I had said (blah blah blah).
As you can tell, it is not as pretty as it can be.
To make this prettier, we can change the text colour and the background colour of what is inside the box. For this, you do not use the BGCOLOR code I added, or the color codes that proboards gives you, but it is just as easily done. To change what code you are working on, type ';' between the two codes. This will signal the code that you are no longer working on the border, but you are working on the text. Of course, though, you can go back and change the border.
The above code would create this.
[style=border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px]Just replace the hex after color, helvetica with your own choice, and the 13px with your own choice, then you've got your own![/div]
You might be saying "Roxy! It isn't pretty enough!" That's for sure what I'm saying. This just isn't cutting it for me!
Next, you will add a background colour to just the inside of the code. To you canadians, colour is spelled color in the code. We will take what we have so far and add the background colour!
To add a background colour, use another one of the ';' thingies, and put in background-color: HEXHERE.
Now, this is what you should have.
[style=border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px; background-color:#69938F] I'm not exactly sure if this will work, the order does have a reason.[/div]
Now, you might be thinking, I can't read what Roxy typed, well too bad.
Okay, next! If you think it STILL isn't pretty enough, you can add padding. Margins adds spaces at the side of the border. So we are going to add in this code right here >>;margin-right: 90px;margin-left: 90px; You change the PX amount to make it your own. We will now have this.
Remove the asterisks.
I guess padding's next. Padding is the space between the sides of the text and the border. Most just use 2px. Put in ;padding: 2px into your code.
There are other border styles and font styles, but you're gonna have to figure out those yourself ;P
By typing border-radius: 8px we can create rounded corners. I don't think you need an example for that. This will only work for the outside of the corners of the border. You can change the amount of pixels to whatever. Imagine the four corners put together to make a perfect circle.
[*BGcolor=]. Use Hex colour code to generate a background colour for your post, not words. I recommend THIS SITE to generate the hex code. Ignore the '#' and just copy and paste the actual number, not the sign. This will make that colour the colour of the background of your post 
WARNING: THE USE OF THE CODE BELOW IS NOT FOR BEGINNERS[/b]
The use of CSS coding in a UBBC post is the harder code. Once clicked, it appears as
[div style="][/style"]. Make your whole post in the style code, or put something out of it to make it so that the thing you typed is not in the table. There are many things you can do with this. For example, if you look at my posting templates, I love this code.
So, if you want a border around the post, you would make the style code like this -
[*style= border: SIZE IN PIXELS borderstyle HEXCOLOR][/style*] This Will not do anything as is, but if you replace the size in pixels to 10px and the borderstyle to solid, as well as a hex color of your choice, you will get this.[style=border: 10px solid #032E2A]Blah blah blah[/div]
There is now a border around what I had said (blah blah blah).
As you can tell, it is not as pretty as it can be.
To make this prettier, we can change the text colour and the background colour of what is inside the box. For this, you do not use the BGCOLOR code I added, or the color codes that proboards gives you, but it is just as easily done. To change what code you are working on, type ';' between the two codes. This will signal the code that you are no longer working on the border, but you are working on the text. Of course, though, you can go back and change the border.
[div style="border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px"][/style]The above code would create this.
[style=border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px]Just replace the hex after color, helvetica with your own choice, and the 13px with your own choice, then you've got your own![/div]
You might be saying "Roxy! It isn't pretty enough!" That's for sure what I'm saying. This just isn't cutting it for me!
Next, you will add a background colour to just the inside of the code. To you canadians, colour is spelled color in the code. We will take what we have so far and add the background colour!
To add a background colour, use another one of the ';' thingies, and put in background-color: HEXHERE.
[div style="border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px; background-color:#69938F"][/style]Now, this is what you should have.
[style=border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px; background-color:#69938F] I'm not exactly sure if this will work, the order does have a reason.[/div]
Now, you might be thinking, I can't read what Roxy typed, well too bad.
Okay, next! If you think it STILL isn't pretty enough, you can add padding. Margins adds spaces at the side of the border. So we are going to add in this code right here >>;margin-right: 90px;margin-left: 90px; You change the PX amount to make it your own. We will now have this.
I don't really know what padding is, but that's next!
[*style=border: 10px solid #032E2A; color:#7FA9A5; font-family: helvetica; font-size: 13px; background-color:#69938F;margin-right: 90px;margin-left: 90px;] I don't really know what padding is, but that's next![/style*]Remove the asterisks.
I guess padding's next. Padding is the space between the sides of the text and the border. Most just use 2px. Put in ;padding: 2px into your code.
Now I do!
There are other border styles and font styles, but you're gonna have to figure out those yourself ;P
By typing border-radius: 8px we can create rounded corners. I don't think you need an example for that. This will only work for the outside of the corners of the border. You can change the amount of pixels to whatever. Imagine the four corners put together to make a perfect circle.
