(e) Eric

(e32) Custom Sidebar Blocks

949 posts in this topic

thumb-248176c35a84c65b535d4fa69fd47928-s



File Name: (e32) Custom Sidebar Blocks

File Submitter: (e) Eric

File Submitted: 17 Jul 2009

File Category: User and Social Engagement

Supported Versions: IP.Board 3.4.x



Create, store, and display unlimited custom index sidebar blocks without needing to perform any file/skin edits. You can use plain text, bbcode, html, javascript, or PHP. This means paypal donate buttons, youtube videos, facebook like widgets, (so anything based on html and javascript), or anything you can post in an IPB editor can be displayed as an index block. System is cached so no extra querying is needed.

As of version 2.0, PHP blocks are possible. I will be providing block details for various blocks here. Here are the first couple:


Global Settings include:
  • On/Off
  • Show on Portal
  • Show above default portal blocks or below
  • Can change position of all custom blocks via the drag/drop reordering of the ACP->Manage Hooks page (and further ordering via the custom blocks themselves)
  • All blocks are completely sortable now with new Export Block feature

Per-Block Settings include:
  • On/Off
  • Block Title
  • Block Image
  • Block Content
  • Use IPB-standard Block Table to house contents
  • Drag and Drop Sorting
  • Raw Mode? (for javascript/adsense/widgets/facebook apps/twitter/etc)
  • Remove Ability for User to Collapse Block? (Good for advertisements, donation buttons, etc)
  • Enable Permissions
  • View Permissions via built-in IPB permission masks
  • PHP Support (with most/all IPB objects read, such as $this->memberData, $this->DB, etc)

The new setting which turns off the IPB editor is to avoid parsing issues with PHP and RAW blocks. If you want the editor so you can make bbcode blocks easier, feel free to enable.



Click here to download this file

Cheyney, Robetta, Ricchan and 6 others like this

Share this post


Link to post
Share on other sites

WARNING:
Got hit with a massive attack through my browser when I clicked on the sample images for this mod. Had to crash out of IE to get out of phishing "AV scan" app it was trying to install! Tracking cookie was also installed by web site and identified as a threat by NAV.

Share this post


Link to post
Share on other sites

whoa, I have a support topic here for this now, who knew!

iChadwick, really? First I've heard of any problems with imagehost. I really like it cause it's much simpler/quicker than imageshack and stuff, but if that wasn't a fluke then I suppose I'll need to switch from using them... thanks for the warning.

Share this post


Link to post
Share on other sites

I added the mod - everything went in okay and seems to work. Thanks. Now I'd like to ask if you could post some code suggestions for taking content from exising forums. I can manage CSS and HTML, but they're static. I'm not sure how I can place the last post in the most recent topic from a specified thread ino it. Basically, I want a mini-portal-style block here. Any ideas?

Share this post


Link to post
Share on other sites

It doesn't do php, so there of course is no built-in way to do it, but I suppose it wouldn't be too hard to hard-code some php into some blocks. You would need edit the CSB hook file, so if you know PHP a bit, you should be ok. Within the block processing loop, run a check and if it's csb_id is the block's ID you want to use to display php, then run a query there and build the html output from the whatever php you use. Then label that html the same name as a "normal" block (I think it was $block['content']), so the system resumes and then displays the block normally, but instead of whatever content you have, it will instead display your custom built html. :)

I haven't ever tested this, mind you, but I don't see how it wouldn't work.

Share this post


Link to post
Share on other sites

I'm going to see if I can use a custom block to import a news headline or perhaps a weather feed, something dynamic. Maybe an RSS feed? Any suggestions on dpoing something dynamic are welcome. I suppose I can also use one to create a static links block.

Not a PHP coder, myself. I can read it and get the gist of what it's about much of the time. I used to program in dBase and various forms of BASIC as well as some other languages, so it's not totally opaque. I just haven't had the time or energy to put into coding these days. So that's out for now.





Share this post


Link to post
Share on other sites

Hmmm. It works, but it seems my choide of content has issues. I wanted to have a daily chess problem. I borrowed this code:

<!-- begin Daily Chess Problem -->

<center>

<iframe width="310" scrolling="no" height="341" frameborder="0" src="http://www.shredderchess.com/online/playshredder/gdailytactics.php?mylang=en&mysize=32">

</iframe> 

</center>

<!-- einde Daily Chess Problem -->

That worked, but the mod surrounded ALL sidebar blocks with scroll bars (right and bottom), no matter what settings I chose, either for the board size or the iframe size. I deleted the iframe to have only this url:

<!-- begin Daily Chess Problem -->

http://www.shredderchess.com/online/playshredder/gdailytactics.php?mylang=en&mysize=24

<!-- einde Daily Chess Problem -->

And while that didn't show anything other than the text (since PHP isn't available), it still created scroll bars around the entire sidebar (top and right sides). I finally got it to work in a tiny display with this:

<center>

<iframe width="240" scrolling="no" height="300" frameborder="0" src="http://www.shredderchess.com/online/playshredder/gdailytactics.php?mylang=en&mysize=18">

</iframe> 

</center>


Any thoughts?

Is there someplace I can set where the block displays? Right now it's the top of the sidebar. I want it at the bottom.

Share this post


Link to post
Share on other sites

From the whitespace checker:

...applications_addon/other/customSidebarBlocks/setup/versions/install/sql/customSidebarBlocks_mysql_tables.php has whitespace at the beginning or end of the file

Share this post


Link to post
Share on other sites

Another discovery: the


<center></center>

tags seem to have no effect. That's okay for my use, and I dumped them. Not sure if it's just the coded link has a fixed display location or the app. Any idea how to change the block's position on the main screen (to another position in the sidebar)? And is there a way to add the custom block to the portal page?







Share this post


Link to post
Share on other sites

Found two more bugs.
HTML comments get displayed, not ignored. HTML scrip commands get displayed, not acted upon. Hence this:

<!--Word of the Day by TheFreeDictionary.com-->

<div style="width:225px;position:relative;background-color:;padding:4px">

<div style="font:bold 12pt '';color:#000000">Word of the Day</div>

<style>

#WordOfTheDay {width:100%;border:1px #000000 solid;background-color:}

#WordOfTheDay H3 {font:bold 12pt '';color:#000000}

#WordOfTheDay TD.WoDLeft {font:bold 10pt '';color:#000000}

#WordOfTheDay TD {font:normal 10pt '';color:#000000}

#WordOfTheDay A {color:#0000FF}

</style>

<div id="tfd_wod_div" style="display:none"><table id="WordOfTheDay">

<tr><td colspan="2" align="center"><h3 style="margin-bottom:3pt">

<a href="http://www.thefreedictionary.com/discerning">discerning</a></h3></td></tr>

<tr><td class="WoDLeft" valign="top" align="right">Definition:</td>

<td align="left">Quick to understand.</td></tr>

<tr><td class="WoDLeft" valign="top">Synonyms:</td><td>

<a href="http://www.thefreedictionary.com/apprehensive">apprehensive</a>

</td></tr></table></div>

<script language="javascript" src="http://img.tfd.com/daily/wod-top.js?0"></script>

<script language="javascript">document.getElementById("tfd_wod_div").style.display=""</script>

<div style="font:normal 8pt '';color:#000000">

<a style="color:#000000" href="http://www.thefreedictionary.com/lookup.htm#Word-of-the-Day">Word of the Day</a>

provided by <a style="color:#000000" href="http://www.thefreedictionary.com/">The Free Dictionary</a>

</div></div>

<!--end of Word of the Day-->


See this:

Any suggestions or solutions?

Share this post


Link to post
Share on other sites

This code works:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="250" height="180" id="wordoftheday_widget" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="http://dictionary.reference.com/wordoftheday/widget/wotd_widget.swf?r=74&skin=chrome" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />

<embed src="http://dictionary.reference.com/wordoftheday/widget/wotd_widget.swf?r=74&skin=chrome" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="250" height="180" name="wordoftheday_widget" align="middle" allowScriptAccess="allow" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>

Has to be reduced to 200px to fit in the sidebar, but seems fine otherwise. have to try over a few days to make sure it changes. Just not quite what I wanted in an app.




Share this post


Link to post
Share on other sites

Is there someplace I can set where the block displays? Right now it's the top of the sidebar. I want it at the bottom.



You can change the order overall via Manage Hooks. And you can change the individual custom blocks via the drag/drop sorting from Manage Blocks.


From the whitespace checker:


...applications_addon/other/customSidebarBlocks/setup/versions/install/sql/customSidebarBlocks_mysql_tables.php has whitespace at the beginning or end of the file

Last I heard whitespace really doesn't matter anymore, but I'll add that to my to-do if I ever release a new one (plus the fact that that file is only read during installs).

Another discovery: the

<center></center>

tags seem to have no effect. That's okay for my use, and I dumped them. Not sure if it's just the coded link has a fixed display location or the app. Any idea how to change the block's position on the main screen (to another position in the sidebar)? And is there a way to add the custom block to the portal page?

hmm, last I checked the center html tags did still work, but yeah, you might want to use style="text-align:center" as that is the better/current way to center stuff. For the hell of it, I did just now test using that center tag and it works fine. Could be something above that isn't closed or another html syntax error that is prohibiting it from working. No, no intergration anywhere but the built-in method (index).

Found two more bugs. HTML comments get displayed, not ignored. HTML scrip commands get displayed, not acted upon. Hence this:

<!--Word of the Day by TheFreeDictionary.com-->

<div style="width:225px;position:relative;background-color:;padding:4px">

<div style="font:bold 12pt '';color:#000000">Word of the Day</div>

<style>

#WordOfTheDay {width:100%;border:1px #000000 solid;background-color:}

#WordOfTheDay H3 {font:bold 12pt '';color:#000000}

#WordOfTheDay TD.WoDLeft {font:bold 10pt '';color:#000000}

#WordOfTheDay TD {font:normal 10pt '';color:#000000}

#WordOfTheDay A {color:#0000FF}

</style>

<div id="tfd_wod_div" style="display:none"><table id="WordOfTheDay">

<tr><td colspan="2" align="center"><h3 style="margin-bottom:3pt">

<a href="http://www.thefreedictionary.com/discerning">discerning</a></h3></td></tr>

<tr><td class="WoDLeft" valign="top" align="right">Definition:</td>

<td align="left">Quick to understand.</td></tr>

<tr><td class="WoDLeft" valign="top">Synonyms:</td><td>

<a href="http://www.thefreedictionary.com/apprehensive">apprehensive</a>

</td></tr></table></div>

<script language="javascript" src="http://img.tfd.com/daily/wod-top.js?0"></script>

<script language="javascript">document.getElementById("tfd_wod_div").style.display=""</script>

<div style="font:normal 8pt '';color:#000000">

<a style="color:#000000" href="http://www.thefreedictionary.com/lookup.htm#Word-of-the-Day">Word of the Day</a>

provided by <a style="color:#000000" href="http://www.thefreedictionary.com/">The Free Dictionary</a>

</div></div>

<!--end of Word of the Day-->

I just created a custom block with that exact code and it works fine, make sure you enable RAW mode. And I don't see any bugs yet, if I missed one let me know eh.

This code works:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="250" height="180" id="wordoftheday_widget" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="http://dictionary.reference.com/wordoftheday/widget/wotd_widget.swf?r=74&skin=chrome" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />

<embed src="http://dictionary.reference.com/wordoftheday/widget/wotd_widget.swf?r=74&skin=chrome" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="250" height="180" name="wordoftheday_widget" align="middle" allowScriptAccess="allow" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>

Has to be reduced to 200px to fit in the sidebar, but seems fine otherwise. have to try over a few days to make sure it changes. Just not quite what I wanted in an app.






Glad that code works for ya, sorry you don't like CSB though. :( Maybe after you fix whatever is causing your html to not parse correctly, then you'll have a better appreciation for it. :)

Share this post


Link to post
Share on other sites

Glad that code works for ya, sorry you don't like CSB though. :( Maybe after you fix whatever is causing your html to not parse correctly, then you'll have a better appreciation for it. :)







<div style="width:220px;position:relative;background-color:;padding:2px">

<div style="font:bold 11pt '';color:#000000">Word of the Day</div>

<style>

#WordOfTheDay {width:100%;}

#WordOfTheDay H3 {font:bold 11pt '';color:#000000}

#WordOfTheDay TD.WoDLeft {font:bold 10pt '';color:#000000}

#WordOfTheDay TD {font:normal 10pt '';color:#000000}

#WordOfTheDay A {color:#0000FF}

</style>

<div id="tfd_wod_div" style="display:none"><table id="WordOfTheDay">

<tr><td colspan="2" align="center"><h3 style="margin-bottom:3pt">

<a href="http://www.thefreedictionary.com/discerning">discerning</a></h3></td></tr>

<tr><td class="WoDLeft" valign="top" align="right">Definition:</td>

<td align="left">Quick to understand.</td></tr>

<tr><td class="WoDLeft" valign="top">Synonyms:</td><td>

<a href="http://www.thefreedictionary.com/apprehensive">apprehensive</a>

</td></tr></table></div>

<script language="javascript" src="http://img.tfd.com/daily/wod-top.js?0"></script>

<script language="javascript">document.getElementById("tfd_wod_div").style.display=""</script>

<div style="font:normal 8pt '';color:#000000">

<a style="color:#000000" href="http://www.thefreedictionary.com/lookup.htm#Word-of-the-Day">Word of the Day</a>

provided by <a style="color:#000000" href="http://www.thefreedictionary.com/">The Free Dictionary</a>

</div></div>

Thought I had tested it with both raw and non-raw settings but apparently not. It's online now. I eventually figured out the order in the hook area myself, but was initially confused because the hooks show aren't necessarily what you see on the sidebar. There's a shoutbox, a shoutbox mod, a bunch of subscription hooks (none of which show on the sidebar), then several others. When I dragged the CSB mod down to the bottom, however, it ended up where I wanted it. I think the centre command doesn't work with that chess puzzle app because of the way it's coded in the native PHP. Your mod actually works better than the custom content block feature in the blog. If I copy the same code for the first word of the day that now works in your mod, and paste it into the custom content block box (ACP or user box) for the blog, it breaks up and displays the code itself. I tried all HTML settings on it, but it won't do the javascript. So I had to add the second one to my blog blocks in the ACP. Have to tinker more with the blog CB feature, but that's what happened this morning when I played with it. Anyway, I still have to figure out how to put in a news or weather feed. I'll post the code when I get it working, so others can see how it's set up.











Thanks for the reply. You're wrong. I LIKE the mod. I think it's great. It should be built in to IPB! Just trying to figure it out and dutifully report any bugs or issues. I got the first word-of-the-day working with RAW HTML. Thanks for that tip. Had to tinker with the style - size, get rid of internal border, fonts, etc. But it works fine now with this coding:

Share this post


Link to post
Share on other sites

Am trying to wrap with this around the code:

Line breaks are a bit of a problem when the script throws up a longer definition that ends up outside the borders.




<div style=

Share this post


Link to post
Share on other sites

I'm not sure I understand the problem. Can you post the block contents you are trying to use and I'll try it on my test board?

Share this post


Link to post
Share on other sites

I'm not sure I understand the problem. Can you post the block contents you are trying to use and I'll try it on my test board?






I'll grab a screen shot next time I see it. Didn't happen today. Script is the same as above. Sometimes the resulting display has words that display outside (to the right of) the sidebar borders. Can be corrected sometimes by making the browser the full screen width but not always a workable solution for people with smaller monitors.

Share this post


Link to post
Share on other sites

well, a screenshot might help, but if you post the contents of the error-causing block, then I will add it to my test board and try to replicate the problem. Which I'll need to do anyways, so it might skip a step if you post the contents.

Share this post


Link to post
Share on other sites

Sorry if I wasn't clear. It's the code previously posted, above:

<div style=word-wrap: break-word>

<div style="width:220px;position:relative;background-color:;padding:2px">

<div style="font:bold 11pt '';color:#000000">Word of the Day</div>

<style>

#WordOfTheDay {width:100%;}

#WordOfTheDay H3 {font:bold 11pt '';color:#000000}

#WordOfTheDay TD.WoDLeft {font:bold 10pt '';color:#000000}

#WordOfTheDay TD {font:normal 10pt '';color:#000000}

#WordOfTheDay A {color:#0000FF}

</style>

<div id="tfd_wod_div" style="display:none">

<table id="WordOfTheDay">

<tr>

<td colspan="2" align="center">

<h3 style="margin-bottom:3pt">

<a href="http://www.thefreedictionary.com/discerning">discerning</a>

</h3>

</td>

</tr>

<tr>

<td class="WoDLeft" valign="top" align="right">Definition:</td>

<td align="left">Quick to understand.</td>

</tr>

<tr>

<td class="WoDLeft" valign="top">Synonyms:</td>

<td>

<a href="http://www.thefreedictionary.com/apprehensive">apprehensive</a>

</td>

</tr>

</table>

</div>

<script language="javascript" src="http://img.tfd.com/daily/wod-top.js?0"></script>

<script language="javascript">document.getElementById("tfd_wod_div").style.display=""</script>

<div style="font:normal 8pt '';color:#000000">

<a style="color:#000000" href="http://www.thefreedictionary.com/lookup.htm#Word-of-the-Day">Word of the Day</a>provided by <a style="color:#000000" href="http://www.thefreedictionary.com/">The Free Dictionary</a>

</div>

</div>

</div>

Share this post


Link to post
Share on other sites

Custom Sidebar Blocks 1.1.1 not showing up in apps for 3.0.3

using 3.0.3 and installed the CSB 1.1.1 as per instructions and pressed play. it however, does not show up in the Apps tab but does show up in hooks as being installed. is there another place to use the hook or is there additional programming needed?

admin3

edited:

note that when i am in the "applications & modules" "manage applications & modules", the admin modules states "this application does not yet have any modules". this would appear to me that i have load up additional modules yes/no???

in addition, when i use the tab system, it works like it is supposed to from system to support. it is only when "my apps" is toggled/selected that instead of a page, it shows a dropdown (javascript maybe) and this is probably why it is not working correctly..

can someone confirm this?

Share this post


Link to post
Share on other sites

Sorry if I wasn't clear. It's the code previously posted, above:



Ah, I didn't realize it was the same as earlier. Yeah, I still have that code on my test board and it looks fine. I guess if you want to post a screenshot, then I'll check it. Although now that I think of it, if it goes over the sides, that sounds like it's just a matter of the html not being proper for a small width sidebar.


Custom Sidebar Blocks 1.1.1 not showing up in apps for 3.0.3



using 3.0.3 and installed the CSB 1.1.1 as per instructions and pressed play. it however, does not show up in the Apps tab but does show up in hooks as being installed. is there another place to use the hook or is there additional programming needed?



admin3



edited:





in addition, when i use the tab system, it works like it is supposed to from system to support. it is only when "my apps" is toggled/selected that instead of a page, it shows a dropdown (javascript maybe) and this is probably why it is not working correctly..



can someone confirm this?



yeah, if you don't see it in the apps dropdown and if there are not modules installed for it, then something must've not been installed/uploaded correctly. Check the instructions and make sure you upload it to the proper folder and such.

Share this post


Link to post
Share on other sites

I get nothing but a "red x" no matter what image I try to add :(
I can get text to appear, box created but no banners. Just looking to add some small banners to the box I made. Any thoughts? Suggestions?

Thanks

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.