Basic Coding and Tables Guide

View previous topic View next topic Go down

Basic Coding and Tables Guide

Post by Draxion on 18th November 2016, 2:19 am

Basic Coding

Italics

Code:
[i]Words go here[/i]


Bold

Code:
[b]Words go here[/b]

Underline

Code:
[u]Words go here[/u]

Strike


Code:
[strike]Words go here[/strike]

Fading effect

Code:
[fade]Fading effect[/fade]

Fading effect with color

Code:
[fade][color=#hexcode here]words here[/color][/fade]

Vertical mirror effect 

Code:
[flipv]Words here[/flipv]

Horizontal mirror effect 

Code:
[fliph]Words here[/fliph]


Blur

Code:
[blur]Words go here[/blur]

Blur plus color

Code:
[blur][color=#color goes here]Words go here[/blur][/color]

Change font color
[You must be registered and logged in to see this image.]


Code:
[color=#hexcode here]words here[/color]

Change font

These are all the available fonts on CAC. All fonts after Verdana are recommended to be used with size 18 font, as they are small for some reason.
The size is already automatically enabled, you can change the size if you so wish.

Arial
Arial Black
Comic Sans
Courier New
Georgia
Impact
Sants-Serif
Serif
Times New Roman
Trebuchet MS
Verdana
Amita
Architects Daughter
Baloo Thambi
Calligraffitti
Changa
Chewy
Cookie
Dancing Script
Exo 2
Great Vibes
Handlee
Indie Flower
Julee
Julius Sans One
Kalam
Kaushan Script
Lobster Two
Michroma
Neucha
Orbitron
Permanent Marker
Poiret One
Rancho
Sacramento
Shadows Into Light
Shrikhand
Voltaire
Yantramanav
Yatra One
Yellowtail

Code:

[font=Arial]Arial[/font]
[font=Arial Black]Arial Black[/font]
[font=Comic Sans MS]Comic Sans[/font]
[font=Courier New]Courier New[/font]
[font=Georgia]Georgia[/font]
[font=Impact]Impact[/font]
[font=Sans-serif]Sants-Serif[/font]
[font=Serif]Serif[/font]
[font=Times New Roman]Times New Roman[/font]
[font=Trebuchet MS]Trebuchet MS[/font]
[font=Verdana]Verdana[/font]
[font=Amita][size=18]Amita[/size][/font]
[font=Architects Daughter][size=18]Architects Daughter[/size][/font]
[font=Baloo Thambi][size=18]Baloo Thambi[/size][/font]
[font=Calligraffitti][size=18]Calligraffitti[/size][/font]
[font=Changa][size=18]Changa[/size][/font]
[font=Chewy][size=18]Chewy[/size][/font]
[font=Cookie][size=18]Cookie[/size][/font]
[font=Dancing Script][size=18]Dancing Script[/size][/font]
[font=Exo 2][size=18]Exo 2[/size][/font]
[font=Great Vibes][size=18]Great Vibes[/size][/font]
[font=Handlee][size=18]Handlee[/size][/font]
[font=Indie Flower][size=18]Indie Flower[/size][/font]
[font=Julee][size=18]Julee[/size][/font]
[font=Julius Sans One][size=18]Julius Sans One[/size][/font]
[font=Kalam][size=18]Kalam[/size][/font]
[font=Kaushan Script][size=18]Kaushan Script[/size][/font]
[font=Lobster Two][size=18]Lobster Two[/size][/font]
[font=Michroma][size=18]Michroma[/size][/font]
[font=Neucha][size=18]Neucha[/size][/font]
[font=Orbitron][size=18]Orbitron[/size][/font]
[font=Permanent Marker][size=18]Permanent Marker[/size][/font]
[font=Poiret One][size=18]Poiret One[/size][/font]
[font=Rancho][size=18]Rancho[/size][/font]
[font=Sacramento][size=18]Sacramento[/size][/font]
[font=Shadows Into Light][size=18]Shadows Into Light[/size][/font]
[font=Shrikhand][size=18]Shrikhand[/size][/font]
[font=Voltaire][size=18]Voltaire[/size][/font]
[font=Yantramanav][size=18]Yantramanav[/size][/font]
[font=Yatra One][size=18]Yatra One[/size][/font]
[font=Yellowtail][size=18]Yellowtail[/size][/font]

Linebreak:



Code:
[hr]

Spoiler:
Spoiler:

Code:
[spoiler][/spoiler]

Code:
This disables the WYSWYG/BBCode, allowing users to copy it.

Code:
[code]BBCode and words go here[/code]

Font Size

Code:
[size= any size font within reason] words here[/size]

[You must be registered and logged in to see this link.]

Code:
[url=link here]whatever you want here[/url]

To put in a picture:
Code:
[img]Picture link here[/img]

Picture with link:
Code:
[url=link here][img]image link here[/img][/url]

All of these can be used together, separately, or paired with just one other.

Left alignment

Code:
[left]words here[/left]

Center alignment

Code:
[center]words here[/center]

Right alignment

Code:
[right]words here[/right]

Justified
Code:
[justify][/justify]

subscript

Code:
[sub]words here[/sub]

supscript

Code:
[sup][/sup]

Horizontal scrolling

Code:
[scroll]words here[/scroll]

vertical scrolling

Code:
[updown][/updown]


  • List


Code:
[list][*] words here
[*] words here[/list]


  1. Numerical list


Code:
[list=1][*]words here
[/list]

Creating Tables

This is a basic table
To center the outside of the table, just add
[ center]TABLE CODE HERE[/ center]
to the beginning and end of your post.


Code:
[table][tr][td]Words here[/td][/tr][/table]


Centering the inside of your table
Other alignments work, as well.

Code:
[table][tr][td][center]words here[/center][/td][/tr][/table]

Table sizes are completely customizable! However, we do recommend not to use more than 900px as it will go out of the forum post.
Code:
[table style="width: Variable herepx; height: 50px;"][tr][td]Table content here[/td][/tr][/table]




Table Borders

This is a solid border
Adjust Border: 3px to the size you want. This applies to all border styles

Code:
[table style="border: 3px solid #000000;"][tr][td] words here[/td][/tr][/table]

this is a dotted border
Code:
[table style="border: 3px dotted #000000;"][tr][td]this is a dotted border[/td][/tr][/table]

this is a dashed border
Code:
[table style="border: 3px dotted #000000;"][tr][td]this is a dashed border[/td][/tr][/table]

this is a double border
Code:
[table style="border: 3px double #000000;"][tr][td]this is a double border[/td][/tr][/table]

this is a groove  border
Code:
[table style="border: 3px groove #000000;"][tr][td]this is a groove border[/td][/tr][/table]

this is a ridge border
Code:
[table style="border: 3px ridge #000000;"][tr][td]this is a ridge border[/td][/tr][/table]

this is an inset border
Code:
[table style="border: 3px inset #000000;"][tr][td]this is an inset border[/td][/tr][/table]

this is an outset border
Code:
[table style="border: 3px outset #000000;"][tr][td]this is an outset border[/td][/tr][/table]

Borders can be placed in different positions for various reasons.

Border-right styleBorder-right style
Code:
[table][tr][td style="border-right: 1px solid #000000;"]Border-right style[/td][td]Border-right style[/td][/tr][/table]

Border-left styleBorder-left style
Code:
[table][tr][td style="border-left: 1px solid #000000;"]Border-left style[/td][td]Border-left style[/td][/tr][/table]

Border-top styleBorder-top style
Code:
[table][tr][td style="border-top: 1px solid #000000;"]Border-top style[/td][td]Border-top style[/td][/tr][/table]

Border-bottom styleBorder-bottom style
Code:
[table][tr][td style="border-bottom: 1px solid #000000;"]Border-bottom style[/td][td]Border-bottom style[/td][/tr][/table]




Adding a background image or color to a table

This is a white background
Code:
[table style="background-color: #any hexcode you'd like;"][tr][td][color=#this is the font color inside the table]words here[/color][/td][/tr][/table]

This is a table with full opacity
Code:

[table style="opacity:1.0;"][tr][td]This is a table with full opacity[/td][/tr][/table]
Opacity adds a "table within a table effect". 1.0 gives the table full opacity, meaning not transparent, 0.9 lowers that a bit, 0.8 lowers it by 2, 0.7 lowers it by 3, and so on and so forth. 0.5 is half.

This is a table already set up for you.
Code:
[table style="padding:30px; background-color:#background color here;"][tr][td style="padding: 5px; background-color:#padding color here; width:500px; opacity:0.7;"][color=font color here]This is a table already set up for you.[/color][/td][/tr][/table]


This is a picture table already set up for you
Code:

[table style="padding:30px; background-image:url(Image here);"][tr][td style="padding: 5px; background-color:#color here; width:350px; opacity:0.7;"][color=#font color here]This is a picture table already set up for you[/color][/td]
[/tr]
[/table]
Head Baker
avatar
Draxion

Back to top Go down

Re: Basic Coding and Tables Guide

Post by Draxion on 18th November 2016, 2:53 am

More Complex Table Coding
Some CSS coding can be mixed with BBCode, to enable text shadows and table shadows.
Both of these are, of course, used in tables.
The code variables go:
Horizontal, Vertical, Blur Radius, Distance, and finally, color.
Change the 0's to your desired size on all of these codes.
Remember, you must have either a horizontal or vertical px to have a shadow.
An example being:

This doesn't have any blur!
And the code for that:
Code:
[table style="text-shadow: 0px 0px #COLOR GOES HERE;"][tr][td]Text here[/td][/tr][/table]

To have a horizontal shadow without vertical and have blur, you must have 0 in place of it.

This is 3px blur!

Code:
[table style="text-shadow: 0px 0 0px #COLOR GOES HERE;"][tr][td]Leave the 0 in the middle and change the other two with px at the end.[/td]
[/tr]
[/table]


To have a vertical shadow without blur, you must have 0 in place of the horizontal px.

This is vertical shadow without blur and a horizontal border!

Code:
[table style="text-shadow: 0 0px #COLOR GOES HERE;"][tr][td]The first 0 MUST stay 0. You CAN change the 0px to another number though![/td][/tr][/table]

This is how to widen/sharpen the blur on your text! You must leave the two 0's in front of the third number.

This is an enhanced blur effect!
Code:
[table style="text-shadow: 0 0 0px #COLOR GOES HERE;"][tr][td]This is an enhanced blur effect! [/td]
[/tr]
[/table]


Lastly, you can do any of the above effects on a table, as well.

Isn't this cool?!

For just a plain table:

Code:
[table style="box-shadow: 0px 0px 0px #COLOR GOES HERE"][tr][td]Table content here[/td][/tr][/table]

With picture:

Code:

[table style="padding:30px;box-shadow: 0px 0px 0px #COLOR GOES HERE; background-image:url(PICTURE HERE);"][tr][td style="padding: 5px; background-color:#fff; width:350px; opacity:1.0;"][color=#font color here]Content here[/color][/td]
[/tr]
[/table]
Head Baker
avatar
Draxion

Back to top Go down

Re: Basic Coding and Tables Guide

Post by Draxion on 18th November 2016, 2:53 am

This will be an extra spot for future content
Head Baker
avatar
Draxion

Back to top Go down

Re: Basic Coding and Tables Guide

Post by Draxion on 18th November 2016, 2:53 am

This will be a spot for future content and / or user submitted table coding
If anyone has any questions at all or requires help to code their shop and / or topic, please send me a message, and I will respond to you when I get a chance. Thank you.
Head Baker
avatar
Draxion

Back to top Go down

Re: Basic Coding and Tables Guide

Post by Sponsored content

Sponsored content

Back to top Go down

View previous topic View next topic Back to top

- Similar topics
Permissions in this forum:
You cannot reply to topics in this forum