Changing theme CSS

[Scott Whittaker]

Description

I'm trying to set up a local installation of Mapstore and make some tweaks to the theme CSS.

I have followed the Styling and Theming guide at https://docs.mapstore.geosolutionsgroup.com/en/latest/developer-guide/customize-theme and none of my changes are showing up.

I have made a new theme folder in the html root and copied the dark theme as a starter. So:

themes/custom/theme.less:

@import '../../web/client/themes/default/theme.less'; @import 'variables.less';

themes/custom/variables.less:
(clone of web/client/themes/dark/variables.less)

As per the docs I have also modified:
build/prod-webpack.config.js
build/webpack.config.js
project/standard/templates/prod-webpack.config.js
project/standard/templates/webpack.config.js

each with the following change:

- themeEntries,
+ {
+ "themes/default": path.join(__dirname, "themes", "custom", "theme.less")
+ },

I also modified web/client/product/appConfig.js:

+ theme: {
+ selectedTheme: {
+ id: custom
+ } }

and finally web/client/themes/index.js:

module.exports = [{
    id: "default"
}, {
    id: "dark"
+}, {
+ id: "custom"
}];

What am I missing?

[Stefano Bovio]

Dear Scott,

I think the problem here is between the themeEntries and the selectedTheme id,

the name of the generated css is the one assigned in the themeEntries

"theme/{name of my generated css}": path.join(__dirname, "themes", "{name of my style folder}", "theme.less")

in your example the themeEntries has the "default" name accessing to the "custom" folder so the final css id will be "default"

then you are selecting the "custom" theme in the appConfig.js that does not exist.

You have two options: or try to rename the entry to "themes/custom":

 "themes/custom": path.join(__dirname, "themes", "custom", "theme.less")

or you can keep the "theme/default" and remove the selectTheme id in the appConfig.js.

A side note, I noticed that you are using core paths to apply customizations so it seems you are using a fork of MapStore,

in general we suggest to use a MapStore downstream project approach to manage customization,

here additional documentation on this topic https://training.mapstore.geosolutionsgroup.com/project/index.html

Hope this helps,

Stefano

[Scott Whittaker]

Hi Stephano,

I followed the guide at https://training.mapstore.geosolutionsgroup.com/project/index.html and finally managed to get a site to build and run.

However nothing I have tried has made any change to the theme CSS.

This is very frustrating and I have now spent two days trying to unsucsessfully make small CSS changes.

I even found this guide: https://training.mapstore.geosolutionsgroup.com/project/theme/index.html but maybe it's out of date because it doesn't work either.

Is there an example project I can look at? 

How difficult would it be to give me a step-by-step guide to make the existing dark theme the default one? Or make a new theme that is simply a clone of the dark theme?

I'm at the point where my only solution is to directly modify /dist/themes/default.css and never update the site again :/

Any help is greatly appreciated!

Thanks,

Scott

[Tobia Di Pisa]

Hi Scott,

The message is here. Anyway, for next time, I think that's something for the dev mailing list :-) we will try to provide you some assistance as soon as possible.

Best Regards,

     Tobia Di Pisa

Il giorno mer 26 giu 2024 alle ore 10:30 Scott Whittaker <scott.w...@groundtruth.co.nz> ha scritto:

Maybe it's weirdness with Google Groups but I just posted a reply that seems to have vanished?

On Monday, June 24, 2024 at 9:25:51 PM UTC+12 Stefano Bovio wrote:

--
You received this message because you are subscribed to the Google Groups "mapstore-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mapstore-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mapstore-users/80a6aac4-ae07-4db5-8ad5-ae9c85199097n%40googlegroups.com.

--

==
GeoServer Professional Services from the experts!

Visit http://bit.ly/gs-services-us for more information.
==
Dott. Ing. Tobia Di Pisa
Technical Lead / Project Manager

GeoSolutions Group
phone: +39 0584 962313

mobile: +39 340 1781783
fax:      +39 0584 1660272

https://www.geosolutionsgroup.com/
http://twitter.com/geosolutions_it
-------------------------------------------------------

Con riferimento alla normativa sul trattamento dei dati personali (Reg. UE 2016/679 - Regolamento generale sulla protezione dei dati “GDPR”), si precisa che ogni circostanza inerente alla presente email (il suo contenuto, gli eventuali allegati, etc.) è un dato la cui conoscenza è riservata al/i solo/i destinatario/i indicati dallo scrivente. Se il messaggio Le è giunto per errore, è tenuta/o a cancellarlo, ogni altra operazione è illecita. Le sarei comunque grato se potesse darmene notizia.

This email is intended only for the person or entity to which it is addressed and may contain information that is privileged, confidential or otherwise protected from disclosure. We remind that - as provided by European Regulation 2016/679 “GDPR” - copying, dissemination or use of this e-mail or the information herein by anyone other than the intended recipient is prohibited. If you have received this email by mistake, please notify us immediately by telephone or e-mail.

[Scott Whittaker]

Thanks for your reply Stefano, sorry I posted in the wrong group!

I got it working but the documentation is wrong. 

I first got it working by changing the `themeEntries` function in `/build/themes.js`, replacing the globalPath with the path to the local themes:

// const globPath = path.join(__dirname, "..", "web", "client", "themes", "*");

const globPath = path.join(__dirname, "..", "..", "themes", "*");

From there I figured out that the correct way to reference the themes in `webpack.config.js`. The docs say to do this:

- themeEntries, + { + "themes/default": path.join(__dirname, "themes", "default", "theme.less") + },

which does not work. 

The themeEntries line shouldn't be removed. If you do the curly braces will break the code syntax. And if you leave out the curly braces the syntax will be correct but no theme files will be compiled.

The correct syntax should look like this:

themeEntries: {

"themes/custom": path.join(__dirname, "themes", "custom", "theme.less")

},

You can specify multiple custom themes here separated by commas. And you can also include the default themeEntries like this:

themeEntries: {

"themes/custom": path.join(__dirname, "themes", "custom", "theme.less"),

"themes/xxx": path.join(__dirname, "themes", "xxx", "theme.less"),

...themeEntries

},

Please update the docs, hopefully this will help save someone several hours (or days in my case)!

Thanks,

Scott