CODEWITHSUNDEEP
pythonwidgetjupyter
MJS
MJS

Reputation: 145

changing font attributes in jupyter notebook label widget

I am trying to modify the font attributes (weight, color, etc) of a jupyter label widget in python 2.7. As an example, I have tried the following:

import ipywidgets as widgets
myLabel= widgets.Label(value = 'Some Label',color = '#ff0000') #change font color to red
myLabel

When I run this bit of code, I get no errors, however the label color remains the default black.

Upvotes: 10

Views: 21153

Answers (6)

Phil C
Phil C

Reputation: 303

I'm not sure if this will work for the original question in Python 2.7, but since this is one of the first search results for styling ipywidgets:

In recent versions of ipywidgets, some style properties can be set with the style attribute. For example, for Labels: ipywidgets.widgets.widget_string.LabelStyle

Upvotes: 0

Rub
Rub

Reputation: 2738

If the label was using a specific element of HTML, which it doesn't, you could use

import IPython
import ipywidgets as widgets

IPython.display.HTML('<style> widget-label   { color: red; } </style>')
myLabel= widgets.Label(value = 'Some Label') ;
myLabel

However widget-label is not an element but a CSS class in this case, therefore the above code doesn't work. Hence, the option given by @AlanDyke is the next best one, either using the class it already has.

import IPython
import ipywidgets as widgets

IPython.display.HTML('<style> .widget-label   { color: red; } </style>')
myLabel= widgets.Label(value = 'Some Label') 
myLabel

Note: In google-colab you must replace IPython.display.HTML ... with display(HTML('<style> .widget-label { color: red; } </style>')).

Alternatively, creating a new one and attaching it.

import IPython
import ipywidgets as widgets

#IPython.display.HTML('<style> .widget-label, .redlabel   { color: red; } </style>')
IPython.display.HTML('<style> .redlabel   { color: red; } </style>')
myLabel= widgets.Label(value = 'Some Label') ;
myLabel.add_class('redlabel');
myLabel

enter image description here

For similar question see https://stackoverflow.com/a/70228454/4752223

Upvotes: 1

Alan Dyke
Alan Dyke

Reputation: 914

There are limitations with both the HTML widget (can't be aggregated in a collection, e.g. VBox, Hbox, Tab), and the use of LaTeX formating inside a label (will format as an equation - which is typically not what is wanted).

A way to overcome both these limitations, is to use the add_class method of the widget, to allow you to create any CSS styling:

from ipywidgets import Label
from IPython.display import display, HTML

display(HTML("<style>.red_label { color:red }</style>"))
l = Label(value="My Label")
l.add_class("red_label")
display(l)

Upvotes: 3

DougR
DougR

Reputation: 3479

There are 2 methods that I know of.

  1. HTML widget
  2. Label widget with latex
text = 'Some text'

htmlWidget = widgets.HTML(value = f"<b><font color='red'>{text}</b>")

labelWidget = widgets.Label(value = r'\(\color{red} {' + text  + '}\)')

enter image description here

Update: and now with Ipyvuetify....

import ipyvuetify as v
text = 'Some text'
v.Html(tag="div", children=[text], style_ = "color: red; font-weight: bold")

enter image description here

Upvotes: 9

shaida
shaida

Reputation: 63

This is a late reply, but for everyone who's still having this issue, you can add styling to the widget labels and description by using latex formatting. Here's an example to color the label text in red: 

myLabel= widgets.Label(value = r'\(\color{red} {highlighted}\)')

Upvotes: 4

Anderas
Anderas

Reputation: 700

one of the developers of the widgets says here that all the layout options shall be done in the layout attribute.

Currently i am exploring the capabilities of this attribute, but there seems to be no way to change font, font color or font size.

It may be that you have to write your own css file.

Upvotes: 2

Related Questions