MyBB Community Forums

MyBB Community Forums > Extensions > Plugins > Plugin Support > Help styling "Cool Announcements with Marquee" container
Full Version: Help styling "Cool Announcements with Marquee" container
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

RocketFoot

2019-12-03, 04:10 PM
I am having a rough time trying to style the container that the marquee scrolls in...here is the code I am working with:

<div style="background: {$mybb->settings['annc']};
	border-top: 1px solid {$mybb->settings['annb']}; border-right: 1px solid {$mybb->settings['annb']}; border-left: 1px solid  {$mybb->settings['annb']}; border-bottom: 1px solid {$mybb->settings['annb']};border-radius: 6px;text-align: center; margin: 10px auto; padding: 5px 20px;color:{$mybb->settings['anncc']};"><center><marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height=""> {$mybb->settings['ann']}</marquee></center></div>
		<br />
Which gives me this:

[attachment=42363]

But I would like to add a title block on the left side with a font awesome icon...something like this photoshop rendering:

[attachment=42364]

I tried a few things but every attempt broke the entire marquee... Sad

SvePu

2019-12-03, 05:19 PM
Pls, try this:

<div style="background: #EEEEEE;border: 1px solid #2c82c9;border-radius: 3px;text-align: center;margin: 10px auto;padding: 5px 20px 5px 165px;color:#03456b;line-height: 2em;position: relative;">
	<div style="background: red; position: absolute; top: 0; left: 0; padding: 5px 20px; margin: -1px; line-height: 2em; font-weight: 800; color: white; border: 1px solid red; border-bottom-left-radius: 3px; border-top-left-radius: 3px; ">
		<i class="fas fa-microphone-alt fa-lg"></i> Forum News
	</div>
	<center>
		<marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height="">
			{$mybb->settings['ann']}
		</marquee>
	</center>
</div>
<br />

RocketFoot

2019-12-03, 05:48 PM
(2019-12-03, 05:19 PM)SvePu Wrote: [ -> ]Pls, try this:

<div style="background: #EEEEEE;border: 1px solid #2c82c9;border-radius: 3px;text-align: center;margin: 10px auto;padding: 5px 20px 5px 165px;color:#03456b;line-height: 2em;position: relative;">
	<div style="background: red; position: absolute; top: 0; left: 0; padding: 5px 20px; margin: -1px; line-height: 2em; font-weight: 800; color: white; border: 1px solid red; border-bottom-left-radius: 3px; border-top-left-radius: 3px; ">
		<i class="fas fa-microphone-alt fa-lg"></i> Forum News
	</div>
	<center>
		<marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height="">
			{$mybb->settings['ann']}
		</marquee>
	</center>
</div>
<br />

Perfect!!  I just can't seem to get the hang of styling!  Thank you!!

While looking at this code, do you know why the scroll slows down with mouse hover but doesn't speed up after you stop hovering?  The scroll stays real slow.  It did this before any styling.  I'd like it to speed back up after no hover?

https://www.7173mustangs.com/index.php

Thanks again for the styling, it looks GREAT!

SvePu

2019-12-03, 06:04 PM
I have also noticed the slowdown but can not see where it comes from. If you really like this type of marquee, there are even better ways to build it.
On browsers like Firefox that marquee doesn't run smoothly, it sticks a little bit.

kuttysoft

2019-12-03, 06:12 PM
(2019-12-03, 05:48 PM)RocketFoot Wrote: [ -> ]
(2019-12-03, 05:19 PM)SvePu Wrote: [ -> ]Pls, try this:

<div style="background: #EEEEEE;border: 1px solid #2c82c9;border-radius: 3px;text-align: center;margin: 10px auto;padding: 5px 20px 5px 165px;color:#03456b;line-height: 2em;position: relative;">
	<div style="background: red; position: absolute; top: 0; left: 0; padding: 5px 20px; margin: -1px; line-height: 2em; font-weight: 800; color: white; border: 1px solid red; border-bottom-left-radius: 3px; border-top-left-radius: 3px; ">
		<i class="fas fa-microphone-alt fa-lg"></i> Forum News
	</div>
	<center>
		<marquee onmouseover="this.setAttribute('scrollamount',0)" onmouseout="this.setAttribute('scrollamount',1)" direction="left" scrollamount="5" scrolldelay="1" height="">
			{$mybb->settings['ann']}
		</marquee>
	</center>
</div>
<br />

Perfect!!  I just can't seem to get the hang of styling!  Thank you!!

While looking at this code, do you know why the scroll slows down with mouse hover but doesn't speed up after you stop hovering?  The scroll stays real slow.  It did this before any styling.  I'd like it to speed back up after no hover?

https://www.7173mustangs.com/index.php

Thanks again for the styling, it looks GREAT!
 
bro possible u can make one plugin for this 


https://community.mybb.com/thread-225522-post-1339581.html#pid1339581

please check

RocketFoot

2019-12-03, 06:13 PM
I found a nice pure CSS marquee but it is coded different than the one above...It looks good other than it also needs the red title box and font awesome microphone!

I tested it in my template and it worked nicely on all browsers!  If anyone could help me with the same styling as the other one above, I would greatly appreciate it!!


    <style style="text/css">
        .marquee {
            height: 40px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 40px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <p> {$mybb->settings['ann']} </p>
    </div>

<br />

SvePu

2019-12-04, 05:39 PM
Here is your code Wink

<style type="text/css">
    .marquee_cont {
        height: 2em;
        background: #fefefe;
        color: #333;
        border: 1px solid #4a4a4a;
        position: relative;
        padding: 5px 0;
        border-radius: 3px;
    }

    .marquee_badge {
        position: absolute;
        padding: 5px 20px;
        line-height: 2em;
        height: 2em;
        top: 0;
        left: 0;
        background: red;
        border: 1px solid red;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        color: white;
        font-weight: 800;
        margin: -1px;
        z-index: 1;
    }

    .marquee {
        max-width: 100vw;
        white-space: nowrap;
        overflow: hidden;
        line-height: 2em;
        margin: 0 5px 0 145px;
    }

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
    }

    .marquee span:hover {
        animation-play-state: paused
    }

    @keyframes marquee {
        0%  { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
</style>

<div class="marquee_cont">
    <div class="marquee_badge"><i class="fas fa-microphone-alt fa-lg"></i> Forum News</div>
    <div id="marquee" class="marquee">
        <span>{$mybb->settings['ann']}</span>
    </div>
    <script type="text/javascript">
    if (document.getElementById('marquee')) {
        var marquee = document.getElementById('marquee');
        len = marquee.innerHTML.length;
        marquee.firstElementChild.style.animationDuration = len/6 +'s';
    }
    </script>
</div>
<br />

[attachment=42370]

RocketFoot

2019-12-04, 05:54 PM
(2019-12-04, 05:39 PM)SvePu Wrote: [ -> ]Here is your code Wink

<style type="text/css">
    .marquee_cont {
        height: 2em;
        background: #fefefe;
        color: #333;
        border: 1px solid #4a4a4a;
        position: relative;
        padding: 5px 0;
        border-radius: 3px;
    }

    .marquee_badge {
        position: absolute;
        padding: 5px 20px;
        line-height: 2em;
        height: 2em;
        top: 0;
        left: 0;
        background: red;
        border: 1px solid red;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        color: white;
        font-weight: 800;
        margin: -1px;
        z-index: 1;
    }

    .marquee {
        max-width: 100vw;
        white-space: nowrap;
        overflow: hidden;
        line-height: 2em;
        margin: 0 5px 0 145px;
    }

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
    }

    .marquee span:hover {
        animation-play-state: paused
    }

    @keyframes marquee {
        0%  { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
</style>

<div class="marquee_cont">
    <div class="marquee_badge"><i class="fas fa-microphone-alt fa-lg"></i> Forum News</div>
    <div id="marquee" class="marquee">
        <span>{$mybb->settings['ann']}</span>
    </div>
    <script type="text/javascript">
    if (document.getElementById('marquee')) {
        var marquee = document.getElementById('marquee');
        len = marquee.innerHTML.length;
        marquee.firstElementChild.style.animationDuration = len/6 +'s';
    }
    </script>
</div>
<br />

SvePu, that is amazing!  You even added the hover pause!  I love it! 

Is the scroll speed adjustable?  I may need to speed it up just a bit but otherwise...PERFECT!!

Thanks again!!

SvePu

2019-12-04, 06:30 PM
You can set the number 6 in here:
marquee.firstElementChild.style.animationDuration = len/6 +'s';

higher or lower (higher number => faster scroll)

RocketFoot

2019-12-04, 06:46 PM
(2019-12-04, 06:30 PM)SvePu Wrote: [ -> ]You can set the number 6 in here:
marquee.firstElementChild.style.animationDuration = len/6 +'s';

higher or lower (higher number => faster scroll)

Got it!  Thanks again!!
Pages: 1 2
MyBB Community Forums > Extensions > Plugins > Plugin Support > Help styling "Cool Announcements with Marquee" container