Changing Sunstone Logo

Hello,

I was looking to do some customization on OpenNebula front-end just to try some things customization side.

I would like to know how to change the logo of OpenNebula first, as seen in Sunstone Configuration — OpenNebula 6.10.3 documentation the path highlighted is not available anymore since there is no folder at this path /usr/lib/one/sunstone/public/images/

Is the customization still available in 6.10?

Thank you very much.

Hello @Manuel_Femia,

The path for the logo that appears on the documentation should be there. It looks like there’s something on your installation that changed that path. The logo should be on the Sunstone public assets directory (I’m double checking with the team in any case, but it should be as appears on the documentation).

If the /images/logos directory doesn’t exist, you may need to create it. Then is basically edit a yaml file, as it states on the documentation.

Cheers,

Hello @FrancJP

The problem is that I have /usr/lib/one/fireedge but not /usr/lib/one/sunstone

That’s why I see the paths as different. I will upload a screen of some of my paths from the terminal as soon as I got access to it!

Hi @Manuel_Femia,

I’ve checked with the team, so 2 things about this:

  1. Follow the instructions on this Documentation page (this is the updated process)

  2. Check this route instead: /etc/one/fireedge/sunstone/views to find and replace the logo

Cheers,

Hello!

It works, thank you very much.

1 Like

Hello @FrancJP

Is there any guide to change the color of some elements to match the logo colors?

Thank you

Hi @Manuel_Femia,

Sorry for the late reply. There’s no official guideline for changing the color, you have to go to the source and modify the CSS. It also depends on which version you are using.

You will have to locate the /public folder and locate the tailwind.config.js file (though it looks like you have to built it from source).

Check for the following classes:

  • src/styles
  • src/themes or src/assets/css

And edit directly on it. If I found more information, I’ll let you know.

Cheers,

Hello @FrancJP, no problem! Thank you for all the help provided until now on many issues.

I’ve installed OpenNebula following this link so with packages, version 6.10.3

I don’t have those files in my folders. but I can see this file in the source code with all the css imported from the colors file

So I guess in the package releases some files are not modifiable or I am looking in the wrong part.

I was trying to find the files in the /usr/lib/one/fireedge folder.

Are the files of the web page installed in another folder when installed through the release package instead of the source code?

Thank you!

Hi @Manuel_Femia,

I’m checking that I forgot to mention that for having that file, you need to build OpenNebula from the source, so a normal download won’t include these files apparently. Again, let me check with the team to give you some better insights.

Cheers,

Hello again,

The dev team gave me a better information, so let’s see if this could help you:

In 6.10 version the colors that Sunstone is using are defined in src/fireedge/src/client/theme/defaults.js but you will need to compile again Sunstone in order to be able to use this new version.

To do that, perform the following steps:

  • Use at least node 16
  • Execute npm install on the source folder
  • Execute npm run buid on the source folder
  • Remember that the files that executes the opennebula-fireedge service are on /usr/lib/one/fireedge, so if you create a new version of Sunstone, you will need to replace these files (making a backup first)

We are working to improve this process. In OpenNebula 7.0, which beta will be release soon, the colors are isolated in two files, one for light mode and other for dark mode, specifying the components that are affected by each color. Also, for future releases we still working on improve the customization to Sunstone, until we be able to customize themes using config files without the need of compile again the app.

Let me know if it works, or if you need more information.

Cheers,