You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "shexiaobin (via GitHub)" <gi...@apache.org> on 2025/03/25 18:04:57 UTC
[I] The problem of CSS template not taking effect [superset]
shexiaobin opened a new issue, #32847:
URL: https://github.com/apache/superset/issues/32847
### Bug description
When I was using CSS templates, I couldn't figure out why the styles I modified wouldn't take effect no matter how I did it. My requirement was to change the background color to black. Here is my CSS code:
.ant-tabs-content-holder{
background: transparent !important;
}
.ant-tabs-content-holder * {
color: #fff !important;
}
.ant-tabs-tab-active *{
font-weight: bold !important;
}
.dashboard-content{
background-image: linear-gradient(-45deg, #111, #222);
font-family: 'Inter', sans-serif;
}
.dashboard-component{
background-image: linear-gradient(-45deg, #2f2f2f, #202020);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,.7) !important;
}
.dashboard-component-tabs{
background: transparent;
box-shadow: none !important;
}
### Screenshots/recordings
<img width="784" alt="Image" src="https://github.com/user-attachments/assets/6e6d093d-4468-4c01-850a-175fb85eb23e" />
### Superset version
master / latest-dev
### Python version
3.9
### Node version
16
### Browser
Chrome
### Additional context
_No response_
### Checklist
- [ ] I have searched Superset docs and Slack and didn't find a solution to my problem.
- [ ] I have searched the GitHub issue tracker and didn't find a similar bug report.
- [ ] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] The problem of CSS template not taking effect [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas closed issue #32847: The problem of CSS template not taking effect
URL: https://github.com/apache/superset/issues/32847
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] The problem of CSS template not taking effect [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
dosubot[bot] commented on issue #32847:
URL: https://github.com/apache/superset/issues/32847#issuecomment-2752127806
<!-- Greeting -->
Hey @shexiaobin! 👋 I'm here to help you with any bugs, questions, or contributions you have for the project. Let's tackle this CSS issue together! [Dosu](https://dosu.dev)
<!-- Answer -->
To address the issue of your CSS styles not taking effect in Superset, consider the following points:
1. **CSS Specificity and Order**: Ensure that your custom CSS is loaded after any default or global styles that might be overriding it. In Superset, the order of CSS file loading can affect which styles take precedence. Custom styles should be included in the `entry` CSS bundle or after the theme CSS bundle to ensure they are applied correctly <sup>[[1]](https://github.com/apache/superset/blob/master/superset/templates/superset/basic.html)</sup>.
2. **Existing CSS Rules**: Superset has existing CSS rules that might override your custom styles. The `superset-frontend/src/GlobalStyles.tsx` file defines global styles that could affect your custom styles, especially if they target the same elements <sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/GlobalStyles.tsx)</sup>.
3. **Use of `!important`**: While you are using `!important` in your styles, ensure that it is necessary and correctly applied. Superset also uses `!important` in some of its styles, which might conflict with your custom styles <sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/GlobalStyles.tsx)</sup>.
4. **Dynamic Style Modifications**: Superset uses JavaScript to dynamically modify styles at runtime, such as changing the `rel` attribute of `<link>` elements from `preload` to `stylesheet`. Ensure that your styles are not being affected by such scripts <sup>[[1]](https://github.com/apache/superset/blob/master/superset/templates/superset/basic.html)</sup>.
5. **Specific Class Styles**: The `.ant-tabs-content-holder` and `.dashboard-component-tabs` classes have specific styles defined in Superset's codebase, which might be affecting your custom styles. For instance, `.ant-tabs-content-holder` is styled with `overflow: visible` or `overflow: auto` based on certain conditions <sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx)</sup><sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/src/components/Tabs/Tabs.tsx)</sup>.
By considering these factors, you can better understand why your custom CSS might not be taking effect and make the necessary adjustments.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
---
<sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/a42d47d0-7160-4c92-9b19-ea3b4b84f3df?feedback_type=other)</sup>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] The problem of CSS template not taking effect [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas commented on issue #32847:
URL: https://github.com/apache/superset/issues/32847#issuecomment-2768025353
There are a lot of little yellow triangles pointing to either errors or warnings, if any of them help, though the CSS syntax looks OK at a glance. Probably some issues about spaces after the selector and before the opening brackets, stuff like that.
I have a couple blog posts on common tips and tricks for this stuff, but if you let us know a bit more about what you're trying to accomplish, maybe I/we can help.
https://preset.io/blog/customizing-superset-dashboards-with-css/
https://preset.io/blog/customizing-apache-superset-dashboards-with-css-additional-tips-and-tricks/
Closing this for now, since I don't think it's a _bug_ but we can move it to a Discussion if you want further help, chat on Slack, or re-open this if I'm missing something.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org