Comments (7)
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() }}
from django-dashboards.
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.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.
from django-dashboards.
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".
from django-dashboards.
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
from django-dashboards.
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.
from django-dashboards.
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:
And the "customisations" are here:
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.
from django-dashboards.
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.
from django-dashboards.
Related Issues (8)
- I am working on a Awesome-Python-HTMX, seeking your feedback HOT 2
- How do I register my dashboard class ? HOT 5
- Plotly is not loaded with version 0.1.5... HOT 3
- Add HTML in Card() heading? HOT 4
- Can I add an image with a link in a Card? HOT 1
- Form template is missing {{form.media}} HOT 1
- Strange issue on Tables: they appear empty on first load... HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from django-dashboards.