[SOLVED] BBCodes used in designing tables

Alright, so I made this topic because I have been in much trouble when it comes to bbcodes for tables. I know that Forumotion has already this option that will let you make a table, but what my problem here is that I simply do not know the elements required to customize a table.

I have researched a lot in Google about this, but I am just so hopeless to learn from them since it doesn't make it work.

If, by chance, you have some spare time, would you mind sharing to me your knowledge about those bbcodes used in designing tables? I'd appreciate your help.

I think you may find some info here to get you started. There are tons of possibilities and tons of codes to go on, depending on what you are looking for:

http://custom.simplemachines.org/mods/index.php?mod=2505 (you can't download the mods to your forum)
https://brivium.com/resources/advanced-table-bbcode.35/
http://www.teamopolis.com/tools/bbcode-table-generator.aspx

and you might want to search for old topics & posts @ help.forumotion.com . Just add some words to the search engine, like: table border for instance and read through the posts.

Thanks to that but I am still in no hopes though. However, this is what I actually want to achieve. How is this coded through BBCode?

Tables actually allows you to add classes on it, for example:

Code:

[table class="yourclassname"][tr][td][/td][/tr][/table]

You can style it with:

Code:

.postbody .content .yourclassname {
  /* YOUR STYLE HERE */
}

JamesPH wrote:Thanks to that but I am still in no hopes though. However, this is what I actually want to achieve. How is this coded through BBCode?

by practicing a lot with style combinations But seriously, why not create a picture and make it clickable using something like this:

Open in a new browser tab:

Code:

<a href="YOUR URL HERE" target="_blank" title="YOUR HOVER OVER MESSAGE HERE" onclick="window.open(this.href);return false;"><center><img src="YOUR PICTURE URL HERE"></center></a>

Open in the same browser tab:

Code:

<a href="YOUR URL HERE" target="" title="YOUR HOVER OVER MESSAGE HERE" onclick="window.open(this.href);return false;"><center><img src="YOUR PICTURE URL HERE"></center></a>

@Samantha I'll try that one. Thanks.

Wilson wrote:

Code:

.postbody .content .yourclassname {
  /* YOUR STYLE HERE */
}

@Wilson Will I be using HTML tags for that?

JamesPH wrote:@Wilson Will I be using HTML tags for that?

No. You'll be using CSS properties for that, such as:

Code:

 padding: 10px;
 border: 1px solid #fff;

This is how it would look like

Code:

.postbody .content .yourclassname {
 padding: 10px;
 border: 1px solid #fff;
}

Keep in mind that you can change the "yourclassname" to your choice.

@Wilson

Ok I think that's easier (to look at). I'll be exploring this.

@JamesPH, I can help you design your own table, just ask anytime.

JamesPH wrote:Thanks to that but I am still in no hopes though. However, this is what I actually want to achieve. How is this coded through BBCode?

If you want, I can provide you with a draft code that's similar, but not exact. Niko was the one who proposed the concept for these tables and I added my own little modifications to them which we agreed on.

@Ange Tuteur thanks! I would love to. I will just modify it to my liking.

Alright, add this to your CSS :

Code:

.tuto-header, .tuto-content, .tuto-footer {
  border-spacing:0;
  width:100%;
}

/* tuto header */
.tuto-header {
  color:#FFF;
  font-family:Arial, Verdana, Sans-serif;
  background:#69C;
  border:1px solid #69C;
  padding:3px;
  position:relative;
}

.tuto-logo, .tuto-type {
  width:150px;
  height:75px;
  text-align:center;
}

.tuto-title {
  font-size:22px;
  text-align:center;
}

.tuto-logo:after {
  text-rendering:auto;
  font:normal normal normal 48px/1 FontAwesome;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.announcement .tuto-logo:after { content:"\f0a1" }


.tuto-type:after {
  content:"Template";
  font-size:12px;
  font-weight:bold;
  color:#69C;
  background:#FFF;
  display:inline-block;
  padding:3px 9px;
  position:absolute;
  top:0;
  right:0px;
}

.announcement .tuto-type:after { content:"Announcement" }


/* tuto content */
.tuto-content {
  background:#FFF;
  border:1px solid #69C;
  border-bottom:1px solid #69C;
  padding:3px;
}


/* tuto footer */
.tuto-footer {
  background:#FFF;
  border:1px solid #69C;
  border-top:none;
  position:relative;
}

.tuto-credit {
  text-align:justify;
  vertical-align:middle;
  padding:10px 6px;
}

.tuto-brand {
  width:120px;
  height:60px;
  vertical-align:bottom;
  text-align:center;
  padding:6px 0;
}

You can change the icon for the template by modifying this part :

Code:

.announcement .tuto-logo:after { content:"\f0a1" }

( It's using font awesome : https://fortawesome.github.io/Font-Awesome/cheatsheet/ )

and you can modify the tag texts ( Announcement ) too :

Code:

.announcement .tuto-type:after { content:"Announcement" }

Lastly use this bbcode for posting :

Code:

[table class="tuto-header announcement"][tr]
[td class="tuto-logo"][/td]
[td class="tuto-title"]Announcement title[/td]
[td class="tuto-type"][/td]
[/tr][/table]
[table class="tuto-content"][tr][td]

Content here

[/td][/tr][/table]
[table class="tuto-footer"][tr][td class="tuto-credit"]Closing[/td][td class="tuto-brand"]Footer Brand[/td][/tr][/table]

Thanks @Ange Tuteur !

No problem.