TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 05:42:56 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,105
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 338
  • Total: 339
  • @rjen

Recent Topics module ?

Started by hashend94, October 25, 2012, 07:06:50 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Freddy

Hi mate,  ZarPrime sent me a message that you needed some help.  The first thing I thought was 'I bet he pasted the wrong code'  ;D

I don't have a test site up and running at the moment, but as ZP mentioned there is already an entry here that explains how to make your own tabs :

Post showing how to modify code to show something else in a tab --> http://www.tinyportal.net/index.php?topic=30787.msg247669#msg247669

See how you get on  O0


hashend94

Hey Freddy ! :D Really nice to meet you ! I gotta say I love the mod !  O0

Well I check the link, I got what is suppose to be done, I got the whole Idea but I don't know how to do it since my php ability is really low :/

I'm really sorry If I'm annoying but could be possible to explain it a little bit more, dumb it down maybe and tell how I can edit it :S

Sorry once again if I'm trouble.
Hope to get a reply from you soon :)

Thanks.

Freddy

OK no problem, I agree; for someone starting out with PHP it's a little complex.

How about you tell me what you want to do in one tab and I can break it down for you and give you a step by step.  If you want something like the site you linked to has it shouldn't be too difficult once you get the hang of it.

hashend94

Hey Freddy !

Thanks a lot ! Okay so what I want to do in the other tabs is pretty much the same thing the site I mentioned does. I want different (Recent if possible) post from different boards of the forum to display in different tabs. Hope this isn't much. If you teach me how to do one tab I guess I could do the rest :P

Thanks,
Hashen.

hashend94

Bump ! Just so the thread dont go missing

ZarPrime

I'll look at this as well today sometime.  What you want to do should not be too difficult.  It's just that I've been kind of busy this week and my power was off for 36 hours during Frankenstorm Sandy.  Just getting back up to speed but will try to get something for you today, if I can.

ZarPrime

Freddy

Yes, sorry - I am a bit busy myself at the moment...I have not forgotten :)

Freddy

So let's just clarify - you want something like that other site - each tab has topics from a particular board ?

ZarPrime

Yeah, that's the way I read it Freddy, but maybe from a few boards.  For instance One of his tabs is "Art".  In the "Artists Dump1!" category, he has 10 boards, including child boards.  Here is a list of them and their board numbers ...

Artistic Lounge --> 42.0
Graphic Requests --> 43.0
Render Requests --> 44.0
Misc.Case --> 45.0
Anime Renders --> 46.0
Non-Anime Renders --> 47.0
Ecchi Renders --> 48.0
Brushes --> 49.0
Tutorials --> 50.0
Competitions --> 52.0

So, he'll first have to comment out the original tabs and then add the new tabs, changing the name of the functions, and then adding the array  for the boards he wants to the ssi_recenttopics function for each one, maybe something like this ...

ssi_recentTopics('5', NULL, array(42,43,44,45,46,47,48,49,50,52), 'array');

However, I don't know exactly what boards he wants to be shown in each tab.

ZarPrime

Freddy

Thanks ZP.  In that case I stripped down to the bare minimum.

Here is a new version of mouseoverTabContent.php :

<?php
// ===============================================================================================
// mouseoverTabContent.php - very simple version to just show recent topics from certain boards.
// 03 November 2012
//
// Code is based on the work of StormLrd and modifications by dimdom.
// This file pulls together their work and has been assembled by Freddy888.
//
// This file is designed to pull data from an SMF forum and put it in a Tiny Portal tabbed block.
// This uses a  modified version of the 'Mouseover Tabs Menu' at 
// http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
//
// Functions are prefixed 'mot_' meaning 'mouse over tab'.
// Basically each function equals one tab contents in your Tiny Portal block code.
// The order in which the functions are called is the order the tabs will appear in.
// You can put whatever you like in these functions or add more,
// this method just makes it easier to move stuff around.
//
// The actual 'output' from this file occurs at the end of this file.
// You can skip down to the bottom to fine tune things...
//
// Functions in this version :
// mot_NewTopics(BOARD-ID)
// ===============================================================================================



// ****************
// INITIALISATION..
// ****************


// The mouseover tabs JS code generates a $_GET we don't need at this point it seems.
// We need to empty the $_GET variable here otherwise SMF throws a 'Invalid request variable'.
// See circa line 99 in QueryString.php for more info. 888
$_GET = array();

// Going to need all the useful things in SSI.
require_once('../SSI.php');

// Initialise Tiny Portal.
TPortal_init();

// Work out where all the TP images are....
$tpimagesurl $boardurl '/Themes/default/images/tinyportal';
$tpimg['options'] = $tpimagesurl '/TPoptions.gif';
$tpimg['bullet4'] = '<img src="' $tpimagesurl '/TPgoto.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$tpimg['tpblue'] = $tpimagesurl '/TPblue.gif';
$tpimg['bullet1'] = '<img src="'$tpimagesurl '/TPdivider.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$tpimg['bullet2'] = '<img src="'$tpimagesurl '/TPdivider2.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$tpimg['bullet3'] = '<img src="' $tpimagesurl '/TPdivider3.gif" alt="" border="0" style="margin:0 2px 0 0;" />';
$tpimg['article'] = $tpimagesurl '/TParticle.gif';




// *************
// The Functions
// *************



// Grabs recent topics in a particular board...
function mot_NewTopics($boardid)
{
global $scripturl$settings$context$txt;

$what ssi_recentTopics('5'NULL$boardid'array');

echo '
<div class="tabsmenucontent" style="padding: 5px">
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="catbg3">
<td valign="middle">Topic</td>
<td valign="middle">Board</td>
<td valign="middle">Writer</td>
<td valign="middle"></td>
</tr>'
;

foreach ($what as $topic)
{
echo '
<tr>
<td class="windowbg" valign="middle">'
$topic['link'];

// Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="'
$scripturl'?topic='$topic['topic'], '.from'$topic['time'], '#new"><img src="'$settings['images_url'], '/'$context['user']['language'], '/new.gif" alt="new" border="0" /></a>';

echo '
</td>
<td class="windowbg2" valign="middle">'
$topic['board']['link'], '</td>
<td class="windowbg2" valign="middle">'
$topic['poster']['link'], '</td>
<td class="windowbg2" valign="middle">'
;

if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="'
$topic['href'], '"><img src="'$settings['images_url'], '/icons/last_post.gif" alt="Last Post" title="Last Post" border="0" style="float: right;" /></a>';
}

echo 
'
</td>
</tr>
</table>
</div>'
;
}


/*
// An example function...don't forget to call it in the config at the bottom!

function mot_myFunction()
{
global $what $ever $you $need $here;

echo '
<div class="tabsmenucontent" style="padding: 5px">'

// All your code goes here...

echo '
</div>';
}
*/




// *************************************
// And finally output & configuration...
// *************************************

echo '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>'
;

// Tab 1
mot_NewTopics(1);

// Tab 2
mot_NewTopics(2);

// Tab 3
mot_NewTopics(3);

echo '
</body>
</html>
'
;
?>


And here is a new version of the BLOCK code :

global $boardurl;

echo '
<script type="text/javascript">
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "' , $boardurl , '/tabbed_block/tabbedBlockStyle.css";
cssNode.media = "screen";
cssNode.title = "dynamicLoadedSheet";
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>

<script src="tabbed_block/mouseovertabs.js" type="text/javascript">
/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>


<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="#" rel="gotsubmenu[selected]">Tab 1</a></li>
<li><a href="#" rel="gotsubmenu">Tab 2</a></li>
<li><a href="#" rel="gotsubmenu">Tab 3</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="tabbed_block/mouseoverTabContent.php" style="visibility:hidden">Sub Menu contents</a>
</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", false)
</script>
';


========================= Now for the customisation ================================

So replace the old mouseoverTabContent.php file and edit the board id's - something like this....

        // Tab 1
mot_NewTopics(42);

// Tab 2
mot_NewTopics(43);

// Tab 3
mot_NewTopics(44)



And in the BLOCK code name the tabs.

<li><a href="#" rel="gotsubmenu[selected]">Artistic Lounge</a></li>
<li><a href="#" rel="gotsubmenu">Graphic Requests</a></li>
<li><a href="#" rel="gotsubmenu">Render Requests</a></li>



Just add more tabs and functions calls till you cover all the bases...so rince and repeat.