Creating Boxcodes 2: Borders
This is a very basic guide to creating boxcodes. We have a number of players who are very talented at this and who can create wonders. The purpose of this guide isn't to give you all the tricks of boxcode making - but to give you enough that you can identify what you're doing, and what each thing means.
2.Borders
We've already looked at Styles. Now, lets have a look at how we put a border on our style brag. There are two ways to do this. With the command "border" or "box shadow". We'll look at both here.
Border
This puts a border (unsurprisingly!) around the style brag is it for. It has a particular format
border: <type> <size> <colour>
- Border Types
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
- ridge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- Border Size
- This is denoted in pixels (px) - it can not be denoted in % so we ask that you keep your borders reasonable, to ensure that they don't disrupt mobile users.
- It must be formatted with px after the number.
- Border Colour
- This can be the name of the colour
- It can be the hex code - this must be denoted by # before it.
- It can be the rgba code in the format rgba(X,X,X,1)
Some examples below.
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow dotted border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow dotted border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow dashed border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow dashed border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow solid border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow solid border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow double border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow double border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow groove border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow groove border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow ridge border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow ridge border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow inset border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow inset border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow outset border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow outset border
None of these had any padding - which gives you an idea of what it looks like when a style brag doesn't have it.
Box-Shadow
Not literally a boarder, but this is a shadow which goes around the outside of a style brag so can be used as one. It, also, has a particular format
box-shadow: h-offset v-offset blur spread colour
as with borders, this can only be set in PX and we ask that you take this into account and are considerate of mobile users.
- H-offset. This is how horizontally offset from the style brag box the shadow is. This is a number and px. A positive value puts the shadow on the right side of the box (by the number of px you've defined), a negative one on the left.
- V-offset. This is how vertically offset from the style brag box the shadow is. This is a number and px. A positive value puts the shadow below the box (by the number of px you've defined), a negative one puts it above.
- Blur. This is the blur of the shadow. It is a number followed by px. The bigger the number, the more blurred and less solid the shadow is.
- Spread. This is how far the blur spreads out. It is a number followed by px. The bigger the number, the bigger the shadow.
- Colour. This is the colour of the blur. It can be denoted by name, hex code or rgba of colour.
Some examples below.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 10px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to -10px H-offset, 10px V-offset, 10px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, -10px V-offset, 10px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 0px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 80px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 10px blur and 0px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 10px blur and 80px spread.
None of these had any padding - which gives you an idea of what it looks like when a style brag doesn't have it.
This is how to link to an external image. It can not be resized (although putting it in a table does constrain it). 
This is the "Image URL" from under the image in "My Gallery". 
This is the "Image URL" from under the image in "My Gallery". Same as /medium 
This is the "Image URL" from under the image in "My Gallery". 
