How to change theme

[effemmeffe]

I can't find documentation about how to change theme and how to create a new one, can please point me in the right direction?

[virtualtam]

Hi @effemmeffe!

Theme switching was introduced in #502 & #705 and allows selecting the active theme through the administration UI. The first release to feature will be v0.9.0, so you need to get Shaarli through Git to use it :)

There is an embryo of documentation at https://github.com/shaarli/Shaarli/wiki/Theming , I recommend you take a look at existing themes to see how they work

[effemmeffe]

I saw that part of the documentation, but I think it's a little outdated. It says that to change theme I should put a user.css in the inc folder.
But I downloaded hte serious theme an put it in the inc folder but nothign changed.
Then I dug a little and found the Default folder in the tpl folder.
So I tried and made a new folder in tpl named Serious and copied all the theme files in it.
Then I changed the theme from the administration UI and choose Serious, saved and... boom, destination unreachable.
I had to clone the default folder and rename it to Serious to be able to access my shaarli installation again, then I switched back to the default theme and removed the Serious folder.
Did I do something wrong?

[virtualtam]

Nope, the confusion is on our side (docs); we (used to?) have a distinction between:

• themes: custom CSS added as data/user.css (previously inc/user.css, see Move user.css to data folder #753 )
• templates: custom RainTPL templates, CSS, Javascript, etc.

In this light, serious is a theme that you can install by copying its user.css to your data folder.

Modern / actually maintained visual template customizations are also referred as themes, we should define a clearer naming to avoid this kind of confusion, ping @nodiscc @ArthurHoaro

[effemmeffe]

I tried to put the serious theme's files in the data directory, but it doesn't work. I still have the default theme.

[ArthurHoaro]

Hi @effemmeffe!

You may have made a mistake at some point, because I just tried, and it's working fine.

# download
wget https://github.com/shaarli/Shaarli/releases/download/v0.8.3/shaarli-v0.8.3-full.tar.gz
# extract
tar xfz shaarli-v0.8.3-full.tar.gz
# go to inc/
cd Shaarli/inc
# download the theme
wget https://raw.githubusercontent.com/mrjovanovic/serious-theme-shaarli/master/user.css

@virtualtam You're right. CSS themes are kinda outdated anyway. I suppose we can refer to them as custom CSS.

[virtualtam]

Let's go for "custom CSS" / themes, I'll update the docs accordingly ;-)

[virtualtam]

https://github.com/shaarli/Shaarli/wiki/Theming updated!

[ArthurHoaro]

Nice! I've made a minor change regarding the CSS path.

@effemmeffe were we able to help you with your issue?

[effemmeffe]

@ArthurHoaro there is something wrong somewhere: I removed the user.css from my inc/ folder, pasted your commands and still have the original look.
I also tried to put the user.css file in the data/ directory, even if I have shaarli 0.8.2 and still no luck.

I managed to change the look by installing a new template, but I can't see the custom CSS.

[effemmeffe]

Now I downloaded the serious.css from the new theme page in the wiki and it worked.
Don't know what I did before.
I'm glad if my problem helped to fix the theme/template confusion.
Thanks.

[virtualtam]

Glad to know you got it working, have fun using Shaarli :)

[poVoq]

Is there some guide on how to upgrade old user.css/themes to work with the latest release 0.93?

[ArthurHoaro]

No, there is not. For themes, you would have to keep up with the changelog and the commit log of the tpl folder, or the one of an up to date 3rd party theme.
For custom CSS, I think most of them apply to the previous Shaarli's theme and aren't compatible with the new one at all.