1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Can you turn an unordered list into an add-on?

Discussion in 'XenForo Development Discussions' started by Trombones13, Sep 12, 2011.

  1. Trombones13

    Trombones13 Well-Known Member

    If you look at the footer of my site, you'll see a scrolling news ticker. Currently, those items are inserted through an unordered list and scroll with JavaScript--see the full template below.
    Code:
    <xen:require css="kurt_globalbar.css" />
    <style type="text/css">
    * { margin:0; padding:0; }
    
    #newsticker-demo {
    width:310px;
    float: left;
    }
    
    #newsticker-demo a { text-decoration:none; }
    #newsticker-demo img { border: 2px solid #FFFFFF; }
    
    #newsticker-demo .title {
    text-align:center;
    font-size:14px;
    font-weight:bold;
    padding:5px;
    }
    
    /* .newsticker-jcarousellite { width:300px; }  */
    .newsticker-jcarousellite ul li{ list-style:none; padding-bottom:1px; margin-bottom:5px; }
    .newsticker-jcarousellite .thumbnail { float:left; width:110px; }
    /* .newsticker-jcarousellite .info { float:right; width:190px; } */
    .newsticker-jcarousellite .info span.cat { font-size:10px; color:#808080; }
    
    </style>
    
    <script src="js/vticker/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $(".newsticker-jcarousellite").jCarouselLite({
            vertical: true,
            visible: 1,
            auto:2000,
            speed:500
        });
    });
    </script>
    
    <fieldset id="moderatorBar2">
        <div class="pageWidth">
            <div class="pageContent">
    <img src="styles/echo/xenforo/logo.png" style="position:absolute; bottom:0px; left:-65px;" class="nowplaying" />
    <div id="newsticker-demox">
    <div class="newsticker-jcarousellite">
      <ul>
          <li>
    <p class="nowplaying" style="color:#ffd270;">Now Playing:</p> <a href="http://cast7.serverhostingcenter.com/tunein.php/bemeddeb/tunein.pls" id="cc_stream_info_song">Loading...</a>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/threads/artist-of-the-week.167/page-3#post-5001">Artist of the Week: Snow Patrol</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/threads/coldplay.513/page-2#post-5011">Listen to new Coldplay single "Paradise"</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/threads/monthly-picks-september-2011.2411/">Download our Monthly Picks playlist for September!</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/threads/avril-lavigne.210/#post-4944"><i>Video:</i> Avril Lavigne - "Wish You Were Here"</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/threads/2011-cma-awards-november-9-8pm-eastern-abc.2292/">CMA Awards: View the nominees</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/posts/4861/"><i>Video:</i> Hedley f/P. Reign - "Invincible"</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/posts/4863/"><i>Free Download:</i> Blink-182 - "After Midnight"</a>
        </div>
          </li>
          <li>
        <div class="info2">
            <a href="http://www.voiceradio.us/threads/my-chemical-romance.2282/">My Chemical Romance kicks out drummer for stealing</a>
        </div>
          </li>
      </ul>
    </div>
    </div>
    <div align="center" style="min-height:35px">
                    <label for="LoginControl" id="SignupButton" style="float:right; margin:0"><a href="https://twitter.com/intent/tweet?text=%40voicerequests+I+want+to+hear+&#91;SONG&#93;+by+&#91;ARTIST&#93;%21&original_referer=http://www.voiceradio.us/" class="inner">{xen:phrase kurt_request}</a></label>
            <div style="float:right; margin:2px;"></div>
                    <label for="LoginControl" id="SignupButton" style="float:right; margin:0"><a href="http://thevoiceradio.xenxero.com/" target="_blank" class="inner">{xen:phrase kurt_listen}</a></label>
    </div>
                <xen:hook name="moderator_bar" />
                <span class="helper"></span>
            </div>
        </div>
    
    <div id="belowbar">
    <div id="belowbarleft">
    <a href="pages/playlist">Playlist</a>
    <a href="threads/radio-faq.533/">Radio FAQ</a>
    <a href="events/weekly">Schedule</a>
    <a href="forums/suggest-a-song.38">Suggest A Song</a>
    <a href="threads/free-legal-music.22">Free Music</a>
    </div>
    <div id="belowbarright">
    <strong>Listen:</strong>
        <a href="threads/guide-how-to-listen-via-itunes.173/">iTunes</a>
        <a href="http://cast7.serverhostingcenter.com/tunein.php/bemeddeb/playlist.pls">Winamp</a>
            <a href="http://thevoiceradio.xenxero.com/" target="_blank">Flowplayer</a>
        <a href="http://cast7.serverhostingcenter.com/tunein.php/bemeddeb/playlist.asx">Windows Media</a>
        <a href="http://cast7.serverhostingcenter.com/tunein.php/bemeddeb/playlist.ram">Real Player</a>
    </div>
    </div>
    </fieldset>
    
    <script type="text/javascript">
    $(document).ready( function()
    {
    //stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit
    if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
    {
        $("#moderatorBar2").css("position", "static");
    }
    });
    </script>
    I'd ideally like to turn this list into an add-on, so that when I distribute the full footer as an add-on, forum admins can easily insert what they want without having to make the tedious template edit. (It would also be easier for me, haha.) I think the easiest way to do it would be by providing fields for each link and the text to display...but I have no idea how to make that happen. Any ideas?

    Thanks!!

    (Bonus points if you can tell me how to make the logo, buttons, and those div=belowbar links easily editable as well. :p)
     
  2. Floris

    Floris Guest

    Add a new plugin.

    Then make a new template with the html5
    Make a new template appending css and one for js
    Then require the css and include the js.

    Make an option group and add options for any dynamic data you want.

    Link all of these to the plugin.

    Add a library/FooterThingy/ dir with a Listener.php file that hooks into the footer, loading the main html5 template.

    You can now export the .xml plugin and the php file, add them in a dir, zip the dir. And share it with other admins.

    Now if you upgrade you only have to 'tweak' the plugin, if at all, and your footer template is always the original.
     
    Mikey and Trombones13 like this.
  3. Floris

    Floris Guest

    Mikey likes this.
  4. principia

    principia Well-Known Member

    I think the notification function in 1.1 will do that also.
     
  5. Trombones13

    Trombones13 Well-Known Member

    I think that should help get me started; thanks, Floris! :)

    @principia: I'm not sure those are in any way related to it...what do you mean?
     

Share This Page