Tabbed Table in Posts [library support]

[DarkPikachu]

Sept 4, 2013 1:26:17 GMT -8 Welshling said:

Ah ok question... I would like to change the tabs per posting template, using bb/css styling options so that the tabs match whatever color scheme for the posting templates i'd be using.

So my question is, 1) the css you added to your first post. That goes in the css in the admin area yes?
because I tried tags ["background-color:white;"] in the actual post and nothing happened. I then {did the css for it} and neither worked in the actual post.
2) Is there a way to get the tabbed info to change, in a post using the style tags please?

if Wormopolis doesn't mind me offering assistance, I can answer both of your Q's

1: yes the CSS in the admin area is where you paste the CSS copied from the plugin.
here's my example if it's any use:

SPOILER: Click to show

.PT_table .PT_table_header {/* Table title if there is one */
   text-align: center; font-weight:bold; font-size:11pt;
   background-image: @tab_background_image;
   border: none;}


.PT_table .PT_tabs {/* Tabs unselected */
   text-align:center; background-color: transparent;
   border: none;
   /*border-left: #404040 1px solid; border-right: #404040 1px solid*/}

.PT_table .PT_tabs_hover {/* Tabs hover */
   text-align:center; background-color: transparent;
   background-image: @tab_background_image;
   border: none;}


.PT_table .PT_tabs_selected {/* Tabs selected */
   text-align:center; background-color: transparent;
   background-image: @tab_background_image;
   border: none;}

.PT_table .PT_tabs_selected_hover {/* Tabs selected Hover */
   text-align:center; background-color: transparent;
   background-image: @tab_background_image;
   border: none;}


.PT_table .PT_spots {/* The content sections under the tabs */
   background-color:transparent;
   /* overlay the default outer border (can't change) */
   border-left: #303030 1px solid;
   border-right: #303030 1px solid;
   border-bottom: #303030 1px solid;}


.post .message table.PT_table {/* Overall table default */
   width: 90%; border: none;} /* border doesn't work here */

I've defined the variable tab_background_image: url(); not shown in the code.
you can't achieve rounded corners either.

2: .PT_table .PT_spots {/* The content sections under the tabs */
   background-color:transparent;
   /* overlay the default outer border (can't change) */
   border-left: #303030 1px solid;
   border-right: #303030 1px solid;
   border-bottom: #303030 1px solid;

   color: silver; /* Text color */
}



[Welshling]

DarkPikachu thanks for your reply, another question now then if you don't mind answering this too please?

Do i need to add both the spoiler code and the piece for .2 into my admin css?

[DarkPikachu]

oh the 2nd answer is just a mod to the spoiler code in the first... notice the spacing.

anyways, no problem ;D

[Welshling]

Ok so the spoiler tag coding, gives me an error... "variable tab_background_image is undefined on line 1833"

DarkPikachu so what should I edit the css to make it not have any errors?

[DarkPikachu]

Sept 4, 2013 3:52:23 GMT -8 Welshling said:

Ok so the spoiler tag coding, gives me an error... "variable tab_background_image is undefined on line 1833"

DarkPikachu so what should I edit the css to make it not have any errors?

lol I did say I've defined that variable, though I guess I shoulda said I didn't include it
sry...

anyways... just delete the "background-image: tab_background_image;" sections and it should work.

[Welshling]

Ok done that and for other users, i had to remove all the background-image styles from every piece of the css given. I will get back to you again if i experience further problems with the tabs in posts.

[Welshling]

delusional.freeforums.net/thread/1022/test OK so the tabs work but how would i get the tabs in this particular posting template to align within the table div? I'd like each tab to be on top of one another if possible and not to extend the height of the surrounding div.

I would like to edit the styling within the posts, so that each template would be unique colorings and stylings. Is this possible?

[DarkPikachu]

unfortunatly, I don't think that's possible. :/

[Wormopolis]

the inline styles that are added to the closing tag of each tab affect the area where the content will show up. further CSS for the content itself within the tag would have to be afected by CSS in the forum CSS, or if you had some other plugin that allowed additonal styles to run before the tabbed table code.

[Welshling]

Ok then, so I will keep bumping my plugin request.

[Alanna 🥀🖤]

Wormopolis, I adding the plug-in and am trying to fiddle with it to get it to do what I want. I managed to get it to do EVERYTHING I wanted but one thing. I want the tabs to be have a space between them and aligned to the left, they are currently right next to each other. I would also like to change the width of the tabs. Here is the thread. (It also doesn't work when using the code twice or more on the same thread in different posts. I also noticed that in the code box, other than it turning into <div>, it removes all spaces and returns as well as breaks the "Highlight Code Plug-in" so the highlight button doesn't work.)
[div style="text-align:center;"][div align="center"]
[div style="width:430px;text-align:center;background-color:#58644c;line-height:10px;font-size:15px;padding:25px;letter-spacing:4px;text-transform:uppercase;font-family:arial narrow;color:#ffffff;font-size:.9em;"]LYRICS OF CHOICE HERE[/div][table style="border:0px;width:480px;background-image:url(http://img854.imageshack.us/img854/1817/wzec.jpg);padding:30px;padding-right:25px;"][tbody][tr][td][div style="text-align:center;"][div style="width:354px;margin:20px;background-color:#ffffff;"][div style="width:418px;background-color:#ffffff;padding:8px;"][div style="width:400px;height:335px;background-color:#ffffff;text-align:justify;padding:8px;"][PTabbedContent][PTab=CHARACTER][img width="400px" src="http://img94.imageshack.us/img94/8684/0c2o.png" height="300px"][/PTab][PTab=INFORMATION][div style="padding-top:30px;padding-left:40px;"][div style="background-color:#fff;padding:10px;width:300px;"][div style="font-size:2em;text-align:center;text-transform:uppercase;font-family:georgia;"]PLAYED BY CELEBRITY[/div]
[div style="font-family:georgia;font-size:.8em;height:180px;overflow:auto;"][div style="font-style:none;font-family:georgia;float:left;color:#fff;text-transform:uppercase;background-color:#58644c;padding:20px;margin-right:8px;"]A[/div]nything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s). anything you want to talk about your character. their desired personality, history, and relations to your character(s).[/div][/div][/div][/PTab][/PTabbedContent={width:400px;border:0px;margin-left:-2px;}][/div][/div][/div][/div][/td][/tr][/tbody][/table][/div][/div][div align="center"][div style="width:430px;text-align:center;background-color:#58644c;line-height:10px;font-size:15px;padding:25px;letter-spacing:4px;text-transform:uppercase;font-family:arial narrow;color:#ffffff;font-size:.9em;"]LYRICS OF CHOICE HERE[/div][div style="font-family:arial narrow;font-size:10px;font-style:italic;letter-spacing:1px;"]TABLE BY TRINITY @ PLEASE DON'T STEAL[/div]
[/div]
And this is the CSS I have entered in the Style Sheet:
/* In Post Tabs */
/* Overall table default */
.post .message table.PT_table {width: 400px; border:0px;}
/* Table title if there is one */
.PT_table .PT_table_header {text-align: center; font-size:10px; letter-spacing:1px; width: 400px; border:0px;}
/* Tabs unselected */
.PT_table .PT_tabs {text-align:center; background-color: #221e1f; color:#fff; margin-right:10px;}
/* Tabs selected */
.PT_table .PT_tabs_selected {text-align:center; background-color: #a0a0a0; color:#fff; margin-right:10px;}
/* Tabs hover */
.PT_table .PT_tabs_hover {text-align:center; background-color: #221e1f; color:#fff; margin-right:10px;}
/* Tabs selected Hover */
.PT_table .PT_tabs_selected_hover {text-align:center; background-color: #a0a0a0; color:#fff; margin-right:10px;}
/* The content sections under the tabs */
.PT_table .PT_spots {background-color:transparent; width:400px; border:0px;}

[DarkPikachu]

Wormopolis:
may I reccomend this code for his fix:
tcll5850.hostoi.com/tabs.zip

if I'm positive on this, I believe it' 100% portable and can be customized however.

but if I can suggest 1 extra feature...
dummy tabs which aren't clickable (they're there only for display purposes)

such as:
[PTabbedContent] //no heaser
[PDTab=function_name(][/PDTab]
[PTab=input1,][/PTab]
[PTab=input2,][/PTab]
[PTab=input3][/PTab]
[PDTab=):][/PDTab]
[/PTabbedContent]

customizable widths as well plox

[Wormopolis]

you wont be able to put tabbed table stuff inside a code tag. there isnt an easy way to know if the content is inside a code tag or not when the plugin runs. the only thing possible would be to NOT have it run on any post that has a code tag inside.. but that also means you cant mix the two in the same post. it looks at the content after the fact and doesnt know if the content is wrapped with code tags or not.

tab width I have to look into because tabs are just cells going across... I might be able to trick it into adding some spacer cells, but putting individual width on each tab wont be possible since I have nowhere to keep it.

I could make it do auto:width on that scenario, but that would be all I could do.

[Alanna 🥀🖤]

Sept 8, 2013 16:07:39 GMT -8 Wormopolis said:

you wont be able to put tabbed table stuff inside a code tag. there isnt an easy way to know if the content is inside a code tag or not when the plugin runs. the only thing possible would be to NOT have it run on any post that has a code tag inside.. but that also means you cant mix the two in the same post. it looks at the content after the fact and doesnt know if the content is wrapped with code tags or not.

tab width I have to look into because tabs are just cells going across... I might be able to trick it into adding some spacer cells, but putting individual width on each tab wont be possible since I have nowhere to keep it.

I could make it do auto:width on that scenario, but that would be all I could do.

I have been putting it in code tags but added *'s between the codes so it doesn't recognize the code though. That usually does the trick... How else would I have other members get the code and use it in their own posts?

Also, do you know anything about why the codes are not working when posted twice in the same thread? I think it is because I have the tabs named the same on all the posts but I don't want to have to change them every time... I would like them the same. Is there a way for the plug-in to read each post separately?

[Wormopolis]

yeah its because the tabs all have the same ID. so the functions used to coordinate the switching is only working on the top table. Im looking to see if I can add something in there to stop that