We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Looking for best practice to modify a theme from marketplace

June 25, 2023 at 5:45 pm #10175

[anonymous]

I was wondering how to modify a theme from marketplace, for example a template file, without loosing the possibility of updating the theme.

For a client I used the persona_free theme with some modifications. I took the persona_free v.1.2.1.0 theme, crated a new theme from it and applied my modifications to it. That way I lost the possibility to easily update the theme and get i.e. latest bug-fixes (v.1.2.3.0). The only way I can apply changes is do it manually … or create a diff from persona_free v.1.2.1.0 with v.1.2.3.0 and apply that patch to my modified theme.

I am new to publii and might have overlooked something. Is there something like sub-theming, which allows theme customization without losing updateability?

June 25, 2023 at 6:30 pm #10176

Bob

Just override the files you want: https://getpublii.com/dev/theme-overrides/

June 26, 2023 at 2:02 pm #10177

[anonymous]

Thank you Bob, for pointing to the tutorial. Maybe it’s worth to get it’s own entry in the dev documentation menu.

The tutorial was very helpful, I was able to change my current implementation to use theme overrides. The only thing I did not expect is, that the the build process modifies the file input/themes/persona_free/assets/css/style.css. It’s not a big deal, I just realized it, while I put the complete website project under git version control.

June 26, 2023 at 2:17 pm #10178

[anonymous]

[anonymous] wrote:

The only thing I did not expect is, that the the build process modifies the file input/themes/persona_free/assets/css/style.css.

Take a look at this post.

You should not be modifying style.css. Essentially,

The theme CSS is a sum of five CSS sources:
`theme-variables.js output + main.css + GDPR popup CSS + visual-overrides.js output + custom CSS`

June 26, 2023 at 2:27 pm #10179

[anonymous]

Thank you shaun2k. I did not modify the style.css, but the input/themes/persona_free-override/assets/css/main.css, which is a modified copy of input/themes/persona_free/assets/css/main.css.

Is that fine or should I better add my changes to “custom CSS” or somewhere different?

June 26, 2023 at 2:50 pm #10180

[anonymous]

[anonymous] wrote:

Is that fine or should I better add my changes to “custom CSS”?

If the modifications are theme-specific, I would override main.css rather than custom css.
Whatever you put in custom css remains even when you decide to switch to a different theme for the website.
The custom css may or may not be applicable in that new theme.

June 26, 2023 at 3:21 pm #10181

[anonymous]

For now I decided to put changes into custom-css.css as overriding main.css may makes it difficult to get css updates of original theme, although custom-css.css is global.

July 18, 2023 at 1:57 am #10315

[anonymous]

[anonymous] wrote:

For now I decided to put changes into custom-css.css as overriding main.css may makes it difficult to get css updates of original theme, although custom-css.css is global.

This is a good point, however, there are cases when Custom CSS falls short for me, or when I need a proper code editor.

To maintain a “sane”, upgrade-ready modified main.css file, I make sure to add comments every time I make an edit or addition. Then, when I update a theme, I run a git diff with VS Code of the modified CSS against the update theme’s CSS to quickly merge or ignore new changes.