[HowTo] Add Mchat static scroll message

Support area for phpBB's mChat extension
Post Reply
faroud
Posts: 13
Joined: 02 Apr 2017, 09:25
Location: belgium
Contact:

[HowTo] Add Mchat static scroll message

#1

Post by faroud » 07 Jul 2017, 10:57

(Edited 7-7-2017: Fixed for mobile)

Code by Theriddler (phpbbservice.nl)
Inspired by newsscroll ext.

Open: template/mchat_body.html

Find:

Code: Select all

<li class="row mchat-static">{MCHAT_STATIC_MESS}</li>
Replace with:

Code: Select all

<div class="navbar" style="border-radius: 0px;background-image:linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%);margin-left:0px;margin-right:0px;">
					<div class="mchatstaticscroll">
						<div class="marquee" style="-webkit-animation-duration: 12s; animation-duration: 12s;"><span style="font-size: 60%; line-height: normal"><span style="color: #000000"><em>{MCHAT_STATIC_MESS}</em></span></span></div>
					</div>
					</div>

Open: theme/mchat.css

Find:

Code: Select all

.mchat-static {
	padding: 5px 5px 7px !important;
}
Replace with:

Code: Select all

.mchat-static {
	padding: 5px 5px 7px !important;
}

.mchatstaticscroll {
	height: auto;	
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.marquee {
	font-size: 230%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	left: 50%;
	-webkit-animation: linear infinite;
	animation: linear infinite;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-name: movement-smooth;
	animation-name: movement-smooth;
	-webkit-animation-direction: normal;
	animation-direction: normal;
}

.rtl .marquee {
	-webkit-animation-name: rtlmovement-smooth;
	animation-name: rtlmovement-smooth;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

@-webkit-keyframes movement-smooth {
	from {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		left: 100%;
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		left: 0%;
	}
}

@keyframes movement-smooth {
	from {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		left: 100%;
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		left: 0%;
	}
}

@-webkit-keyframes rtlmovement-smooth {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		right: 0%;
	}
	to {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		right: 100%;
	}
}

@keyframes rtlmovement-smooth {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		right: 0%;
	}
	to {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		right: 100%;
	}
}

.marquee.marquee-movement-smooth:before {
	-webkit-animation-name: movement-smooth;
	animation-name: movement-smooth;
}

.marquee:hover {
	animation-play-state: paused;
}
Purge forum cache.
Last edited by faroud on 07 Jul 2017, 19:57, edited 3 times in total.

User avatar
kasimi
mChat developer
Posts: 709
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

Re: [HowTo] Add Mchat static scroll message

#2

Post by kasimi » 07 Jul 2017, 11:01

Stickied, thanks! :+1:

terry2
Donor
Posts: 145
Joined: 22 Oct 2016, 18:22
Location: My castle

Re: [HowTo] Add Mchat static scroll message

#3

Post by terry2 » 09 Mar 2018, 11:48

css in html tut tut try this
ext/dmzx/mchat/styles/prosilver/theme/mchat.css

Code: Select all

.mchat-static {
	padding: 5px 5px 7px !important;
}

.mscroll {
	height: 17px;
        border-radius: 6px;
        background-image:linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%);
        margin-left:0px;
        margin-right:0px;	
}

.mchatstaticscroll {
	height: auto;	
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.marquee {
	font-size: 130%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	left: 50%;
	-webkit-animation: linear infinite;
	animation: linear infinite;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-name: movement-smooth;
	animation-name: movement-smooth;
	-webkit-animation-direction: normal;
	animation-direction: normal;
        webkit-animation-duration: 60s; 
        animation-duration: 60s;
}

.rtl .marquee {
	-webkit-animation-name: rtlmovement-smooth;
	animation-name: rtlmovement-smooth;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

@-webkit-keyframes movement-smooth {
	from {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		left: 100%;
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		left: 0%;
	}
}

@keyframes movement-smooth {
	from {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		left: 100%;
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		left: 0%;
	}
}

@-webkit-keyframes rtlmovement-smooth {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		right: 0%;
	}
	to {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		right: 100%;
	}
}

@keyframes rtlmovement-smooth {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		right: 0%;
	}
	to {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		right: 100%;
	}
}

.marquee.marquee-movement-smooth:before {
	-webkit-animation-name: movement-smooth;
	animation-name: movement-smooth;
}

.marquee:hover {
	animation-play-state: paused;
}
ext/dmzx/mchat/styles/prosilver/template/mchat_body.html

Code: Select all

                                 {% if MCHAT_STATIC_MESS and MCHAT_PAGE != 'archive' %}
					<ul class="topiclist forums">
					  <div class="mscroll">
					   <div class="mchatstaticscroll">
					  <div class="marquee"><em>{MCHAT_STATIC_MESS}</em></div>
					 </div>
					</div>
					</ul>
				{% endif %}
Demo http://www.martins-phpbb.com/forum/index.php

terry2
Donor
Posts: 145
Joined: 22 Oct 2016, 18:22
Location: My castle

Re: [HowTo] Add Mchat static scroll message

#4

Post by terry2 » 11 Apr 2018, 18:28

Now have this in an ext ;)

viewtopic.php?f=4&t=190#p1223

Post Reply

Who is online

Users browsing this forum: teufel and 1 guest