Change the Start Screen

RadioMulticaft · February 19, 2021, 11:25am

Hello, can i change the Start Screen ( where it says MIXXX )?
I would look forward to an answer and remain with best regards
Michi

ronso · February 19, 2021, 1:24pm

Sure, you can change anything in Mixxx.

Check the skin documentation intro for where to find the skins
https://github.com/mixxxdj/mixxx/wiki/Creating-Skins#how-to-install-a-skin

below we described how to style the launch image
https://github.com/mixxxdj/mixxx/wiki/Creating-Skins#launch-image

Mind sharing your mod when you’re done?

RadioMulticaft · February 19, 2021, 9:58pm

Hey!
Thanks for your answer.
I’ll take a look at that.

If it turns out well, I can gladly raise the start image

RadioMulticaft · February 20, 2021, 6:43pm

Hey @ronso,

Unfortunately I cannot find the start screen. ( See attachement )

Maybe you can tell me what the file is called or where I can find it.

I thank you in advance and wish you a nice weekend

ronso · February 20, 2021, 9:08pm

actually all required info is in the wiki page I linked.
the first linked section should enable you to find the official skins that were installed with Mixxx (Deere in your case) depending on your operating system.
You can use that directly or work on a copy, as described.

The section about the launch image below describes how the launch image is configured in each skin’s skin.xml (in the root directory of every loadable skin).

regarding the paths used to set the log and the progressbar: image: url(skin:/style/any-image.png); loads any-image.png located in /path/to/Mixxx/skins/Deere

RadioMulticaft · February 20, 2021, 9:48pm

Is that complicated …
I have now checked everything again.
I just don’t think so ^^

Just so we and don’t misunderstand.

I just want to change the loading screen that comes up as soon as you start Mixxx.

But I can’t find this graphic anywhere.

Maybe I can send you the file so that you can tell me the exact path.skin.xml (14,2 KB)

ronso · February 20, 2021, 10:14pm

aahhrrrmm it’s actually quite easy if you bother reading the documentation I linked…

if you want to alter an existing skin (will probably be overriden when updating Mixxx) read https://github.com/mixxxdj/mixxx/wiki/Creating-Skins#change-an-existing-skin Then you’re able to find the folder that contains the installed skins on your hard drive.

In there you’ll find the Deere folder.
It contains a file skin.xml.
Open that with the text editor of your choice.

Find the <LaunchImageStyle> section.
Read the respective documentation https://github.com/mixxxdj/mixxx/wiki/Creating-Skins#launch-image and use whatever colors and images you like.
Save the file.

Restart Mixxx with Deere skin.
Voila!

RadioMulticaft · February 20, 2021, 10:35pm

There is no section in the skin.xml
My folder: Mixxx/Skins/Deere/skin.xml

MIXXX Version 2.2.4 (build 2.2 r6798)

And how is the name of the launch image file ??

ronso · February 20, 2021, 11:15pm

Oh, my bad, sry!
Didn’t remember Deere doesn’t have a special launch image, it’s using the hardcoded default.

You can add your custom launch image into Mixxx/Skins/Deere/skin.xml along the documentation after that line

github.com

mixxxdj/mixxx/blob/3aa0dfae988668ac16e67de49ebf8b4103619f72/res/skins/Deere/skin.xml#L72


    <attribute persist="false" config_key="[EffectRack1_EffectUnit4],group_[BusCenter]_enable">0</attribute>
    <attribute persist="false" config_key="[EffectRack1_EffectUnit4],group_[BusRight]_enable">0</attribute>
    <attribute persist="false" config_key="[EffectRack1_EffectUnit4],group_[BusTalkover]_enable">0</attribute>
  </attributes>
</manifest>
<ObjectName>Mixxx</ObjectName>
<Style src="skin:style.qss" src-mac="skin:style-mac.qss"/>
<Size>1008me,550me</Size>
<Layout>horizontal</Layout>
<Children>
  <SetVariable name="SmallSquareButtonMinimumSize">15,15</SetVariable>
  <SetVariable name="SmallSquareButtonMaximumSize">15,15</SetVariable>
  <SetVariable name="SmallSquareButtonSizePolicy">f,f</SetVariable>
  <SetVariable name="SmallWideButtonMinimumSize">50,18</SetVariable>
  <SetVariable name="SmallWideButtonMaximumSize">50,22</SetVariable>
  <SetVariable name="SmallWideButtonSizePolicy">f,f</SetVariable>

Remember to add the image files and adapt the file paths, of course.

Take a look at the other skins for inspiration, for example LateNight

github.com

mixxxdj/mixxx/blob/3aa0dfae988668ac16e67de49ebf8b4103619f72/res/skins/LateNight/skin.xml#L97


</manifest>
<ObjectName>Mixxx</ObjectName>
<Style src="skin:style.qss" src-mac="skin:style-mac.qss"/>
<!-- MinimumSize should not be an exact monitor resolution. There needs
to be space for the title bar or other chrome at full screen -->
<MinimumSize>1270,550</MinimumSize>
<SizePolicy>me,me</SizePolicy>
<Layout>vertical</Layout>
<LaunchImageStyle>
  LaunchImage {
    background-color: #0f0f0f;
  }
  QLabel {
    image: url(skin:/style/mixxx_logo.svg);
    padding: 0;
    margin: 0px 2px 0px 2px;
    border: none;
    min-width: 160px;
    min-height: 40px;