Widgetkit media player has no buttons

grabit
Topic Author
Offline
Platinum Member

12 years 3 months ago #33713 by grabit

Widgetkit media player has no buttons was created by grabit

Hi,

On one website www.papjazzhaiti.com , we use Flexicontent 1.5.6 R9b (r1601) on J 1.5.26.

In one article we have a media player to play a radio show in mp3, everything is OK but the buttons play and mute are not displayed.

www.papjazzhaiti.com/fr/presse/edition-2...-audio-festival-jazz

I have asked the programmers of widgetkit and they replied that the problem comes from FC. They are speaking of styling bug on a button tag.

Here is the link to their forum post: www.yootheme.com/support/question/33509

I don't know how to verify. Could somebody have a clue?

An Apple a days keeps the doctor away

Please Log in or Create an account to join the conversation.

brandonking
Offline
Platinum Member

12 years 3 months ago #33715 by brandonking

Replied by brandonking on topic Widgetkit media player has no buttons

You have to override css. Try to disable these two elements then you will see the button.
#flexicontent button{
background: #eee !important;
margin: 2px 6px 2px 0px;
}
#flexicontent button:hover
{
background: #eee !important;
}

Please Log in or Create an account to join the conversation.

grabit
Topic Author
Offline
Platinum Member

12 years 3 months ago #33716 by grabit

Replied by grabit on topic Widgetkit media player has no buttons

Thanks, it works!

but I will have to remember each time I upgrade FC to remove this rule.

I tried to make some css rules to avoid changing the flexicontent.css but I couldn't.

and the button tag is used a lot with html5 docs

:cry:

An Apple a days keeps the doctor away

Please Log in or Create an account to join the conversation.

Rooney
Offline
Moderator

12 years 3 months ago #33717 by Rooney

Replied by Rooney on topic Widgetkit media player has no buttons

Hi, you can either put the rule in a special templates css file or, what I do, you can just add a custom css file that is called at last position in the template index.php file. I am doing this for all changes that could be effected updating a component!

Rooney

Joomla! 3.9.24 and FC 3.3.9

Please Log in or Create an account to join the conversation.

grabit
Topic Author
Offline
Platinum Member

12 years 3 months ago #33718 by grabit

Replied by grabit on topic Widgetkit media player has no buttons

I have a custom css template but to change background on some button tag it is complicated.

Also because of the !important element in the css.

The css from flexicontent

Code:

#flexicontent button, div.flexi_edit .flexi_buttons button {
	border-radius:5px !important;
	-moz-border-radius: 5px !important;
	-webkit-border-radius: 5px !important;
	border: 1px solid #cccccc !important;
	background: #eeeeee !important;
	color: white !important;	
	margin: 2px 6px 2px 0px;
	padding:1px 4px 1px 2px;
	font-weight:bold;
	font-size:11px;
}

#flexicontent button:hover, div.flexi_edit .flexi_buttons button:hover {
	background: #cccccc !important;
	border: 1px solid gray !important;
}

has to be overwritten by this one in the #flexicontent div

Code:

.mejs-ted .mejs-controls .mejs-playpause-button  button {
	width: 49px;
	height: 28px;
	background: url(controls-ted.png) no-repeat -50px -23px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-pause button  {
	background-position: 0 -23px;
}
.mejs-ted .mejs-controls .mejs-fullscreen-button  button {
	width: 19px;
	height: 17px;
	background: transparent url(controls-ted.png) no-repeat 0 -66px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-unfullscreen  button {
	background: transparent url(controls-ted.png) no-repeat -21px -66px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-mute button {
	background: url(controls-ted.png) no-repeat -15px 0;
	width: 24px;
	height: 22px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-unmute button {
	background: url(controls-ted.png) no-repeat -40px 0;
	width: 24px;
	height: 22px;
	margin: 0;
	padding: 0;	
}
.mejs-wmp .mejs-controls .mejs-playpause-button  button {
	width: 40px;
	height: 40px;
	background: url(controls-wmp.png) no-repeat 0 0;	
	margin: 0;
	padding: 0;
}
.mejs-wmp .mejs-controls .mejs-pause button  {
	background-position: 0 -40px;
}
.mejs-wmp .mejs-controls .mejs-volume-button button {
	margin: 0;
	padding: 0;
	background: url(controls-wmp.png) no-repeat -42px -17px;
	width: 20px;
	height: 15px;
}
.mejs-wmp .mejs-controls .mejs-unmute button {
	margin: 0;
	padding: 0;
	background: url(controls-wmp.png) no-repeat -42px 0;
	width: 20px;
	height: 15px;
}
.mejs-wmp .mejs-controls .mejs-fullscreen-button  button {
	margin: 0;
	padding: 0;
	background: url(controls-wmp.png) no-repeat -63px 0;
	width: 15px;
	height: 14px;
}

I added #flexicontent at the beginning of each css rule and changed the path of the background image but it didn't worked.

An Apple a days keeps the doctor away

Please Log in or Create an account to join the conversation.

kenmcd
Offline
Moderator

12 years 3 months ago #33722 by kenmcd

Replied by kenmcd on topic Widgetkit media player has no buttons

Generally using !important should be avoided.
Because using it often causes issues like this.

And because I would like to base a new HTML5 Media Field Plugin on MediaElement.js (WidgetKit also uses MediaElement.js).

I also ran into an issue when testing the JPlayer.js HTML5 player on J1.5 in a FLEXIcontent page – had a similar issue with the player interface being broken.

Any HTML5 player is going to use CSS buttons so this issue needs to be resolved permanently.

Moderator note: Moving thread to Bug Reports forum

AllMedia4Joomla Project
Download AllMedia YouTube Feed Gallery module

Please Log in or Create an account to join the conversation.