Plugin User Interface Help

[weedfanatic]

Hello. First of all, I'm hoping this is the right place to post this, sorry if it's not.
lightdark.boards.net

I've had interest in messing with CSS/JavaScript, and finally decided to try a first basic plugin attempt.
I'm making a scrollbox that contains news for my site/game.

The problem is that I have to edit my Forum Wrapper template and host the news there.
<div id="ScrollBox">
               
<div style="Color:#e50000; font-size: 120%; height:10px; top:10px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; ">
<center>Light Dark Updates</center>
</div>
/*NEWS HERE*/
</div>
My question is, how can I add a tab in my plugin that allows me to post the news that will show up in my scrollbox?
(So I don't have to keep editing my template and filling it with news.)

Sorry for such a basic question, but I'm not quite sure where to start to achieve this.
I've never touched JavaScript either until yesterday. =d

[Chris]

You can place the appropriate HTML in a Global Header component of your plugin then reference the data using a variable. So for example if you created an autoform and gave it the name add_news in your plugin interface consisting of fields for headlines and urls you could then reference whatever has been entered in that autoform by using a {foreach} construct to add each line of the autoform to the html you added in global header via replacing /*NEWS HERE*/ in the html you posted with:


{foreach $[plugin.add_news]}
<a href="$[plugin.add_news.url]" target="_blank" rel="norewrite">$[plugin.add_news.headline]</a>
{/foreach}\

It also sounds like you may want some sort of autoscrolling feature and the easiest way to do that is by using the deprecated <marquee> element but see the discussion in this thread  for more information.

I should note that there is at least one news plugin already in the plugin library should you want to go the super easy route.

[weedfanatic]

Oct 9, 2016 3:57:55 GMT -8 Chris said:

You can place the appropriate HTML in a Global Header component of your plugin then reference the data using a variable. So for example if you created an autoform and gave it the name add_news in your plugin interface consisting of fields for headlines and urls you could then reference whatever has been entered in that autoform by using a {foreach} construct to add each line of the autoform to the html you added in global header via replacing /*NEWS HERE*/ in the html you posted with:


{foreach $[plugin.add_news]}
<a href="$[plugin.add_news.url]" target="_blank" rel="norewrite">$[plugin.add_news.headline]</a>
{/foreach}\

It also sounds like you may want some sort of autoscrolling feature and the easiest way to do that is by using the deprecated <marquee> element but see the discussion in this thread  for more information.

I should note that there is at least one news plugin already in the plugin library should you want to go the super easy route.

Thanks for the informative post! That's exactly what I needed to know. I'll give it a go tonight and mess around with it.

Thanks for thinking to suggest the auto scroll feature also! I'm not intending to do that with this plugin though.

Basically to start out, I'm making a scrollbox with an image, vertical scrollbar, no horizontal scrollbar, and a page in the plugin that accepts html/news like you suggested. Everything was fairly easy till the last part. =d

I'm guessing you're talking about the "News Fader" plugin? I've used that before, but I'm intending to do more customization and learn and apply javascript/css/html with my plugin.
I really want to learn to make my own plugins, so this is a great starting point for me.

I'll most likely post back with questions at some point, but I'll definitely take a look at the code provided right away.

Thanks alot for your help, I really appreciate it! Especially considering this is pretty basic stuff to most programmers/plugin developers. xD

EDIT:
I mostly understand, but can't figure out how to show the Global Header components html, in the Forum Wrapper template, inside my scrollbox id.
 
How can I add the Global Headers component, as a page in the user interface section that works the same?
Not a big deal having to build the plugin everytime to change the news, but I'd love to know how to do it properly.

I guess I just don't understand the Auto Form part you described. =d

DOUBLE EDIT:
I re-read my last edit, and I must of been tired, as I worded it extremely poorly.. xD
Anyways... I finally got this working how I need, with a different and easier approach then the way you mentioned.

-I used a Main Header/Footer component for my div ids/plugin variable.
-I used a Html Code Box in the user interface to display ScrollBox content.
-I used my Html Code Box variable in my Main Header/Footer component to retrieve and display html in the ScrollBox.

Thanks again for help and leading me on the right track!