This post will guide you through on how to set up a customized login screen for a Synology Disk Station beyond the settings provided in the GUI. It will require you to understand how to connect to your Disk Station using terminal (here is the latest version of PuTTY). The following scripts will allow you to manipulate the CSS and the favicon of your device’s login screen.

NOTE: Be careful when messing with the internal file system of your device!!

 

Pre-requisite: Back up everything!

Everyone makes mistakes, and it is better to be safe than sorry.

Create a shared folder

First, we will create a directory for the new and backup files within your root directory:

1. Navigate to the Control Panel on your Synology DiskStation.
2. Under File Sharing choose Shared Folders.
3. Click on Create and Create again.
4. Name the new shared folder something along the lines of _DiskStation so that it shows up at the top of your shared folders list.
5. Check all checkboxes to hide the shared folder from My Network Places and users without permissions.
6. You do not have to encrypt the folder or enable a quota
7. Click Apply
8. Edit permissions so that only your admin account has Read/Write access to the shared folder.

Back up CSS folder

1. Create a folder called ‘backup’ in the _DiskStation directory
2. In terminal, navigate to /usr/syno/synoman/webman/resources/

   $ cd /usr/syno/synoman/webman/resources/

3. Run the command:

   $ sudo cp -r css /volume1/_DiskStation/backup/css_bak

   It may ask you for your administrator password again before running the command – enter it.

Back up mobile CSS files

1. In terminal, navigate to /usr/syno/synoman/mobile/

   $ cd /usr/syno/synoman/mobile/

2. Run the command:

   $ sudo cp -r ui /volume1/_DiskStation/backup/ui_bak

   It may ask you for your administrator password again before running the command – enter it.

Prepare your files and folder structure

Note: There is a possibility of a DSM update overwriting the style files we will be updating, so in order to prevent it, we are going to create folders under the /volume1/_DiskStation directory and copy the files from there.

Folder structure

The following will be the structure of folders we will make to store our files:

_DiskStation
   customstyle
      loginstyle.css
      mobilestyle.css
   customimage
      background.jpg
   copystyles.sh
   fixoverwrites.sh

File contents

For this part, you will have to use inspect-element to find which pieces you want to modify. Remember that the mobile stylesheet is very different from the desktop version, so use the responsive and device-specific viewports to test your mobile changes.
Any changes you make should be done directly in the _DiskStation folder you created, and later copied into the internal directory.

Bash files

To make things easier and type less, I’ve compiled all the commands needed into two files. You can simply run them with the command

$ sudo sh /volume1/_DiskStation/yourfilename.sh

The follwing should be ran only once, and after any DSM updates if the login page style gets overwritten:

echo "Removing unneccessary files..";
rm -r /usr/syno/synoman/webman/resources/css/desktop-default.css.gz
rm -r /usr/syno/synoman/webman/resources/css/desktop-business.css.gz
rm -r /usr/syno/synoman/webman/resources/css/desktop.css.gz
rm -r /usr/syno/synoman/webman/resources/css/desktop.css
rm -r /usr/syno/synoman/mobile/ui/style.css.gz

echo "Inserting import statement into stylesheets";
sed -i '1s/^/@import url("loginstyle.css");\n/' /usr/syno/synoman/webman/resources/css/desktop-default.css
sed -i '1s/^/@import url("loginstyle.css");\n/' /usr/syno/synoman/webman/resources/css/desktop-business.css
sed -i '1s/^/@import url("mobilestyle.css");\n/' /usr/syno/synoman/mobile/ui/style.css

echo "Success!";

The below should be ran whenever you make a change to the stylesheet to copy the files over.

echo "Copying stylesheets...";
cp -f /volume1/_DiskStation/customstyle/loginstyle.css /usr/syno/synoman/webman/resources/css
cp -f /volume1/_DiskStation/mobilestyle/mobilestyle.css /usr/syno/synoman/mobile/ui/

echo "Copying images...";
cp -Rf /volume1/_DiskStation/customimage /usr/syno/synoman/webman/resources/images
cp -Rf /volume1/_DiskStation/customimage /usr/syno/synoman/mobile/ui/images

echo "Updating permissions...";
find /usr/syno/synoman/webman/resources -type d -exec chmod 755 {} \;
find /usr/syno/synoman/webman/resources -type f -exec chmod 755 {} \;

find /usr/syno/synoman/mobile/ui -type d -exec chmod 755 {} \;
find /usr/syno/synoman/mobile/ui -type f -exec chmod 755 {} \;

echo "Success!";

CTRL+SHIFT+R and your changes should appear on your login screen!

Questions, comments, concerns?