Bokeh CSS Beispiele benötigt

Ich habe versucht, Bokeh Widgets mit einer CSS-Datei in der Flasche, die ich von der GapMinder-Demo modifiziert. Insbesondere versuche ich derzeit, die Dropdown-, Tab- und Slider-Widgets ohne großen Fortschritt zu stylen. Ich war in der Lage, die Tooltips mit dem GapMinder CSS-Beispiel zu stylen, würde aber gerne wissen, ob es andere Beispiele gibt oder, noch besser, eine Auflistung aller Bokeh-Stil-Optionen (d. H. .bk -... Stile). Ich bin mir nicht sicher, ob dies richtig funktionieren soll, wie ich bin immer noch Web-Entwickler lernen, durch meine aktuelle Datei index.html im Kolben wie folgt aussieht:Bokeh CSS Beispiele benötigt

<html> 
    <head> 
    <link 
     href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css" 
     rel="stylesheet" type="text/css"> 
    <link 
     href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css" 
     rel="stylesheet" type="text/css"> 
    <link 
     rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/gapminder.css') }}"> 
    <script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.js"></script> 
    <script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.js"></script> 
    {{ script | safe }} 
    </head> 
    <body> 
    <div class=page> 
     {{ div | safe }} 
    </div> 
    </body> 
</html>

Vielen Dank im Voraus für die Hilfe.

Quelle

2016-08-05 PythonUzer

Nicht sicher, ob Sie immer noch nach einer Antwort suchen, aber hier ist, was ich getan habe, um dieses Problem zu adressieren.

<style>  
     {% include 'styles.css' %} 
     .bk-root .bk-toolbar-right .bk-button-bar-list .bk-toolbar-button:hover .bk-tip { 
     color: #5DADE2; 
     } 
     .bk-root .bk-slider-parent input[type="text"]{ 
     color: #FDFEFE; 
     } 
    </style>

Es ist durchaus Handbuch, dass ich zum ersten Mal die Bokeh Plots erzeugt, kontrolliert die Widget-Elemente i dann einfach addiert diese in die Datei index.html ändern wollte. Wenn Sie sehen möchten, welche Attribute Sie bearbeiten können, prüfen Sie sie einfach und Sie werden sie dort sehen.

In diesem Beispiel habe ich die Farbe der Werkzeugnamen geändert, wenn Sie auf ihnen schweben und auch die Farbe des Schiebereglers.

Ich hatte auch eine separate .css-Datei, die ich aufgenommen habe, so dass Sie alles darin verschieben konnten.

Quelle

2017-02-20 12:23:07 Anthonydouc

Antwort

Verwandte Themen