In Jupyter Lab, I just want to change the color of bold texts in the official light theme, just as a way of making simple highlights to avoid using HTML.
I've searched for several solutions but no one works for me.
The basic idea is to edit the index.css file, adding a code snippet like strong {color: #xxxxxx;}.
But the problem is there are more than one file named index.css exists, like C:\ProgramData\Miniconda3\Lib\site-packages\jupyterlab\themes\#jupyterlab\theme-light-extension\index.css, C:\ProgramData\Miniconda3\share\jupyter\lab\staging\node_modules\#jupyterlab\theme-light-extension\index.css, C:\ProgramData\Miniconda3\share\jupyter\lab\themes\#jupyterlab\theme-light-extension\index.css.
I changed every one index.css mentioned above and failed in the end, so does anyone know what is the solution for now? Since I have little experience in CSS, so if I made some stupid mistakes, please let me know, thanks.
I made some changes recently on my themes, so, according to my experience:
The file you must to modify is the one inside the "share" folder: share\jupyter\lab\themes\#jupyterlab\theme-light-extension\index.css
The only bold texts I found on my code mirror are marked as "Keywords" (i.e. import, for, in, try, def, etc)
If you want to change these bold text, you must to modify inside your index.css file the --jp-mirror-editor-keyword-color variable.
Related
I’m new to Bootstrap. Using version 3.
I’m using a "custom.css" file to customize the design of my website.
The problem I’m seeing is that none of my customizations work unless I put "html" at the beginning of the relevant line.
When I put html at the beginning of a line, the change does take effect, so I know the file is working.
Can anyone help with this? I’ve used custom css files before, and I’ve never seen this before.
you have to import CSS file to correct location at HTML file also please share your code for find solution quickly
I would like to create a website to go hand in hand with my discord bot. I thought it would look nice, if they similar styling, to keep the whole thing more as a unit(I would also not have to worry about button-, checkbox-, etc. styles). As an example, I would like my buttons to have the typical discord-appearance of the blue button with white text and rounded edges(I assume you use dark mode). I of course did some research myself, but couldnt find a library or a standalone css-file that includes all the styles. So my question to you is: do you know a library or link that includes the css-stylesheet? Could I copy the stylesheet from the official discord-websites source-code alternatively?
I am thankful for every suggestion! :)
You can use this chrome extension to download all the source files for a webpage:
https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb?hl=en
The files would be downloaded into a .zip file. You can then extract it's contents and get the CSS file
I've mostly done back-end work in the past, but I'm taking it upon myself to learn how to use Vue, and in addition to being partially color blind, design is not my strong suit. As such, I'm using a template so that I can at least have a base to start learning from.
Weirdly, however, I've noticed many times the way the CSS is loaded on my copy differs from the template, and I cannot seem to figure out why. Simply put, it seems like the SASS I've copied to a new project does not override in the same way.
My Version:
Template project, directly from GitHub:
I can get around this somewhat by finding the CSS in question and adding a "!important" to the end, though this feels like a rather hacky solution to the problem, and I'd be better off finding the real culprit, though perhaps that is the best solution.
The SASS has been directly copied from the template, so I know that nothing there is amiss. My version and the template also use the Vue-CLI that comes with Webpack, so I'm not sure if it can be some variation there, with Webpack choosing that one file cascades the other? I have all the same dependencies in my package.json file, so I know I'm not missing some crucial dependency.
I've labeled the Imgur pictures in the link I provided, but for clarification, I'd like the background to be transparent for the inspection I provided. In the template, the transparent background overrides the white, but when I run the copy of this template, the white overrides the transparent. This happens in a good handful of places I've found, so it is not just one specific part.
Hopefully this question doesn't have so many possibilities that it's impossible to answer. I just don't understand at all what could be amiss.
As you can see, the two CSS rules have the same specificity, so all things equal the rule that comes second will overwrite the first rule. In this project, there are essentially two style imports: Vuetify and the SASS files for the template (found in #/styles/index.scss).
I was able to recreate the issue by moving around the imports of these two style sheets.
In order to get the intended behaviour, you must import the styles provided by vuetify-material-dashboard after the stylesheet provided by Vuetify.
In the template project, Vuetify is imported first in main.js as import './plugins'. The vuetify-material-dashboard stylesheet, which overrides Vuetify styles, is imported in App.vue (a child of main.js).
In windows an empty folder looks like this:
But when it contains some files, it starts reflecting like this:
I want something similar in Font Awesome.
It has the folder icon viz. https://fontawesome.com/icons/folder?style=solid
which can be used to indicate an empty folder.
However, I could not find anything which indicates a non-empty folder.
Just pitching out here to get some help around the same.
You could use the "unfilled" folder from regular or light-style for the empty folder and the filled icon to indicate folders with files.
But this would require Pro-Version and I agree that a dedicated icon would be useful. The way to get it into FontAwesome would be via https://github.com/FortAwesome/Font-Awesome-Pro/issues - although there are a few others already in, so that may require some patience...
And if the initial suggestion does not help as an interim solution, maybe you could go with an overlay that uses folder + some other icon specific for the files you're dealing with.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)