Using bootstrap in jupyter widget - css

I try to make simple widget with animation for Jupyter notebook using ipywidgets library.
I want to use bootstrap library for prettify my widget. So, I imported bootstrap.min.css file, but, when I create widget, styles of my notebook break down. Please see screenshot before
and after creating widget.
Apparently this is due to the fact that styles are overwritten. What can I do to correct the influence of my styles on the general jupyter-notebook styles. I would be grateful for any advice or example of how bootstrap is used in other widgets.

Related

Not showing css styles in scene builder in javafx

I am putting styles in CSS file and import it correctly in fxml file, but styles are not showing in scene builder. But when I run the app all the styles are applied correctly. I am using intelijIdea Can someone please help me
I know this is old, but I believe certain names aren't picked up on, it seems.
For example, when I use the name, "content" for a class, or "title", those classes will not show up in the list of available class styles to apply to components. This seems like a silly, arbitrary thing to not even remotely document, but as far as I can tell, that was my issue.

PyCharm: How to disable certain CSS file code complete?

Django REST framework uses Bootstrap and has its own CSS files in it. It seems like PyCharm imports those files for code completion popups. The things is, I don't want those as I use different CSS framework and in fact, it's confusing me because all those Bootstrap autocomplete popups when I'm trying to set CSS classes and so on.
So my question is, is there any way I can disable code completion popups from certain CSS files?
I did not face with this problem until now,but I think you should disable these folders is Pycharm, try this :
Settings|Directories -> Use Exclude button on folder

How to replicate bootstrap button style

I'm trying to replicate the bootstrap button style without having to import the bootstrap CDN into my project. Is there an efficient way to do this?
Yes, you can. Open this page - https://getbootstrap.com/docs/3.3/customize/ and check/uncheck what you want
In your case you need to check
Common CSS - Buttons
Components - Buttons groups
Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.
Download the package here: https://v4-alpha.getbootstrap.com/getting-started/download/
Then open it and go into the SCSS directory. Look for _buttons.scss.
Open it, copy the styles, paste them into your CSS. You may have to hard code any SASS vars they use.

How do the icons in TinyMCE work?

I can't seem to be able to find any information about this on the interwebs, but how do the icons in TinyMCE 4 work?
I know I can specify icons for buttons by name and specify custom icons for my custom buttons, but what if I wanted to take one of the standard icons, modify it in an image editing application and then save it as a custom icon. Where do I get the source image for that icon? Where can I see the full list of available icons and their names?
So, here is, possible, a partial answer to my own question or at least what I have managed to understand based on the poor documentation that currently exists for this aspect of TinyMCE 4.
Icons in TinyMCE 4.x use a custom IcoMoon font. The files for this font go in the skins//fonts directory.
If you download the TinyMCE Dev Package, you can find in js/tinymce/skins/lightgray/Icons.less all the icons that are available for that particular skin and you will be able to use those icons for your custom buttons (if you are using that skin).
You need to use the word between "-i-" and ":before". e.g. if the definition in Icons.less is:
.#{prefix}-i-alignleft:before
You can use the keyword alignleft as an icon for your custom button.
I haven't gotten as far as adding more icons to the default set, but I guess it would involve creating a new theme, hopefully inheriting from a parent theme, and defining your own Icons.less file and then process that LESS file to generate the appropriate CSS for your theme.

New ipython notebook templating

Is it possible to define some template content cells which all new ipython notebooks include when being created?
I'd like my notebooks to include some standard CSS using this method and possibly also have a markdown cell with links I'm frequently using .
Thanks to #Jakob for the help.
To get permanent customised CSS within the notebooks, I needed to create <myprofile>/static/custom/custom.css in my .ipython user folder folder.
This worked quite ok. I used the firefox's webdev tools to find the css items and classes in the ipython notebook and managed to get a monokai-ish style:
I also learned from here that you can inject javascript which might make it possible to add default content to new notebooks. I haven't tried this one yet though.
Edit: if interested, the css file lives here. The monokai colors are based on .cm-s-ipython, which I think is similar what sublime text is using.

Resources