# Customizing the Web Interface **URL:** \ **Category:** Anthias\ **Created:** [July 31, 2023, 12:30pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161 "2023-07-31T12:30:32Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [July 31, 2023, 12:30pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/1 "2023-07-31T12:30:32Z")
Using Screenly-OSE, I was able to create an extra Menu item that displays a screenshot of what is currently ‘showing’. I’m not proficient at all using docker: After installing the latest Screenly-OSE (now Antheas) is see to that Antheas is now in docker containers. How do I go about customizing the Web portal ? Any help would be greatly appreciated. ---
**Author:** ![PasserBy](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@PasserBy](https://forums.screenly.io/u/PasserBy)\ **Post date:** [August 22, 2023, 8:34am UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/2 "2023-08-22T08:34:37Z")
Hello, interesting question indeed ! Unfortunately, I don’t know ; but I would be very much interested to learn how you managed to do it on Screenly-OSE ??? 👍 ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 24, 2023, 6:14pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/3 "2023-08-24T18:14:33Z")
![image](https://canada1.discourse-cdn.com/flex029/uploads/screenly/original/1X/4c15187a993fcbdf398c2edcfcbc1fc217cf747a.jpeg) ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 24, 2023, 6:15pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/4 "2023-08-24T18:15:46Z")
Part 1 of 5 Hi, I’ll try to keep it short, but still give enough info to give you an idea. Basically, a snapshot is made when you click the ‘Now Showing’ menu item, and the page is shown. Still TODO: Get Google Chrome to refresh itself. Sometimes you have to press F5+Reload to get the latest snapshot I installed Screenly-OSE/Anthias on Raspbian Lite. I tweaked the CSS files a bit to make things look pretty (background images, colors, sizing, drop shadows etc.) I modified the server.py so that it can serve the ‘Now Showing’ page up. I modified the top menu and added the item ‘Now Showing’ next to Home. I installed raspi2png on the pi. (Google search it - it’s in Git hub ) I wrote a script (rc.snap) that, when executed creates a snapshot of the display-memory (screenshot) and save it in a specific location with a fixed filename. The binary in my case is in /usr/bin and the resulting image file in /usr/src/app/static/img/active\_asset.png #---------------- rc.snap ------------- /usr/bin/raspi2png -p home/screenly/static/img/active\_asset.png #---------------- End ------------------ ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 24, 2023, 6:16pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/5 "2023-08-24T18:16:22Z")
Part 2 of 5 Added the following below /system-info section in server.py # ---- server.py -------------- @app.route(‘/onscreen’) @authorized def onscreen(): os.system(‘/usr/src/app/bin/rc.snap’) return template( ‘onscreen.html’, mac\_address=get\_node\_mac\_address(), ) #----------------- End ------------- ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 24, 2023, 6:17pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/6 "2023-08-24T18:17:03Z")
Part 3 of 5 Create onscreen.html in the screenly/templates folder to display the snapshot image. # ----- onscreen.html -------------- {% extends “base.html” %} {% block content %} ##### **Now Showing** ```
Now Showing
``` {% endblock %} # ----------- End ---------------- ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 24, 2023, 6:18pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/7 "2023-08-24T18:18:51Z")
Part 4 of 5 Modify the header.html in templates folder to have the menu item ‘Now Showing’ # ---- header.html ---- … **Home** [Now Showing](https://forums.screenly.io/onscreen) ... # ------ End ---- ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 24, 2023, 6:19pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/8 "2023-08-24T18:19:41Z")
Part 5 of 5 This forum formats stuff wack. Sorry … Hope it helps. ---
**Author:** ![PasserBy](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@PasserBy](https://forums.screenly.io/u/PasserBy)\ **Post date:** [August 25, 2023, 8:01am UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/9 "2023-08-25T08:01:47Z")
WOW ! That’s really a work of Art ! and a beautiful one ! I’m impressed. 👍 Thank you very much for sharing this. This makes me all the more sorry not to have the answer to your question … But maybe I’ve hot a hint to share on the “get Chrome to refresh itself” aspect : why not insert a javascript bit of code into the page using the “reload” JavaScript function, with a little time delay (in milliseconds, I believe) ? Just like there : [https://stackoverflow.com/questions/3715047/how-to-reload-a-page-using-javascript](https://stackoverflow.com/questions/3715047/how-to-reload-a-page-using-javascript) Thanks again and see you later ! ---
**Author:** ![Karl](https://yyz1.discourse-cdn.com/flex029/user_avatar/forums.screenly.io/karl/32/403_2.png) [@Karl](https://forums.screenly.io/u/Karl)\ **Post date:** [August 25, 2023, 9:02am UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/10 "2023-08-25T09:02:38Z")
Thanks cor the hint. I will definately have a look. BTW: I managed to figure it out. I’m no docker expert, far from it, ☹ I figured out how to customise Anthias web server by going ‘into’ the docker container. 1st do docker -ps to get list of running docker containers. Then docker exec -it /bin/bash This lands you inside the docker spesified container filesystem. Now you can install/add/remove binaries, edit CSS files etc. The trick is getting stuff (background images etc.) from the rasPI fs to the docker fs. Luckely they mounted /home/screenly/static in the container under /data … Was a mission but is got it working. The down-side is that you cannot re-download the containers because it will overwrite all your work… ---
**Author:** ![PasserBy](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@PasserBy](https://forums.screenly.io/u/PasserBy)\ **Post date:** [August 25, 2023, 4:03pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/11 "2023-08-25T16:03:35Z")
You’re welcome ! 😊 And thank YOU for the additional information : you even managed to find the answer to your own question and you’re generous enough to share it with us all here ! You really are a Screenly AND Anthias Wizard. 🪄 Thanks again for the magic and have a nice week-end ! ---
**Author:** ![tyronemc2](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@tyronemc2](https://forums.screenly.io/u/tyronemc2)\ **Post date:** [October 31, 2024, 1:34pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/12 "2024-10-31T13:34:44Z")
Hi Karl, any chance you can share the steps, there seem to be a lot of people wanting to make styling changes and no real reliable way of doing it. Thanks, ---
**Author:** ![nicomiguelino](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@nicomiguelino](https://forums.screenly.io/u/nicomiguelino)\ **Post date:** [October 31, 2024, 2:14pm UTC](https://forums.screenly.io/t/customizing-the-web-interface/1161/13 "2024-10-31T14:14:03Z")
Thanks, @Karl. It looks like most people wanted a way to modify the web interface with ease. I’ll let you know when I’ve come up with a way to customize the web interface without needing to do too much work. That’s great work. Feel free to create a pull request for your changes (especially the now showing section).