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.
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.
)
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+[SONG]+by+[ARTIST]%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.
)
