Post by Jordan on Nov 10, 2012 16:04:47 GMT -8
This is the version 5 plugin of my original tabbed table.
Preview 1
Preview 2
I've designed the table so that it will automatically take the colors of your forum, but there were a few limitations to that, so if you want to customize the colors, you can modify the CSS and HTML as shown below. (Click the spoiler tag to see the code.)
To do this, after you have imported the plugin, go to Admin > Plugins > Build > Dynamically Tabbed Table > Components > CSS Box. You will see the following. Remove the red, and update the colors.
If you want to move the table to a specific place, place the code below wherever you want the table to appear. This can go in your custom templates, headers and footers, or in another plugin. Note that if you put this code in another plugin, this plugin will need to be listed under the other plugin on the Manage Plugins page where you can re-order the plugins. Just make a post in this thread if this doesn't make sense.
If you want to have a clickable list in a tab like I had on the previous version (preview), insert the following code into your tab.
Put this in your Global Footer if you want the table to be hidden on all custom pages.
Other Options
- Make the table appear on every page
- Make all the tabs the same height with overflow (a scrollbar)
- Remove the titlebar
- Change the table's width
Preview 1
Preview 2
I've designed the table so that it will automatically take the colors of your forum, but there were a few limitations to that, so if you want to customize the colors, you can modify the CSS and HTML as shown below. (Click the spoiler tag to see the code.)
To do this, after you have imported the plugin, go to Admin > Plugins > Build > Dynamically Tabbed Table > Components > CSS Box. You will see the following. Remove the red, and update the colors.
/* Background color of tabs */
table.list > thead > tr.dtt_tabs > th,
table.list > tbody > tr.dtt_tabs > td,
th.dtt_sidebar_title {
/**
* Look up @container_background_color_2 in
* Admin > Themes > Colors And Styles > Style Sheet
* for the recommended color.
*/
/* background-color: #f6f6f6; */
}
/* Hover color of tabs */
.list .item.state-hover,
.list .board.item:hover {
/**
* Look up @container_background_color_1 in
* Admin > Themes > Colors And Styles > Style Sheet
* for the recommended color.
*/
/* background-color: #efefef; */
}
/* Tab selected color */
.list .item.state-selected {
/**
* Look up @container_background_color_1 in
* Admin > Themes > Colors And Styles > Style Sheet
* for the recommended color.
*/
/* background: #efefef; */
}
table.list > thead > tr.dtt_tabs > th,
table.list > tbody > tr.dtt_tabs > td,
th.dtt_sidebar_title {
/**
* Look up @container_background_color_2 in
* Admin > Themes > Colors And Styles > Style Sheet
* for the recommended color.
*/
/* background-color: #f6f6f6; */
}
/* Hover color of tabs */
.list .item.state-hover,
.list .board.item:hover {
/**
* Look up @container_background_color_1 in
* Admin > Themes > Colors And Styles > Style Sheet
* for the recommended color.
*/
/* background-color: #efefef; */
}
/* Tab selected color */
.list .item.state-selected {
/**
* Look up @container_background_color_1 in
* Admin > Themes > Colors And Styles > Style Sheet
* for the recommended color.
*/
/* background: #efefef; */
}
If you want to move the table to a specific place, place the code below wherever you want the table to appear. This can go in your custom templates, headers and footers, or in another plugin. Note that if you put this code in another plugin, this plugin will need to be listed under the other plugin on the Manage Plugins page where you can re-order the plugins. Just make a post in this thread if this doesn't make sense.
<div id="move-dtt"></div>
If you want to have a clickable list in a tab like I had on the previous version (preview), insert the following code into your tab.
<div class="dtt-item-list">
<ul>
<li><a href="#" onclick="dtt.toggleItem(this, '1'); return false;">Item 1</a></li>
<li><a href="#" onclick="dtt.toggleItem(this, '2'); return false;">Item 2</a></li>
<li><a href="#" onclick="dtt.toggleItem(this, '3'); return false;">Item 3</a></li>
</ul>
</div>
<div class="dtt-item-content">
<div class="default">
The default message.
</div>
<div class="item1" style="display: none;">
Item 1 content
</div>
<div class="item2" style="display: none;">
Item 2 content
</div>
<div class="item3" style="display: none;">
Item 3 content
</div>
</div>
<ul>
<li><a href="#" onclick="dtt.toggleItem(this, '1'); return false;">Item 1</a></li>
<li><a href="#" onclick="dtt.toggleItem(this, '2'); return false;">Item 2</a></li>
<li><a href="#" onclick="dtt.toggleItem(this, '3'); return false;">Item 3</a></li>
</ul>
</div>
<div class="dtt-item-content">
<div class="default">
The default message.
</div>
<div class="item1" style="display: none;">
Item 1 content
</div>
<div class="item2" style="display: none;">
Item 2 content
</div>
<div class="item3" style="display: none;">
Item 3 content
</div>
</div>
Put this in your Global Footer if you want the table to be hidden on all custom pages.
<script type="text/javascript">
$(document).ready(function() {
if (/^page$/i.test(proboards.data('route').name)) {
$('div.dtt.container.boards').hide();
}
});
</script>
$(document).ready(function() {
if (/^page$/i.test(proboards.data('route').name)) {
$('div.dtt.container.boards').hide();
}
});
</script>
Other Options
- Make the table appear on every page
- Make all the tabs the same height with overflow (a scrollbar)
- Remove the titlebar
- Change the table's width
