MyBB Community Forums

Full Version: Add Tabs on Award page
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello, i was searching on google how to add tabs on awards page


screenshot


[Image: e6czM0M.png]

thank you for any help
i appreciate  Heart
check this thread! https://community.mybb.com/thread-226622.html
and lemme know if that's what you are looking for!
(2020-07-10, 12:02 PM)v4hl Wrote: [ -> ]check this thread! https://community.mybb.com/thread-226622.html
and lemme know if that's what you are looking for!

OP is referring towards organising the awards in tabs. 


Theoretically, you can search this easily on Google:
https://codepen.io/tpelkie/pen/EaQEgN
https://codepen.io/SufferMyJoy/pen/ByaNZd
(2020-07-10, 06:14 PM)Alexander L. Wrote: [ -> ]
(2020-07-10, 12:02 PM)v4hl Wrote: [ -> ]check this thread! https://community.mybb.com/thread-226622.html
and lemme know if that's what you are looking for!

OP is referring towards organising the awards in tabs. 


Theoretically, you can search this easily on Google:
https://codepen.io/tpelkie/pen/EaQEgN
https://codepen.io/SufferMyJoy/pen/ByaNZd
can i give demo account and make that for me
i can pay you for your works Rolleyes
can i give demo account and make that for me
i can pay you for your works Rolleyes



I can help you if you want it to look like this
https://inlobos.com/awards.php
Just use jQuery tabs -

In OUGC Awards -> page template:
<html>
	<head>
		<title>{$mybb->settings['bbname']} - {$lang->ougc_awards_page_title}</title>
		{$headerinclude}
	</head>
	<body>
		{$header}
		<div class="awardspage">
		</br>
			<ul align="center" class="forumtabs" id="hidetabs">
				<li class="tab at" title="General" rel="cat_General"><a>General</a></li>
				<li class="tab" title="Exclusive" rel="cat_Exclusive"><a>Exclusive</a></li>
				<li class="tab" title="Credits" rel="cat_Credits"><a>Credits</a></li>
				<li class="tab" title="Posts" rel="cat_Posts"><a>Posts</a></li>
				<li class="tab" title="Threads" rel="cat_Threads"><a>Threads</a></li>
				<li class="tab" title="Reputation" rel="cat_Reputation"><a>Reputation</a></li>
				<li class="tab" title="Referrals" rel="cat_Referrals"><a>Referrals</a></li>
				<li class="tab" title="Special" rel="cat_Special"><a>Special</a></li>
			</ul>
			{$content}
		</div>
<script type="text/javascript">
	jQuery('.awards-list').hide();
	var preums = jQuery(".at").attr('rel');
	jQuery('#'+ preums).show();
	jQuery('.tab').click(function(){
		jQuery('.at').removeClass('at');
		jQuery(this).addClass('at');
		jQuery('.awards-list').hide();
		var catshow = jQuery(this).attr('rel');
		jQuery('#'+ catshow).show();
	});
	jQuery('#tab_nav').hide();
	var n = 1;
	var limit = 10;
	while (n <= limit)
	{
		jQuery('#tab_'+n).show();
		n++;
	}
</script>
		{$multipage}
		{$footer}
	</body>
</html>
Make sure the category names match what you have in your OUGC Awards settings in ACP.

Then, in OUGC Awards -> list template:
<div id="cat_{$category['name']}" class="awards-list">
	<div class="awards-cat">
		{$award_list}
	</div>
</div>
{$multipage}

Finally, add this to the OUGC Awards -> view template to hide the tabs when you are viewing an individual award:
<script type="text/javascript">
	$("#hidetabs").hide();
</script>