Post by clemie on Sept 2, 2023 17:24:09 GMT -8
URL:https://valdis.boards.net/
Hello,
I went to try and find support for the plugin, the support button took me here and I searched around for an official thread but did not see one. I also searched the other threads for an answer but could not find one. It seems this plugin was updated as an older version I have listed everything in a row (see below) and the new one does not. I'd like to keep the new one as it offers more options with a side bar and other features.
This is how the current one looks (different site as well, please disregard color scheme that will change after)
The original coding put in is :
I tried replacing it with the following code
CSS:
I wrapped the entire tabbed section in a div with the class tab-container to create a flex container. Within the tab container, I set the flex-direction to row, which will make the tabs and tab content appear side by side. This did what I wanted but it has not removed the images that should show below. I am 1000% not great at coding so I have no idea what I did wrong to cause this to mess up. Any help would be greatly appreciated.
Hello,
I went to try and find support for the plugin, the support button took me here and I searched around for an official thread but did not see one. I also searched the other threads for an answer but could not find one. It seems this plugin was updated as an older version I have listed everything in a row (see below) and the new one does not. I'd like to keep the new one as it offers more options with a side bar and other features.
This is how the current one looks (different site as well, please disregard color scheme that will change after)
The original coding put in is :
<div class="dtt container boards">
<div class="title-bar{if $[plugin.settings.center_title] == '1'} center{/if}">
<h2>$[plugin.settings.title]</h2>
</div>
<div class="content cap-bottom">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr class="dtt_header_row">
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}
<td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">
<table class="list" role="grid">
<thead>
<tr>
<th class="dtt_sidebar_title">$[plugin.settings.sidebar_title]</th>
</tr>
</thead>
</table>
</td>
<td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>
{/if}{/if}
<td valign="top">
<table class="list" role="grid">
<thead>
<tr class="dtt_tabs">
{foreach $[plugin.settings.tabs]}
<th class="board item clickable" onclick="dtt.toggleTab($(this));">$[plugin.settings.tabs.tab_title]</th>
{/foreach}
</tr>
</thead>
</table>
</td>
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}
<td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>
<td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">
<table class="list" role="grid">
<thead>
<tr>
<th class="dtt_sidebar_title last">
$[plugin.settings.sidebar_title]
</th>
</tr>
</thead>
</table>
</td>
{/if}{/if}
</tr>
<tr class="dtt_content_row">
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}
<td class="dtt_hidden_sidebar_content_cell" valign="top">
<table class="list" role="grid">
<tbody>
<tr>
<td class="dtt_sidebar_content">
$[plugin.settings.sidebar_content]
</td>
</tr>
</tbody>
</table>
</td>
{/if}{/if}
<td valign="top">
<table class="list" role="grid">
<tbody>
<tr class="dtt_content">
<td class="dtt_tabs_content">
{foreach $[plugin.settings.tabs]}
<div style="display: none;">
$[plugin.settings.tabs.content]
</div>
{/foreach}
</td>
</tr>
</tbody>
</table>
</td>
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}
<td class="dtt_hidden_sidebar_content_cell" valign="top">
<table class="list" role="grid">
<tbody>
<tr>
<td class="dtt_sidebar_content last">
$[plugin.settings.sidebar_content]
</td>
</tr>
</tbody>
</table>
</td>
{/if}{/if}
</tr>
</table>
</div>
</div>
I tried replacing it with the following code
<div class="dtt container boards">
<div class="title-bar{if $[plugin.settings.center_title] == '1'} center{/if}">
<h2>$[plugin.settings.title]</h2>
</div>
<div class="content cap-bottom">
<div class="tab-container">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr class="dtt_header_row">
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}
<td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">
<table class="list" role="grid">
<thead>
<tr>
<th class="dtt_sidebar_title">$[plugin.settings.sidebar_title]</th>
</tr>
</thead>
</table>
</td>
<td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>
{/if}{/if}
<td valign="top">
<table class="list" role="grid">
<thead>
<tr class="dtt_tabs">
{foreach $[plugin.settings.tabs]}
<th class="board item clickable" data-tab="tab-$[loop.index]" onclick="dtt.toggleTab($(this));">$[plugin.settings.tabs.tab_title]</th>
{/foreach}
</tr>
</thead>
</table>
</td>
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}
<td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>
<td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">
<table class="list" role="grid">
<thead>
<tr>
<th class="dtt_sidebar_title last">
$[plugin.settings.sidebar_title]
</th>
</tr>
</thead>
</table>
</td>
{/if}{/if}
</tr>
<tr class="dtt_content_row">
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}
<td class="dtt_hidden_sidebar_content_cell" valign="top">
<table class="list" role="grid">
<tbody>
<tr>
<td class="dtt_sidebar_content">
$[plugin.settings.sidebar_content]
</td>
</tr>
</tbody>
</table>
</td>
{/if}{/if}
<td valign="top">
<div class="tab-content">
{foreach $[plugin.settings.tabs]}
<div id="tab-$[loop.index]" class="tab-pane">
$[plugin.settings.tabs.content]
</div>
{/foreach}
</div>
</td>
{if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}
<td class="dtt_hidden_sidebar_content_cell" valign="top">
<table class="list" role="grid">
<tbody>
<tr>
<td class="dtt_sidebar_content last">
$[plugin.settings.sidebar_content]
</td>
</tr>
</tbody>
</table>
</td>
{/if}{/if}
</tr>
</table>
</div>
</div>
</div>
CSS:
.tab-container {
display: flex;
flex-direction: row;
}
.tab-container .dtt_tabs {
display: flex;
flex-direction: row;
}
.tab-container .dtt_tabs .board.item {
flex: 1;
text-align: center;
}
.tab-container .tab-content {
flex: 1;
}
.tab-container .tab-pane {
display: none;
}
.tab-container .tab-pane:first-child {
display: block;
}
I wrapped the entire tabbed section in a div with the class tab-container to create a flex container. Within the tab container, I set the flex-direction to row, which will make the tabs and tab content appear side by side. This did what I wanted but it has not removed the images that should show below. I am 1000% not great at coding so I have no idea what I did wrong to cause this to mess up. Any help would be greatly appreciated.