How can I override the default css file?

[petasis]

Hi all,

I am using {% block dashboards_style %}{% endblock dashboards_style %} to include the stylesheets, which finally results in:

<!-- dashboard defined css -->
<link href="[/static/dashboards/css/dashboards.css](view-source:https://digitisation.vast-project.eu/static/dashboards/css/dashboards.css)" media="all" rel="stylesheet">
<link href="[/static/dashboards/vendor/css/datatables.min.css](view-source:https://digitisation.vast-project.eu/static/dashboards/vendor/css/datatables.min.css)" media="all" rel="stylesheet">
<!-- end dashboard defined css -->

Is there a way to change the default css?

I want to use dashboards inside another template, and it alters also the template.
For example, it is shown like this:

https://digitisation.vast-project.eu/dashboards/vast_dashboards/activitiesdashboard/

(If you click the first sidebar menu, you will the original template rendering).

[findsah]

Hi Petassis ,
its Ali from wildfish ,To customize styles globally, you can create a custom CSS file and include it after the default dashboard CSS files in your base template. For example:
html

{% block dashboards_style %}
{{ super() }}

{% endblock %} You can also override the default CSS templates ,Some examples are included that you can build on. If including the CSS in a template is interfering, you may need to isolate the dashboard rendering somehow, such as rendering it in an iframe or separate view. Let me know if any of those suggestions help or if you have any other questions! Customizing styles can take some trial and error but those methods should allow you to override the default dashboard styling.

[findsah]

I checked your link and did inspect element on it , and it seems you are using an iframe . content.js:613 @import rules are not allowed here. See WICG/construct-stylesheets#119 (comment).

content.js:613 @import rules are not allowed here. See WICG/construct-stylesheets#119 (comment). Avoid using @import and instead directly include the CSS files using tags. This avoids the cross-origin issues that @import can cause in iframes.
Set the allow attribute on the iframe to "styles" to allow styling across origins:
html

<iframe allow="styles"></iframe> Use postMessage to communicate between the parent and iframe documents and programmatically add styles instead of @import. Consider rendering the dashboard content in a separate view rather than an iframe, if possible. This may avoid the cross-origin restrictions. As a workaround, you could load the CSS files asynchronously after the iframe loads to avoid the parsing issue: js

iframe.onload = () => {
// load CSS
}
Hope this helps provide some options to try! Let me know if any of those suggestions are unclear or if the issue persists.

[petasis]

Dear Ali,

Thank you for the replies. Regarding iframe, I am not sure I use one.
Also, I am not sure where is the "dashboard editor", Editing Dashboard and then "Editing CSS".

[findsah]

Dear Petatsis,
What I meant by by by my earlier message was overriding the css stylesheet as well as the js file for dashbaord . Your link is giving js import error mainly thats why it giving import error . you can override the js and css stylesheets to make it work. there might be an issue with rendering charts or plotly error

[petasis]

Dear Ali,

I am not sure I see an error while loading the page. Only the matomo.js, which is don downloaded as it comes from another domain.

I am still missing a way to override the default CSS stylesheet. Putting it before the template's CSS, did not work, as dashboards' CSS changes font sizes, which the template CSS does not.

My current plan is to a) modify the dashboards CSS to include a prefix (namespace) for everything, and b) use a div to put dashboards content in it, which has the prefix as its class (thus I can limit the stylesheet only in the dashboards contents).

But I don't know how I can override the default css in the static folder.

[petasis]

Modifying the css file to add a prefix, seems to be an adequate solution.

https://digitisation.vast-project.eu/dashboards/vast_dashboards/activitiesdashboard/

It event responds to the template theme changes (as I switch the classes light, dark in body).

The changes I have done to the css are here:

https://github.com/vast-project/activities-visualisation/blob/main/activities-backend/home/static/dashboards/css/dashboards.css

And the "customisations" are here:

https://github.com/vast-project/activities-visualisation/blob/main/activities-backend/home/static/dashboards/css/dashboards-admin_soft.css

I would propose to do the changes in css also in the dashboards package, to ease integration with existing applications.
Just wrap the content in a div, with the dashbaoards class.

[OmegaDroid]

I think I agree on this, we should prefix all the classes in the css with something sensible.

We should also move any rules where we are setting styles on elements to a separate css file too so that it can be included in the default template but easily excluded in the case where you are including dashboards in an existing site.