Using SSI With Toggle Buttons

Mick in Tutorials on Apr 10, 2020
"Using SSI With Toggle Buttons"
A fancy drop down buttons using SimpleMachine's API. SSI.php provides ways to add live information to your website by linking to your SMF Forum software. This is very useful for attracting further interest to your discussion areas and making your SMF Forum truly a part of your website experience by including recent posts, users online and a whole host of other data that can be displayed to your visitors.


The CSS:
1. Open /Themes/your-theme/css/index.css and the very bottom add:

.mainToggle {
  max-width: 375px;
}

.wrapToggle > li {
  cursor:pointer;
  list-style-type: none;
}

.wrapToggle > li > h4 {
  padding:20px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#fff;
  font-size:13px;
  text-shadow:1px 1px 0px rgba(0,0,0,.1);
}

.blue {
  background: #3a9bdc;
  border:4px solid rgba(0,0,0,.1);
}

.strawb {
  background: #ff6060;
  border:4px solid rgba(0,0,0,.1);
}

.yellow {
  background: #ffc500;
  border:4px solid rgba(0,0,0,.1);
}

.green {
  background: #63b47a;
  border:4px solid rgba(0,0,0,.1);
}

.pink {
  background: #ed327b;
  border:4px solid rgba(0,0,0,.1);
 
}

h4:hover {
  border:4px solid rgba(0,0,0,.2);
}

.content_toggle  {
  display:none;
  padding:15px;
  font-size:15px;
  word-spacing:3px;
  line-height:1.5em;
  background:#fff;
  color:#bbb;
  border-left:5px solid rgba(0,0,0,.1);
  border-right:5px solid rgba(0,0,0,.1);
}

.content_toggle:last-of-type {
  border:4px solid rgba(0,0,0,.1);
}

2. Create a PHP side block add the following:
Make sure the path to your forum in the code below is correct.


require("/home/************************/public_html/root-of-forum here if any/SSI.php"); 

echo '
<div class="mainToggle">
  <ul class="wrapToggle">
    <li>
      <h4 class="head blue">Boards</h4>
      <div class="content_toggle">'; ssi_topBoards(); echo ' </div>
    </li>
    <li>
      <h4 class="head strawb">News</h4>
      <div class="content_toggle">'; ssi_news(); echo ' </div>
    </li>
    <li>
      <h4 class="head yellow">Today\'s Calendar</h4>
      <div class="content_toggle">'; ssi_todaysCalendar(); echo ' </div>
    </li>
    <li>
      <h4 class="head green">Who\'s Online</h4>
      <div class="content_toggle">'; ssi_whosOnline(); echo ' </div>
    </li>
    <li>
      <h4 class="head pink">Latest member</h4>
      <div class="content_toggle">'; ssi_latestMember(); echo ' </div>
    </li>
  </ul>
</div>';

echo '
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $(".head").click(function () {
        $(this).next(".content_toggle").slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
    $(".head").bind("touchstart", function (e) {
        $(this).trigger("click");
        e.preventDefault();
    });
});
</script>';

Reference:
https://codepen.io/dope/pen/yuzvq
Category:SSI - Online Manual



Tagged with: ssi smf sideblock 


Mick

Mick G

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Pizza.

 idesignsmf.com

    

0 Comments