Apologies if this has been asked before, but I couldn’t get any info beyond a reference to having to rebuild the entire matabase.jar file.
I was wondering if it is possible to simply change the colour of the entire background (and text colour, if so) of an embedded dashboard and it’s widgets to match the supporting livery of the application embedding it. We don’t need to embed a logo , or remove Metabase’s own “Powered by” logo for that matter. Unfortunately neither the ‘light’ or ‘dark’ theme quite suit.
Is there a possiblity to do this in the licensed version?
Regards
Shrike 71
Nope, you need to rebuild.
It’s not as bad as it sounds as there’s a clever piece in there that handles the colours than creates the css. Certainly easier than going through all the css.
Hi Andrew,
Thanks for the info… i had noticed some LESS or SASS directives in the CSS. Is there a guide which would point me to the correct locations, as well as some repack and recompile info?
Regards,
Shrike71
Nothing straightforward that I’ve been able to find. The source code is arranged pretty logically, so really a case of working out what you need to change.
All I did was fiddle around with the background of the main application. I didn’t go much further as it didn’t matter to my customer.
Is there some sort of troubleshooting guide for doing a full build? Seeing a lot of
...
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.16, but postcss-color-function uses 5.2.18. Perhaps this is the source of the error below.
...
followed by masses of
...
WARNING in /home/ubuntu/projects/metabase/node_modules/css-loader?{"localIdentName":"[hash:base64:5]","url":false,"importLoaders":1}!/home/ubuntu/projects/metabase/node_modules/postcss-loader/lib!./components/Popover.css
(Emitted value instead of an instance of Error) postcss-custom-properties: /home/ubuntu/projects/metabase/frontend/src/metabase/components/Popover.css:65:3: variable '--color-border' is undefined and used without a fallback
@ ./components/Popover.css 4:14-148
@ ./components/Popover.jsx
@ ./components/TooltipPopover.jsx
@ ./components/Tooltip.jsx
@ ./dashboard/containers/AutomaticDashboardApp.jsx
@ ./routes.jsx
@ ./app-main.js
..
and masses of stack traces similar to this:
...
ERROR in /home/ubuntu/projects/metabase/node_modules/css-loader?{"localIdentName":"[hash:base64:5]","url":false,"importLoaders":1}!/home/ubuntu/projects/metabase/node_modules/postcss-loader/lib!./visualizations/visualizations/Text.css
Module build failed: Error: /home/ubuntu/projects/metabase/frontend/src/metabase/visualizations/visualizations/Text.css:119:3: Unable to parse color from string "var(--color-border)"
at /home/ubuntu/projects/metabase/frontend/src/metabase/visualizations/visualizations/Text.css:119:3
at new Color (/home/ubuntu/projects/metabase/node_modules/css-color-function/node_modules/color/index.js:34:10)
at toRGB (/home/ubuntu/projects/metabase/node_modules/css-color-function/lib/convert.js:39:15)
at Object.convert (/home/ubuntu/projects/metabase/node_modules/css-color-function/lib/convert.js:28:10)
at /home/ubuntu/projects/metabase/node_modules/postcss-color-function/index.js:38:26
at walk (/home/ubuntu/projects/metabase/node_modules/postcss-value-parser/lib/walk.js:7:22)
at ValueParser.walk (/home/ubuntu/projects/metabase/node_modules/postcss-value-parser/lib/index.js:18:5)
at transformColor (/home/ubuntu/projects/metabase/node_modules/postcss-color-function/index.js:33:25)
at transformColorValue (/home/ubuntu/projects/metabase/node_modules/postcss-color-function/index.js:20:16)
at Object.tryCatch [as try] (/home/ubuntu/projects/metabase/node_modules/postcss-message-helpers/index.js:53:12)
at transformDecl (/home/ubuntu/projects/metabase/node_modules/postcss-color-function/index.js:19:31)
at /home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:151:28
at /home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:109:26
at Rule.each (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:77:22)
at Rule.walk (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:108:21)
at /home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:111:32
at Root.each (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:77:22)
at Root.walk (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:108:21)
at Root.walkDecls (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/container.es6:149:25)
at /home/ubuntu/projects/metabase/node_modules/postcss-color-function/index.js:14:11
at LazyResult.run (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:331:20)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:258:32)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
at LazyResult.asyncTick (/home/ubuntu/projects/metabase/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:270:22)
@ ./visualizations/visualizations/Text.css 4:14-151
@ ./visualizations/visualizations/Text.jsx
@ ./visualizations/index.js
@ ./entities/questions.js
@ ./reference/metrics/MetricQuestionsContainer.jsx
@ ./routes.jsx
@ ./app-main.js
...
build server is ubuntu 18.04, installed tools are:
java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)
node v10.15.3
yarn 1.15.2
Leiningen 2.9.1 on Java 1.8.0_201 Java HotSpot(TM) 64-Bit Server VM
As a follow up, i’m seeing the exact same issue when building the docker image, even though the java/node/yarn/lein versions seem to be “frozen” at earlier versions
Shrike71
Update: building from the latest available tag, 0.32.0-RC clears up nearly all the issues. The log4j “metabase” appender crashes out during the build, but the build seems to complete ok. I’ll be taking a closer look
Sorry, I can’t be more helpful. I struggled to get my original environment setup so my documenation is very lacking. Since then, all the work I’ve done has been around integrating Metabase with C#, so probably not much use to you.
No worries Andrew,
Thanks for the help. Just putting what I’m seeing out there. Will be looking at the log4j issue sometime later today.