Hello everyone,
I’ve just installed Anthias on Raspberry Pi 4b and I’d like to make some changes to the web interface, in particular to the page style and language.
I don’t use bash regularly and that’s probably why I can’t make these changes.
I understand from reading the various topics on the subject that I need to use dockers to access the css and html files.
So I listed the different dockers (by doing docker ps) and after that I concluded that I had to go through the nginx docker for my changes to be effective.
Once there (sudo docker exec -it 6941e49a0cbc /bin/bash), however, I don’t have the rights to write to the css files. I’ve tried the basics such as sudo, chmod, mount but nothing works.
Do you have any idea what the problem is and if I’m on the right track?
Thanks a lot.
Hi, It seems like there are a number of us in the same boat here, we all want to make some styling changes and there does not seem to be any realiable / correct way to do it… ?? Anyone out there that might have managed to get it right please help the rest of us.
Hi,
I think, i have the answer now.
So, like i said, i knew that it were necessary to make the changes in one of the dockers available.
I found in the Anthias Github a documentation that explain the dockers and their purposes. (Anthias/docs/developer-documentation.md at master · Screenly/Anthias · GitHub)
After that i chose to go in the docker “anthias server”. So i listed all of the docker (with docker ps) and go to this docker (sudo docker exec -it 9e812836cba8 /bin/bash).
I tried to make some HTML and CSS changes and it worked !
For HTML changes :
- go to Templates
For CSS changes :
- go to static/css
(the css code is way too long so i suggest that you make the changes in your browser to see which line is useful to change or not)
Im currently trying to insert logo or image to the HTML but im having a hard time with it so if i found i will write a response here.
Hope that i have help you !
Have a good one !
@LeoBriquet, thank you for sharing your solution. It’s a best practice, however, to modify the .scss files and have the .css files be generated instead.
I’m looking forward to integrate transpiling SCSS to CSS into the container in the future.
Hello,
You mean that modify the .scss files is a better way to do the changes ? Because right now my css and my scss are in conflict ? Will it cause trouble ?
I explored the files, saw the variables and tried to make some changes but maybe i wasn’t in the right docker at the time.
Thanks for you response.
@LeoBriquet, yes changes should be made to the SCSS files. The CSS files will be automatically generated for you. (You can refer to this documentation for details.)
I’m not sure if we had the same thing in mind when you say that the CSS and SCSS files are in conflict. I hope you can elaborate on this one. In the meantime, I’ll check if the SCSS and CSS files are in sync with each other. If not, I’ll provide a patch/fix.
Let me know if you need further help. Thanks.
I mean right now my scss says that my background color is purple but with my changes the css has now the order to make the background color white.
So i am thinking that maybe it will make my anthias slowly or something like that. However, i will change the .scss files to make sure everything is ok even if it’s working right now.
Thanks.
If we make these changes inside the docker container, and then run an update -will the changes be overwritten ?
Oh i don’t know about that…
Maybe @nicomiguelino knows more ?
@tyronemc2, updating your Anthias instance will override the changes that you’ve made, as the install/upgrade script will pull the latest images from the Docker Hub repository.
If you want to propose changes to the web interface, it’s recommended to start a development server on your computer (not on your Pi or x86 device that plays content). More details on how to do it can be found here.
- Once you’ve started your development environment, you can open a new terminal session and start the SCSS to CSS compiler (in watch mode).
- Make changes to the code.
- Create a pull request to propose changes.
- Once the changes are merged and deployed, you can run the install/upgrade script and see the changes in UI take effect.
If you just prefer to have the customized web UI on your players/devices, that would be fine too. You can just do a git pull and then re-build, but this doesn’t work 100% of the time, especially when we deploy changes to install scripts where the boot config should be changed, etc.
- We can support appearance customization (themes, etc.) via the web UI in the future, but feel free to submit a pull request.