Customize view of "playing now" or "theater mode" if i have no other option

[jefantasma]

Hello, I currently have the original MusicBee preview in 4K as in the attached image, but I would like to leave it in an equal preview or at least as close as possible to the other image that is attached.
I've read the wiki, took a look at the forum, downloaded some skins and "theater modes", but none of them worked.
For those who are already an experienced user here, could you help me on how I should do to make MusicBee look like I would like?
Or if not, which parameters should I change (if it's xml, which files should I edit and which parameters change cover size and letters and their positioning? In "playing now" mode if possible.
Thank you all in advance.

What i have now:
https://imgur.com/a/w6HXtHy


What i desire to show:
https://imgur.com/a/FLsUoxe

[jefantasma]

Oh, i'm a new user and my language is not english, so i'm sorry if i make any mistake.
Thanks again

[Mayibongwe]

Hello and welcome to the forum, jefantasma.

What you are dealing with here is called a Theater Mode (TM). To make one, you'll need to create a text file with a .xml extension.
Once created, place it in ...\MusicBee\Plugins\TheaterMode.Embeded in order to access it inside MusicBee (Now Playing tab).

If you want to learn the exact workings of a TM, refer to the ReadMe text file that's in ...\MusicBee\Plugins\TheaterMode.List.
Note that the file hasn't been updated in a long time though. So it's missing quite a few things, but it should still be enough to get you started.

To make it easier for you, I already wrote up a few lines that should resemble most of your desired layout.
So copy the code below into the xml file that you'll create and then if you have further questions, ask them here or create new topics in this section of the forum.. Hope that helps.

Code

<?xml version="1.0" encoding="utf-8"?>
<root>
	<!-- Album Cover --> 
	<element type="AlbumCover" x="-5" y="-2" widthDock="Panel.Height" width="5" heightDock="Panel.Height" height="2" brightness="0.5"/>
	
	<!-- Artist Picture -->
	<element type="Gallery" xAnchor="AlbumCover.Right" yAnchor="AlbumCover.Top" widthDock="X:Panel.Right" heightDock="Y:AlbumCover.Bottom" aspectRatio="zoomKeep" interval="15" tags="artist"/>
	<element type="Block" xAnchor="Gallery.Left" yAnchor="Gallery.Top" widthDock="X:Gallery.Right" heightDock="Y:Gallery.Bottom" bg="225,0,0,0"/>
	
	<!-- Lyrics -->
	<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="10" widthDock="X:Gallery.30" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="225,225,225" fg2="255,255,0" align="Center"/>
	
	<!-- Artist Biography -->
	<element type="ArtistInfo" xAnchor="Lyrics.Right" yAnchor="Lyrics.Top" widthDock="X:Gallery.65" heightDock="Y:Lyrics.Bottom" height="-10" font="Segoe UI" style="Semi-bold" size="9" fg="225,225,225" align="Center"/>
	
	<!-- Playing List -->
	<element type="NowPlayingList" xAnchor="ArtistInfo.Right" y="-11" widthDock="X:Panel.Right" heightDock="Y:Lyrics.Bottom" rowPadding="11" font="Segoe UI" style="Regular" size="9" fg="225,225,225" mouseOverFg="255,255,0">
		<child width="12"/>
		<child id="Speaker" width="10"/>
		<child id="#" width="30" format="#\." align="center"/>
		<child id="TrackArtistAndTitle" width="180"/>
	</element>		
</root>

[jefantasma]

First of all i would like to thank you very much!
i edited the xml based on your code and modified based on other .xmls inside the folders TheaterMode.List and TheaterMode.Embeded on C:\Program Files (x86)\MusicBee\Plugins
Here the results till these moment:

https://imgur.com/a/eWpmpvQ

Is it possible to remove that "media player" buttons on top center? I tried but can't remove.
And how to add more buttons on bottom player like shuffle, repeat and etc?
I would like to know too if it's possible to add a black border on the white text of band info and lyrics, so depending on the background, they will still readable.
On the "playlist panel" i would like to organize texts like:
Track title (Duration)
Album
Year
Artist
Album Artist
But in the code that i copied it's like this:

   <element name="#Cover_01" type="AlbumCover" id="Tracks[1]" xAnchor="#List.5" x="0" yAnchor="#List.2" y="0" widthDock="#List.Height.8" width="0" heightDock="#List.Height.8" height="0" brightness="1.0" />
   <element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.5" y="0" widthDock="x:#List.95" width="0" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240" mouseOverFg="200,255,200" onClick="PlayNow">
      <child id="Title"> </child>
      <child> (</child>
      <child id="Duration"> </child>
      <child>)</child>
   </element>   
   <element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.65" y="0" widthDock="x:#List.95" width="0" font="Segoe UI" style="Regular" size="8" fg="180,180,180" mouseOverFg="200,255,200" onClick="PlayNow">
      <child id="Artist"> </child>
      <child> - </child>
      <child id="Album" font="Segoe UI" style="Italic" fg="200,200,200"> </child>
      <child> [</child>
      <child id="Year (yyyy)" width="50" />
      <child>]</child>
   </element>   
i would like to know if there's a easier form of having a line down the other without use of <element>, child, and then close them.

Thank you for all the help!

[Mayibongwe]

Is it possible to remove that "media player" buttons on top center? I tried but can't remove.

You can't really remove them, but by adding the line below, you can position them out of sight.
<element type="PlayerBar" xAnchor="Panel.Left" x="-75" yAnchor="Panel.Top" y="-75"/>

And how to add more buttons on bottom player like shuffle, repeat and etc?

Have a look here (If you can't get it to work, do say): https://getmusicbee.com/forum/index.php?topic=11003.msg67427#msg67427

I would like to know too if it's possible to add a black border on the white text of band info and lyrics, so depending on the background, they will still readable.

In the example code I wrote in my previous reply, you'll notice that there's a "block" element just below the gallery element under the <!-- Artist Picture --> comment.
That block element can be used to dim the background artist picture. Replace the bg="225,0,0,0" with any number between that and 255 to make it more darker.

On the "playlist panel" i would like to organize texts like...

The code below is only for the first three tracks. Add to that as you see fit. Compare how the code for track 2 and 3 differ, in order to see what you'll have to change when adding more tracks.

Code

<element name="#Cover_01" type="AlbumCover" id="Tracks[1]" xAnchor="ArtistInfo.Right" yAnchor="ArtistInfo.Top" width="134" height="134"/>
	<element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.Top" y="2" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240" mouseOverFg="200,255,200" onClick="PlayNow"><child id="Title"></child><child> (</child><child id="Duration"></child><child>)</child></element>	
	<element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.Top" y="29" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Album"></child></element>	
	<element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.Top" y="55" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Year"></child></element>	
	<element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.Top" y="82" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Artist"></child></element>	
	<element type="Field" id="Tracks[1]" xAnchor="#Cover_01.Right" x="10" yAnchor="#Cover_01.Top" y="109" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="AlbumArtist"></child></element>	
	
	<element name="#Cover_02" type="AlbumCover" id="Tracks[2]" xAnchor="ArtistInfo.Right" yAnchor="#Cover_01.Bottom" y="35" width="134" height="134"/>
	<element type="Field" id="Tracks[2]" xAnchor="#Cover_02.Right" x="10" yAnchor="#Cover_02.Top" y="2" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240" mouseOverFg="200,255,200" onClick="PlayNow"><child id="Title"></child><child> (</child><child id="Duration"></child><child>)</child></element>	
	<element type="Field" id="Tracks[2]" xAnchor="#Cover_02.Right" x="10" yAnchor="#Cover_02.Top" y="29" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Album"></child></element>	
	<element type="Field" id="Tracks[2]" xAnchor="#Cover_02.Right" x="10" yAnchor="#Cover_02.Top" y="55" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Year"></child></element>	
	<element type="Field" id="Tracks[2]" xAnchor="#Cover_02.Right" x="10" yAnchor="#Cover_02.Top" y="82" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Artist"></child></element>	
	<element type="Field" id="Tracks[2]" xAnchor="#Cover_02.Right" x="10" yAnchor="#Cover_02.Top" y="109" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="AlbumArtist"></child></element>	
	
	<element name="#Cover_03" type="AlbumCover" id="Tracks[3]" xAnchor="ArtistInfo.Right" yAnchor="#Cover_02.Bottom" y="35" width="134" height="134"/>
	<element type="Field" id="Tracks[3]" xAnchor="#Cover_03.Right" x="10" yAnchor="#Cover_03.Top" y="2" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240" mouseOverFg="200,255,200" onClick="PlayNow"><child id="Title"></child><child> (</child><child id="Duration"></child><child>)</child></element>	
	<element type="Field" id="Tracks[3]" xAnchor="#Cover_03.Right" x="10" yAnchor="#Cover_03.Top" y="29" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Album"></child></element>	
	<element type="Field" id="Tracks[3]" xAnchor="#Cover_03.Right" x="10" yAnchor="#Cover_03.Top" y="55" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Year"></child></element>	
	<element type="Field" id="Tracks[3]" xAnchor="#Cover_03.Right" x="10" yAnchor="#Cover_03.Top" y="82" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="Artist"></child></element>	
	<element type="Field" id="Tracks[3]" xAnchor="#Cover_03.Right" x="10" yAnchor="#Cover_03.Top" y="109" widthDock="x:Panel.Right" font="Segoe UI Light" style="Regular" size="12" fg="240,240,240"><child id="AlbumArtist"></child></element>	

i would like to know if there's a easier form of having a line down the other without use of <element>, child, and then close them.

Unfortunately, there isn't one. You'll just have to deal with that many lines of code.

[jefantasma]

I would like to thank you very much again!
you helped me a lot.
For you to undestand, i cannot abandoned windows media player till now, because i don't discovered till some days ago that we have a player that reads the lyrics and show the full album art at the same time. The combination Music Bee + Lyrics finder + MP3Tag is awesome!

The layout now:

https://imgur.com/a/3jbUKoS

I'm trying to know what is the name of id "tracknumber" i tried tracknumber, track, track#, #, but none of them was succesful
And trying to insert shuffle, repeat and other potentials buttons.

At this time i'm very happy with the results, but i will improve probably.
Is that possible to add a semi transparent square  in the back of the upcoming tracks? or to limitate the background width withe the option "stretch"?

The problem of border to lyrics, i resolved duplicating many times the code and positioning a little bit to the right, to the left, top and botton, wi the black text, the last line reads a white text.
Not a resolver in fact, but got me a result that i liked:

Code

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="8" widthDock="X:Gallery.30" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="9" widthDock="X:Gallery.30" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="11" widthDock="X:Gallery.30" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="12" widthDock="X:Gallery.30" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="10" widthDock="X:Gallery.29,9" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="10" widthDock="X:Gallery.29,8" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="10" widthDock="X:Gallery.30,2" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="10" widthDock="X:Gallery.30,1" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="8" widthDock="X:Gallery.29,9" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="9" widthDock="X:Gallery.29,8" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="8" widthDock="X:Gallery.30,2" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="9" widthDock="X:Gallery.30,1" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="9" widthDock="X:Gallery.29,9" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="8" widthDock="X:Gallery.29,8" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="9" widthDock="X:Gallery.30,2" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="8" widthDock="X:Gallery.30,1" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="11" widthDock="X:Gallery.29,9" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="12" widthDock="X:Gallery.29,8" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="11" widthDock="X:Gallery.30,2" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="12" widthDock="X:Gallery.30,1" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="12" widthDock="X:Gallery.29,9" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="11" widthDock="X:Gallery.29,8" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="12" widthDock="X:Gallery.30,2" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>
<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="11" widthDock="X:Gallery.30,1" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="0,0,0" fg2="255,255,255" align="Center"/>

	<element type="Lyrics" xAnchor="Gallery.Left" yAnchor="Gallery.Top" y="10" widthDock="X:Gallery.30" heightDock="Y:Gallery.Bottom" font="Segoe UI" style="Semi-bold" size="9" fg="255,255,255" fg2="255,255,255" align="Center"/>

[Mayibongwe]

I'm trying to know what is the name of id "tracknumber" i tried tracknumber, track, track#, #, but none of them was succesful

It's TrackNo. The 'ReadMe' text file that I pointed you to before has a list of all supported fields.

...And trying to insert shuffle, repeat and other potentials buttons.

Below is an example of how the shuffle button can be defined. Using this and info from the thread I linked you to before, you should be able to set up the repeat button yourself.

Code

<element type="Text" xAnchor="Panel.Center" yAnchor="Panel.Center" width="50" font="Wingdings" style="Bold" size="15" fg="255,0,0" mouseOverFg="155,155,155" onClick="ShuffleToggle" visibleTrigger="ShuffleOn">l</element>
<element type="Text" xAnchor="Panel.Center" yAnchor="Panel.Center" width="50" font="Wingdings" style="Bold" size="15" fg="255,255,255" mouseOverFg="125,0,0" onClick="ShuffleToggle" visibleTrigger="ShuffleOff">l</element>

Is that possible to add a semi transparent square  in the back of the upcoming tracks?

Insert the following line just beneath your 'Cover_01' stuff to see if that's what you want. If it is, then duplicate it accordingly for the other tracks.

Code

<element type="Block" xAnchor="#Cover_01.Right" x="2" yAnchor="#Cover_01.Top" y="2" widthDock="X:Panel.Right" heightDock="Y:#Cover_01.Bottom" height="1" bg="50,100,100,100"/>

...or to limitate the background width withe the option "stretch"?

Not sure what you mean there. The width of any element can be constrained by using the widthDock attribute.

The problem of border to lyrics, i resolved duplicating many times the code and positioning a little bit to the right, to the left, top and bottom...

I misunderstood you before. I didn't realize you were asking for a way to get a shadow effect around the lyrics.
In any case, I would have said that was not doable and would have suggested that you change the font to bold or something like that.
But I'm glad you've now got the text looking the way you want. Nice workaround.