Customization > Custom Coding
Creating a Panels Tab in a Custom PHP Block Completed
nob4uask:
Even All,
I have completed creating a panels tab in a custom php block if anyone would like to use it. It really does clean up the site and allow information to be more organized. I am currently using it for rss feeds but plan on expanding it for other purposes on my site.
Please keep in mind that I don’t know php so I had to do this in html then use an online converter to convert it to php. I have cleaned it up some, but think that it can probably be written better. If anyone has any pointers I’m all ears.
Here are the instructions for creating a custom php panel tab block.
1st - Create a folder called SpryAssets then download the attached js & css files into the folder. This folder will need to be upload to your root directory. You can put the folder anywhere you would like but make sure you change the src & href in the below code.
2nd - Create a custom php block and paste the following code into it.
echo "
<script src='SpryAssets/SpryTabbedPanels.js' type='text/javascript'></script>\n
<link href='SpryAssets/SpryTabbedPanels.css' rel='stylesheet' type='text/css' />\n";
echo "<div id='TabbedPanels1' class='TabbedPanels'>\n";
echo " <ul class='TabbedPanelsTabGroup'>\n";
echo " <li class='TabbedPanelsTab' tabindex='0'>Tab 1</li>\n";
echo " <li class='TabbedPanelsTab' tabindex='0'>Tab 2</li>\n";
echo " </ul>\n";
echo " <div class='TabbedPanelsContentGroup'>\n";
echo " <div class='TabbedPanelsContent'>Content 1</div>\n";
echo " <div class='TabbedPanelsContent'>Content 2</div>\n";
echo " </div>\n";
echo "</div>\n";
echo "<script type='text/javascript'>\n";
echo "<!--\n";
echo "var TabbedPanels1 = new Spry.Widget.TabbedPanels('TabbedPanels1');\n";
echo "//-->\n";
echo "</script>\n";
3rd – Replace the Tab 1, Tab 2 in the 1st bolded code above with whatever description you want to show on the tab. If you would like more tabs then copy & paste the entire line. Remember that if you create more tabs, you must create more Content Lines (2nd Bolded Area).
4th – Replace the Content 1, Content 2, etc. in the second bolded area with whatever text you would like.
Preview the panel and confirm that it is working, simple as that.
If you would like to change the font and colors, it can be accomplished through the style.css located in the SpryAssets folder you uploaded.
If you would like to add RSS feeds then you will need to do the following. At this time I would like to thank SiNaN for letting me bag his code from the block n block thread ( http://simpleportal.net/index.php?topic=5332.0 ).
1st - Create an RSS Feed block with the feed you want displayed and un-mark the “Active” box. Since you already have the description/title of the feed in the panel tab, check the “No Title” box so that it doesn’t show up.
2nd - Find out the block_id of the block you just created by going into “Modify” of the specific bloack and looking at the link in the address bar of your browser.
3rd - Copy the following code:
$block = current(getBlockInfo(false, 23, false, false));
$block['style'] = sportal_parse_style('explode', $block['style'], true);
template_block($block);
4th - Paste the above code in between the content panel <div> </div> of the tab for which it belongs (ie. If you have 3 tabs, you will have 3 Content Panels). It should look like this:
echo " <div class='TabbedPanelsContent'>\n";
$block = current(getBlockInfo(false, 23, false, false));
$block['style'] = sportal_parse_style('explode', $block['style'], true);
template_block($block);
echo " </div>\n";
5th – In the bolded line of the above code, change the “23” to the number of the block_id that you retrieved earlier. Continue to do this for each of the tabs that you have created.
Hit the “preview” to make sure that all is ok, that simple.
If you would like to populate the tabs with recent topics & posts from different boards you can view the code that SiNaN wrote, in the above link, and work it into the appropriate areas. If you would like to display top posters with their latest posts you could create an array then assign the Tab Name to the posters and insert their posts into the Content area.
IMHO there are a lot of uses for this and I hope that it helps someone out.
One more thing, I am still having a problem with the following feed if anyone can help me. I have checked on the error and understand that the RSS feed block is kind of flakey at times.
XML error: Invalid character at line 8
The RSS Feed link used was http://www.nfl.com/rss/rsslanding?searchString=home
Be Safe All.
agent47:
Hey nice of you to share that with the rest of the class. One thing I would recommend for you is to edit the above post and add all lines of code in between code tags to make it easier for members here.
Seriously though, thanks for sharing this. It's definitely gonna come in handy on my site. :)
agent47:
Would someone please be kind enough to tell me how I can have display recent topics in the style of the screenshot shown below with the use of SpryAssets tabs:
I would be really grateful to whoever is able to help me out. It would mean a lot to me so please be generous to help me out.
Blue:
Hi agente47,
For that you will need various blocks. One for all topics. And the others WHERE board = ID. I can do that for you but you have to tell me the ID of the Boards and the title that you want to put on the tabs.
Is that the layout that you want? TOPIC ------ POSTER ----- TIME?
agent47:
Actually bro, I have a working layout of how I want to display these recent topics. Below is the code, I just don't know how to implement them within the tabs
--- Code: ---global $scripturl, $settings, $context, $txt;
$what = ssi_recentTopics('25',NULL,'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"></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['poster']['link'], '</td>
<td class="windowbg2" valign="middle">', $topic['time'], '</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>';
--- End code ---
Navigation
[0] Message Index
[#] Next page
Go to full version