MyBB Community Forums

Hello everyone, I am trying to make awards page with tabs
like this
https://i.imgur.com/e6czM0M.png

I am using the following codes

ougcawards_page template

<html>
    <head>
        <title>{$mybb->settings['bbname']} - {$lang->ougc_awards_page_title}</title>
        {$headerinclude}
    </head>
    <body>
        {$header}

<!-- BEGIN TABS -->
<ul class="awardstabs">
<li class="tabaward selected"><a href="#category_1" class="">Category Name 1</a></li>
<li class="tabaward selected"><a href="#category_2" class="">Category Name 2</a></li>

</ul>
 <!-- END TABS -->
        {$content}
        {$multipage}
        {$footer}

<script type="text/javascript">
    jQuery(function() {
        jQuery(".category").hide(); 
        jQuery("ul.awardstabs li:first").addClass("selectedawartab");
        var activeTab = jQuery('ul.awardstabs li:first a').attr("href"); 
        jQuery(activeTab).show(); 
        jQuery("ul.awardstabs li").click(function() {
            jQuery("ul.awardstabs li").removeClass("selectedawartab"); 
            jQuery(this).addClass("selectedawartab"); 
            jQuery(".category").slideUp(); 
            activeTab = jQuery(this).find("a").attr("href"); 
            jQuery(activeTab).slideDown();
            return false;
        });
    });
</script>



    </body>
</html>

ougcawards_page_list Template

 
<div class="category_1 category" id="category_1" style="">
<div class="awardsflexandrrwap">NEED A CODE TO DISPLAY AWARDS FROM FIRST CATEGORY HERE</div>
        </div>

<div class="category_1 category" id="category_2" style="">
<div class="awardsflexandrrwap">NEED A CODE TO DISPLAY AWARDS FROM SECOND CATEGORY HERE</div>
        </div>

ougcawards_page_list_award Template

 
<div class="awards-col">
<div class="awards-row">
<div class="awards-table">

<div class="awards-table-cell award-icon">{$award['fimage']}</div>
<div class="awards-table-cell">{$award['name']} <br><span class="smalltext">{$award['description']}</span></div>

</div>
</div>
</div>

<div class="clear"></div>

CSS

 


.awards-col {flex: 0 1 33.33333%;}
.awards-row {background: #212121;position: relative;overflow: hidden;padding: 10px;border: 1px solid #272727;border-radius: 2px;margin: 5px;box-shadow: 0 0 5px rgba(0,0,0,.1);}
.awards-table {display: table;width: 100%;table-layout: fixed;}
.awards-table-cell {display: table-cell;vertical-align: middle;}
.award-icon {width: 40px;}
.awards-table-cell {display: table-cell;vertical-align: middle;}
.awardsflexandrrwap{display: flex;flex-wrap: wrap;}
.awardstabs{padding: 0px 16px 1px;margin-left: 0;margin-bottom: 20px;list-style-type: none;text-align: left;font-size: 13px;}
.awardstabs li {display: inline;margin-right: 5px;}
.tabaward {overflow: hidden;background-color: #2b2b2b;padding: 12px;width: 97%;}

REQUEST AWARD BUTTON ITS NOT THERE BUT I WILL ADD IT LATER,

I dont know how to display award`s categories in ougcawards_page_list Template

ougcawards_page

<html>
    <head>
        <title>{$mybb->settings['bbname']} - {$lang->ougc_awards_page_title}</title>
        {$headerinclude}
    </head>
    <body>
        {$header}
		<div class="award-container">		
		   {$content}
		</div>
        {$multipage}
        {$footer}

<script type="text/javascript">
    jQuery(function() {
        jQuery(".category").hide(); 
        jQuery("ul.awardstabs li:first").addClass("selectedawartab");
        var activeTab = jQuery('ul.awardstabs li:first a').attr("href"); 
        jQuery(activeTab).show(); 
        jQuery("ul.awardstabs li").click(function() {
            jQuery("ul.awardstabs li").removeClass("selectedawartab"); 
            jQuery(this).addClass("selectedawartab"); 
            jQuery(".category").slideUp(); 
            activeTab = jQuery(this).find("a").attr("href"); 
            jQuery(activeTab).slideDown();
            return false;
        });
    });
</script>



    </body>
</html>

ougcawards_page_list

<ul class="awardstabs">

	   <li class="tabaward selected"><a href="#category_{$category['name']}" class="">{$category['name']}</a></li>
</ul>
<div class="category_{$category['name']} category" id="category_{$category['name']}" style="">
       <div class="awardsflexandrrwap">{$award_list}</div>
 </div>

this is how you can get it work.

but still table view sucks in category tab tho

didn't work for me, does any1 have it working?

Mastersly

sabug

xLoy