[For 1.8] [1.8] Dropdown panel: Post Options, Thread display options
#1
Change this:

[Image: 8JcZNjk.png]

To:
[Image: SIG3Vgg.png]
[Image: d8Eg2HI.png]

1 - create extra.css (Admin CP > Templates & Style > Themes > Add Stylesheet)
1.1 - Add code below:
.droppanel {
 background-color: #efefef;
 width: 170px;
 margin: 0px auto;
 text-align: center;
 font-size: 11px;
 padding-bottom: 3px;
 border-radius: 0px 0px 4px 4px;
 border: 1px solid #ccc;
 border-width: 0px 1px 1px;
 border-style: none solid solid;
}
2 - In newthread template
2.1 - Find
</table>
2.2 - Add below:
<div class="droppanel">
 <a href="#" class="post_options">Post Options</a>
</div>
<script type="text/javascript">
 var elements = $("tr").filter(':eq(13), :eq(14), :eq(15), :eq(16)');
 elements.hide();
 $(".post_options").click(function(e) {
 e.preventDefault();
 elements.toggle();
 });
</script>

It´s all...
You can make something too newreply etc...



Change this:

[Image: PWTvPXs.png]

To:

[Image: epqcbaf.png]
[Image: MTe3l7f.png]

1 - create extra.css (Admin CP > Templates & Style > Themes > Add Stylesheet)
1.1 - Add code below:
.droppanel {
 background-color: #efefef;
 width: 170px;
 margin: 0px auto;
 text-align: center;
 font-size: 11px;
 padding-bottom: 3px;
 border-radius: 0px 0px 4px 4px;
 border: 1px solid #ccc;
 border-width: 0px 1px 1px;
 border-style: none solid solid;
}

2 - In forumdisplay_threadlist template
2.1 - Find:
</table>
2.2 - Add below:
<div class="droppanel">
 <a href="#" class="exibition_topic">Thread Display Options</a>
</div>
<script type="text/javascript">
 var elements = $("form").filter(':eq(1)');
 elements.hide();
 $(".exibition_topic").click(function(e) {
 e.preventDefault();
 elements.toggle();
 });
</script>

It´s all...
Reply
#2
What am I doing wrong?
Reply
#3
(2014-08-10, 09:24 AM)mikeh Wrote: What am I doing wrong?

something wrong in step 1.1
try put code 1.1 in global.css after all
Reply
#4
(2014-08-10, 09:36 AM)martec Wrote:
(2014-08-10, 09:24 AM)mikeh Wrote: What am I doing wrong?

something wrong in step 1.1
try put code 1.1 in global.css after all

Sorry I made a mistake.

Admin CP > Templates & Style > Themes > Add Stylesheet is the correct way of doing it.
Reply
#5
(2014-08-10, 09:43 AM)mikeh Wrote: Admin CP > Templates & Style > Themes > Add Stylesheet is the correct way of doing it.

yes... Big Grin
i will edit this tutorial to become more clear...
Reply
#6
Thanks martec but you can use below codes in all mybb versions (no need java , just css) and works nice.
for example : In forumdisplay_threadlist template
After
<td class="tfoot" align="left" colspan="{$colspan}">
you can add below codes
<style type="text/css">
/* animated spoiler CSS by Ali Movassagh */
.spoilerbutton {display:block;margin:0px auto;background:#EBEBEB;border:2px solid #F8A613;padding:3px 10px 3px 10px;text-align:center;font-weight:bold;font-style:italic;font-size:12px;font-family:Tahoma;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;cursor:pointer;}
.spoiler {overflow:hidden;background: #;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.7s ease;}
.spoilerbutton[value="Open"] + .spoiler > div {margin-top:-250%;}
.spoilerbutton[value="Close"] + .spoiler {padding:0px;}
</style>
<input class="spoilerbutton" type="button" value="Open" onclick="this.value=this.value=='Open'?'Close':'Open';">
<div class="spoiler"><div>
and you can see the same result. Heart
Reply
#7
In 1.8.9 this is not working on newthread page
Reply
#8
Just wanted to say this gives it a cleaner and more professional look over default. Nice job and thanks for sharing.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)