MyBB Community Forums

Pages: 1 2

upload jquery.newsTicker.js file to your forum's jscripts folder

find </head> in the index template of your theme
add above </head> :

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.newsTicker.js"></script>

on the same index template add required content with li tags like below

<ul class="newsticker">
    <li>............... one ..............</li>
    <li>............... two ..............</li>
    <li>............... three ..............</li>
    <li>............... four ..............</li>
</ul>

you can add it above {$forums}

on the same index template find </body> and add above

<script>
	$('.newsticker').newsTicker({
    row_height: 20,
    max_rows: 1,
    speed: 600,
    direction: 'up',
    duration: 4000,
    autostart: 1,
    pauseOnHover: 0
});
</script>

save index template & check if it works by refreshing index page of your forum

Hello!

I did exactly as you suggested but i'm not getting it working as it should.

My forum is running Dark1.8 theme by devilking.

The steps i followed:

-Moved the jquery.newsTicker.js file to forum's jscripts folder.

And i will post you my index template with modifications i did,as told by you.

And please check the screenshot i posted.

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.newsTicker.js"></script>

</head>
<body>
{$header}
{$dvz_shoutbox}

<ul class="newsticker">
   <li>............... one ..............</li>
   <li>............... two ..............</li>
   <li>............... three ..............</li>
   <li>............... four ..............</li>
</ul> 

{$forums}
{$boardstats}

<dl class="forum_legend smalltext">
<dt><div class="forum_status forum_on"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->new_posts}</dd>

<dt><div class="forum_status forum_off"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->no_new_posts}</dd>

<dt><div class="forum_status forum_offlock"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_locked}</dd>

<dt><div class="forum_status forum_offlink"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}

<script>
   $('.newsticker').newsTicker({
   row_height: 20,
   max_rows: 1,
   speed: 600,
   direction: 'up',
   duration: 4000,
   autostart: 1,
   pauseOnHover: 0
});
</script> 

</body>
</html>

[attachment=39793]

looks like jquery.newsTicker.js file is not loading.
are you using any cache system [eg. from cloudflare] ?

can we have your forum url to check it (you may PM me)

I retried the changes suggested by you and it is working.Is it possibile to make it look like with the announcement title with some icon in the front and may be with a separate bar ?

Please check the screenshot i posted in this post ,if you dont understand what i mean.

Really thanks man!

Regards!

[attachment=39846]

Here is what I used:

Add this code somewhere in your header template: (I put mine under {$awaitingusers})

<link rel="stylesheet" href="ticker.css">

<div class="ticker-container">
  <div class="ticker-caption">
    <p><i class="fa fa-exclamation-circle fa-lg"></i> Breaking News</p>
  </div>
  <ul>
    <div>
      <li><span>Breaking News 1 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 2 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 3 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 4 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 5 &ndash; <a href="#">read more</a></span></li>
    </div>
  </ul>
</div

<script src="YOUR FORUM URL/jquery.min.js"></script> 
<script src="ticker.js"></script>

Be sure to change path at the bottom of the script to your forum's url.

Finally...
Upload contents of ticker.zip to you forum root.

Note: I didn't write the code, I just adapted it for my forum from this page: https://www.jqueryscript.net/animation/M...icker.html

Many thanks for replying.

I tried your method,it works but that red doesn't suit my forum theme.

I would like to have it as the screenshot in the 14th post and that requires some css input.

(2018-01-10, 08:13 PM)kbilly Wrote: [ -> ]Many thanks for replying.

I tried your method,it works but that red doesn't suit my forum theme.

I would like to have it as the screenshot in the 14th post and that requires some css input.

I just replied to your PM before I saw this post...

You could change the color of the arrow by changing the .png image. Do you use photoshop by chance? If not, here is the png in black...

Thanks @RocketFoot and @.m

I got it working.I used the method used by Rocketfoot.

Repped both of you guys,i really appreciate your help.

Regards!

Pages: 1 2

.m.

kbilly

.m.

kbilly

RocketFoot

kbilly

RocketFoot

kbilly