2017-10-21, 11:57 AM
Hello there, Today I am going to share my little code for a thread header.
It is basically a way to have thread information above the thread thus way leaving more space for a more clean and sleek looking thread view.
Please understand that this was tested on "Tesla Gaming (Dark)" so I am unsure if it will work on other themes. If you test it and it works please confirm for others.
Recommened Plugins & Programs
Template Editor
FASTyle
Notepad ++
First we are going to start by Opening the following.
Themes & Templates > Templates > Your Theme > ShowThread > ShowThread
Find the Following :
This is usually in the first 30 to 40 Lines of Code.
Add the Following Under it :
Secondly Open the Following :
Themes & Templates > Themes > Your Theme > Stylesheets > global.css
Add the Following to the Bottom :
After you've done this, depending on the current theme you are using you will have to do some edits to the position and maybe the width, also in order to use some of the variables above you will need to have XThreads and PHP and Template Conditionals and Forum Display Avatars Plugins. Unless you can edit the code to show the avatars and date/time without.
You should see the following
I thank you for viewing this tutorial and hopefully it worked you all. If you need support please PM me or add my discord "Khaleesi Hale#1153"
Updates will come to this thread once I make some for "Post Reply Button" and "Rate Thread"
Sincerely,
Khaleesi.
It is basically a way to have thread information above the thread thus way leaving more space for a more clean and sleek looking thread view.
Please understand that this was tested on "Tesla Gaming (Dark)" so I am unsure if it will work on other themes. If you test it and it works please confirm for others.
Recommened Plugins & Programs
Template Editor
FASTyle
Notepad ++
First we are going to start by Opening the following.
Themes & Templates > Templates > Your Theme > ShowThread > ShowThread
Find the Following :
{$header}
This is usually in the first 30 to 40 Lines of Code.
Add the Following Under it :
<div class="showthread_container">
<div class="table-wrap">
<div class="table-cell-mid avatarep">
<a href="{$user['profilelink']}" title="{$mybb->user['username']}">{$avatarep_thread}</a>
</div>
<div class="table-cell-mid showthread-info">
{$thread['subject']}
</div>
<div class="showthread-desc">by {$thread['username']} - {$thread['threaddate']}, {$thread['threadtime']}
</div>
</div>
</div><br />
Secondly Open the Following :
Themes & Templates > Themes > Your Theme > Stylesheets > global.css
Add the Following to the Bottom :
/* Show Thread Header */
.showthread_container {
/* background: linear-gradient(-90deg, rgba(250,250,250,0.2), rgba(39, 127, 165,0.4)); */
background: #2978AD;
-webkit-box-shadow: 0px, 5px, 6px, rgba(0,0,0,0.8);
-moz-box-shadow: 0px, 5px, 6px, rgba(0,0,0,0.8);
border-radius: 2px;
}
.table-wrap {
display: table;
width: 1662px;
table-layout: fixed;
}
.table-cell-mid.showthread-info {
position: relative;
left: -480px;
top: -8px;
color: #fff;
font-weight: bold;
font-size: 16px;
}
.showthread-desc {
left: -1034px;
bottom: -35px;
position: relative;
}
.table-cell-mid {
display: table-cell;
vertical-align: middle;
}
After you've done this, depending on the current theme you are using you will have to do some edits to the position and maybe the width, also in order to use some of the variables above you will need to have XThreads and PHP and Template Conditionals and Forum Display Avatars Plugins. Unless you can edit the code to show the avatars and date/time without.
You should see the following
I thank you for viewing this tutorial and hopefully it worked you all. If you need support please PM me or add my discord "Khaleesi Hale#1153"
Updates will come to this thread once I make some for "Post Reply Button" and "Rate Thread"
Sincerely,
Khaleesi.