1
xd9527
hack newbb rate & quickreply to facebook UI style
  • 2019/6/26 16:05

  • xd9527

  • Just popping in

  • Posts: 8

  • Since: 2016/1/13


Resized Image

newbb topic rate is less useful features
I think it is a problem with the UI
so i try hack it to facebook style

result
Resized Image

Quote:
xoops : 2.5.9
module : newbb 4.34 Final
template : newbb_viewtopic.tpl
css framework: Bootstrap3
icon : Font Awesome 4.7.0



<!-- only for login user //-->
<{if $viewer_level gt 0}>

<!-- 
modal for rate //-->
<div class="modal fade bs-example-modal-sm container" id="replyrate" tabindex="-1" role="dialog" aria-labelledby="replyrate">
<
div class="modal-dialog btn-bottom" role="document">
<
div class="modal-content btn-group" role="group">
<
button type="button" class="btn btn-default" onclick="location.href='/modules/<{$xoops_dirname}>/ratethread.php?topic_id=<{$topic_id}>&amp;forum=<{$forum_id}>&amp;rate=5';"><class="fa fa-thumbs-o-up fa-2x" aria-hidden="true"></i><br><{$smarty.const._MD_RATE5}></button>
<
button type="button" class="btn btn-default" onclick="location.href='/modules/<{$xoops_dirname}>/ratethread.php?topic_id=<{$topic_id}>&amp;forum=<{$forum_id}>&amp;rate=4';"><class="fa fa-smile-o fa-2x" aria-hidden="true"></i><br><{$smarty.const._MD_RATE4}></button>
<
button type="button" class="btn btn-default" onclick="location.href='/modules/<{$xoops_dirname}>/ratethread.php?topic_id=<{$topic_id}>&amp;forum=<{$forum_id}>&amp;rate=3';"><class="fa fa-meh-o fa-2x" aria-hidden="true"></i><br><{$smarty.const._MD_RATE3}></button>
<
button type="button" class="btn btn-default" onclick="location.href='/modules/<{$xoops_dirname}>/ratethread.php?topic_id=<{$topic_id}>&amp;forum=<{$forum_id}>&amp;rate=2';"><class="fa fa-frown-o fa-2x" aria-hidden="true"></i><br><{$smarty.const._MD_RATE2}></button>
<
button type="button" class="btn btn-default" onclick="location.href='/modules/<{$xoops_dirname}>/ratethread.php?topic_id=<{$topic_id}>&amp;forum=<{$forum_id}>&amp;rate=1';"><class="fa fa-thumbs-o-down fa-2x" aria-hidden="true"></i><br><{$smarty.const._MD_RATE1}></button>
</
div>
</
div>
</
div>

<!-- 
modal for quickreply //-->
<div class="modal fade bs-example-modal-sm container" id="replyquick" tabindex="-1" role="dialog" aria-labelledby="replyquick">
<
div class="modal-dialog btn-bottom" role="document">
<
div class="modal-content modal-body"><button type="button btn-default" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<{
$quickreply.form}>
</
div>
</
div>
</
div>

<!-- 
fix bottom navbar //-->
<div class="navbar-fixed-bottom container" id="postnav" style="bottom:12px;">

<!-- 
rate button //-->
<{if $rating_enable}>
<
class="btn btn-default btn-lg" style="box-shadow: 0 0 15px 0 grey" data-toggle="modal" data-target="#replyrate"><class="fa fa-thumbs-o-up" aria-hidden="true"></i><{$smarty.const.THEME_LIKE}></a>&nbsp;
<{/if}>

<!-- 
reply button //-->
<{if $quickreply.show}>
<
class="btn btn-default btn-lg" style="box-shadow: 0 0 15px 0 grey" data-toggle="modal" data-target="#replyquick"><class="fa fa-comment-o" aria-hidden="true"></i><{$smarty.const.THEME_FORUM_REPLY}></a>&nbsp;
<{/if}>

​​​​​​​<!-- modal-dialog move to bottom //-->
<style>.btn-bottom {positionabsolute;bottom:48px;z-index:9999;} </style>

<!-- 
scroll hide bottom navbar //-->
<script>
$(
window).scroll(function(){
var 
scrollBottom = $("body").height()-$(window).height()-60;
if (
scrollBottom 120 )
{
if ($(
this).scrollTop() > 60 && $(this).scrollTop() < scrollBottom)
{ $(
'#postnav').fadeIn(); }
else {  $(
'#postnav').fadeOut(); }
}
else
{
$(
'#postnav').fadeIn();
}
});
</
script>
</
div>
<{/if}>


done.

my bloghttps://3q.9527.tw/125

2
heyula
Re: hack newbb rate & quickreply to facebook style
  • 2019/6/26 16:09

  • heyula

  • Theme Designer

  • Posts: 590

  • Since: 2008/4/24


thanks for sharing.

3
Mamba
Re: hack newbb rate & quickreply to facebook style
  • 2019/6/29 4:48

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


Very cool!! Thanks for sharing.

We'll need to look into adding it to Newbb 5.0
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

4
Mamba
Re: hack newbb rate & quickreply to facebook style
  • 2019/6/30 8:34

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


OK, I've added it to NewBB 5.01 at:
https://github.com/mambax7/newbb

You'll need to copy the theme files from:
/newbb/EXTRA/xbootstrap/

to /themes/xbootstrap

You'll also need to set the Facebook UI Style in Preferences.

Please test and let me know if it works.
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

Login

Who's Online

172 user(s) are online (105 user(s) are browsing Support Forums)


Members: 0


Guests: 172


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits