文章/答案/技术大牛

发布

问需要Bokeh CSS示例
EN

Stack Overflow用户

提问于 2016-08-05 11:29:07

回答 1查看 1.6K关注 0票数 0

我一直在尝试在flask中使用我从gapminder演示中修改的css文件来设置bokeh小部件的样式。特别是，我目前正在尝试设计dropdown、tab和slider小部件的样式，但没有太大进展。我能够使用gapminder css示例设置工具提示的样式，但最终还是想知道是否还有其他示例，或者更好的是，列出所有bokeh样式选项(即.bk-...样式)。我不确定这是否应该正常工作，因为我还在学习web dev，根据我目前在flask中的index.html文件看起来是这样的：

<html>
  <head>
    <link
      href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.css"
      rel="stylesheet" type="text/css">
    <link
      href="https://cdn.bokeh.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.bokeh.org/bokeh/release/bokeh-0.12.1.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.1.min.js"></script>
    {{ script | safe }}
  </head>
  <body>
    <div class=page>
      {{ div | safe }}
    </div>
  </body>
</html>

提前感谢你的帮助。

python

css

flask

bokeh

回答 1

Stack Overflow用户

发布于 2017-02-20 20:23:07

不确定您是否仍在寻找答案，但以下是我为解决此问题所做的工作。

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

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

在本例中，当您将鼠标悬停在工具名称上时，我更改了工具名称的颜色以及滑块值的颜色。

我还有一个单独的.css文件，所以你可以把它都放进去。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38780626

复制

相似问题

问需要Bokeh CSS示例
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要Bokeh CSS示例EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要Bokeh CSS示例
EN