How to costumize my home page

1

Hi,
I’m trying to costumize my Xibo main page (background, logo…), but i can’t find my files because i installed XIBO with Docker-compose, I followed all the tutorial documentation but I didn’t find nothing, my xibo folder has the shared/cms/web/theme directory that is empty. How can I modify the page?

Thank you for support.

Fabio Gola

2

When creating a custom Theme for your CMS, you will need to create the files that will set the modified Theme. You will not locate the files that are part of the current Theme in the folder you are looking in. It is strongly recommended not to modify those files as this can cause issues with future upgrades.

For Docker installations you should find that the file path for your custom Theme has already been created.

Navigate to the directory /cms/web/theme/, there should be a folder in this location named custom. If you do not have a custom folder at this location, you will need to create one.

Once you are in the custom directory, or have created one, create a folder inside the custom folder that will contain your new Theme. You can name it anything you like but I will refer to it as MyTheme for simplicity.

Inside of the MyTheme folder you have created, you will need to create a config.php file. Within this config file paste the following:

<?php
$config = array(
    'theme_name' => 'Xibo Default Theme',
    'theme_title' => 'Xibo Digital Signage',
    'app_name' => 'Xibo',
    'theme_url' => 'http://xibo.org.uk',
    'cms_source_url' => 'https://github.com/xibosignage/xibo/',
    'cms_install_url' => 'http://xibo.org.uk/manual/en/install_windows_client.html',
    'cms_release_notes_url' => 'http://xibo.org.uk/manual/en/release_notes.html'
);

The only element of this file that needs to be modified is the theme_name. As you will see in the above config file, theme_name is set to ‘Xibo Default Theme’. This is what the Theme you are creating will be named when choosing it in the CMS settings. Rename this to something other than what it is but will help you to identify it.

Once you have created the config.php file, you will next need to create a folder named img. This folder must also be in the MyTheme folder you created under /custom. Within the img folder, place a png file named xibologo. Whatever the image is will be set as your logo on the login screen.

Also within your MyTheme folder, you can create a folder named css. You can create a custom CSS style sheet to dictate the other elements of the CMS that you wish to change. Make sure to name this style sheet override.css and to save it in the css folder.

When you have created your Theme, select the Settings option on your CMS. You will see under the Configuration tab an option named CMS Theme. Clicking on the field will reveal all of the valid Themes you can choose from. You should see the name of the Theme that you set in the config.php file in the list. Select the Theme and log out of your CMS. You will now see that the Theme has been applied. You may need to refresh the browser page if it does not show the Theme straight away.

All of this information and more is included in the Themes manual, which I have added a link to below.

https://xibo.org.uk/manual/en/advanced_theme.html

Many Thanks.