Question

我一直在尝试使用我在gapminder演示中修改的烧瓶中的css文件来设置散景小部件的样式。特别是，我目前正在尝试设置下拉列表，选项卡和滑块小部件没有太大进展。我能够使用gapminder css示例来设置工具提示的样式，但最终还是想知道是否有其他示例，或者更好的是，所有散景样式选项（即.bk -...样式）的列表。我不确定这是否应该正常工作，因为我还在学习web开发，我现在的index.html文件看起来像是：

<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>

提前感谢您的帮助。

Answer 1

不确定您是否仍在搜索回复，但这是我为解决此问题所做的工作。

    <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>

这是非常手动的，因为我首先生成了散景图，检查了我想要更改的小部件元素，然后将其添加到index.html文件中。如果你想看看你可以编辑哪些属性，只需检查它们，你就会在那里看到它们。

对于这个例子，当你将鼠标悬停在它们上时，我改变了工具名称的颜色，也改变了滑块值颜色。

我还有一个单独的.css文件，我可以把它全部移到那里。

需要散景CSS示例

1 个答案: