How to modify the font style of a button

Community Support
1

Hi all,

I would want to modify the style of the buttons to have a different and bigger font changing the CSS. I think there is no property related with the font.

Is there an easy way to do that?

Thanks.

2

This is a CSS
question.

It’s perfectly possible to modify the CSS of your page and change the appearance of your buttons. But not through Bokeh properties (although I think it’d be
nice to make
this easy via Custom models - I’ve
opened an issue).

                                  You can see

vari ous
online resources about how to
modify fonts in css (my favorite
is CSS Tricks -
)

static

···

https://css-tricks.com/almanac/ , and
then you can include that CSS
in your bokeh page - there are
a few examples that show that:https://github.com/bokeh/bokeh/tree/master/examples/howto/interactive_bubblehttps://github.com/bokeh/bokeh/tree/master/examples/app extra
css in the index.html
On 10/18/16 4:16 AM, wrote:

[email protected]

Hi all,

    I would want to modify the style of the buttons to have a

different and bigger font changing the CSS. I think there is no
property related with the font.

    Is there an easy way to do that?



    Thanks.

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/c39cfcad-a7d5-4c65-b46c-d6c1577c39d3%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/c39cfcad-a7d5-4c65-b46c-d6c1577c39d3%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
3 
    <meta charset="utf-8">
    <title>{{ title }}</title>
    {{ bokeh_css }}
    {{ bokeh_js }}
    <style>
    .bk-root .bk-widget button {
        min-width: 100%;
        font-size: 20px;
    }
    </style>

</head>
<body>
    {{ plot_div|indent(8) }}
    {{ plot_script|indent(8) }}
</body>

``

Thanks Sarah,

the question was more about how to change the CSS itself. Eventually I did it adding a template:


like:

with open(‘…/demoTemplate/template.html’, ‘r’) as f:
template = Template(f.read())
curdoc().template = template;

``

anyway, it would be really usefull to can do this in a case by case button from python.
thanks,
Roberto

···

El martes, 18 de octubre de 2016, 15:04:58 (UTC+2), Sarah Bird escribió:

      This is a CSS

question.

It’s perfectly possible to modify the CSS of your page and change the appearance of your buttons. But not through Bokeh properties (although I think it’d be
nice to make
this easy via Custom models - I’ve
opened an issue).

                                  You can see

vari ous
online resources about how to
modify fonts in css (my favorite
is CSS Tricks -
https://css-tricks.com/almanac/) , and
then you can include that CSS
in your bokeh page - there are
a few examples that show that:

static

                                          -

https://github.com/bokeh/bokeh/tree/master/examples/howto/interactive_bubble

server

                                                              - many of

the ex amples
here:
https://github.com/bokeh/bokeh/tree/master/examples/app
have extra
css in the index.html

On 10/18/16 4:16 AM, [email protected] > wrote:

Hi all,

    I would want to modify the style of the buttons to have a

different and bigger font changing the CSS. I think there is no
property related with the font.

    Is there an easy way to do that?



    Thanks.

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/c39cfcad-a7d5-4c65-b46c-d6c1577c39d3%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/c39cfcad-a7d5-4c65-b46c-d6c1577c39d3%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" width="150" height="30">
    ](http://continuum.io)