-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom styling #24
Comments
All the styling is baked into the react app so currently the only way would be to modify and rebuild the react app, the process would be. In general I'm not opposed to making this more customizable. It's just a question of how much and how. |
i thought it would be like that
Good question How much?I would propose to be able to
How ?Probably all the variables could be defined over
|
I was able to change the styling with the following basic steps:
but still it would be nice if the databrowser would use css classes or ids for the different parts (e.g. the saved views on the home page) this would make style adjustments less hacky, now I had to do something like: div.Index > div {
background: white;
} |
You will want to pin the specific version of data browser. I believe you will have to update it every time the version shifts. |
nts: it should be possible to use django templating to include another css file, but any form of compilation for that file will be a host developer problem |
there is no compilation needed if the
i guess that would support / ease the setup for a custom css does the |
the source for it is here https://github.com/tolomea/django-data-browser/blob/master/frontend/public/index.html |
ok thank you for the detailed explanation would django template "blocks" survive this procedure? 🤔 if yes they might be the solution to add custom css/head data or change the code around the or are there better solutions for that? 🤔 |
but what if i want to check if i like the style before the build? i mean, how can i start the development server from this react app to watch it in real time? can you help us? |
Instructions for running the JS dev server are available here https://github.com/tolomea/django-data-browser/blob/master/CONTRIBUTING.rst#development |
@bb4L I added an extrahead block and tested to make sure I could use it to inject some CSS, instructions are in the CSS, I will spin a 3.1.4 release with this in, I also tidied up some of the CSS class name stuff, so there's more class names in the code and they are more consistent in naming. Let me know how that goes. |
Thank you for the update. I will test it and let you know how it goes. As far as I remember I also would have needed a block around the Then I would have been able to embed it into the existing page (e.g. with the same navbar/ footer) |
Ah, I hadn't thought of it like that, changes the way you look at it a bit.
…On Tue, Dec 22, 2020 at 10:09 AM L P ***@***.***> wrote:
@tolomea <https://github.com/tolomea>
Thank you for the update.
I will test it and let you know how it goes.
As far as I remember I also would have needed a block around the root div.
Then I would have been able to embed it into the existing page (e.g. with
the same navbar/ footer)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAGERUAB3MDKLVSNUFLG7PDSWBV45ANCNFSM4USDQAJQ>
.
|
Sorry for that. I probably wasn't precise enough.
|
There is lot of stuff that could potentially be done here, so I'd like to start by putting some limits on the scope. 1: Right off I'm not interested in trying to support anything resembling splitting up / rearranging the core app. Particularly the triplet of index, query and saved query pages. 2: I am partial to supporting that core app being nested within other stuff. 3: As for customizing the style of the app itself, I'd like it to be possible, but there are limits on how much effort I want to expend on accommodating it. An example might help, I use particular fonts and font sizes and I will write the CSS assuming that those are the fonts in use. It should be possible for you to replace the fonts, but any collateral styling damage from that is your problem. Maybe I'm overthinking this, I'm not a frontend dev, but my current thought it is roughly I want to support both: I think that will require the following changes: How does that sound to you? edit: don't need font-head.html, it can be another block in index.html |
@tolomea sorry for the late reply
I completely understand, this shouldn't be needed
happy to hear that
I can agree / understand on that point as well
Yes that all makes sense, in terms of the body it might be tricky since one would want to override / add classes to the body tag eg: ....
<body class="foo">
<div class="bar">
<div id="root">
</div>
</div>
....
</body>
I guess this is more a "nice to have" as long as a user is able to completely override the styling |
4: I believe for that usecase you can override the base template with another base that extends the original and implements the body block and then have the ddb-app block inside your body block. This essentially lets you replace the whole body but keep everything else. 3: Because of the way my CSS is built into the React chunks I don't think you are going to be able to not have my CSS loaded and loaded late, so getting round it is going to require being more specific / important with selectors. I'm ok with that inside the data browser components, but it seems a lil harsh for the global changes I make. |
that's correct but the i'm not sure if a can access those unless they are specified inside a seperate html? 🤔
Yes that's fine, it doesn't really matters as long as i can override/add a stylesheet after it 😇 |
Yes, they are immediately before and after what is currently the "root" div (will be the ddb-app div) I intend for that div and the script tags to end up in the ddb-app block which will get defined by index.html, so as long as you keep the placeholder block when you override base.html I think it should be good, but I will verify that when I make the changes |
alright that sounds like it should work :-) thank you very much |
Is there a way to customize the colors of the data browser?
ideally I would also love to customize the "logo" part
The text was updated successfully, but these errors were encountered: