Изменение стиля шрифта с сохранением внешней таблицы стилей для панели управления plotly

Я создаю информационную панель с помощью dash и plotly, используя ссылку на внешнюю таблицу стилей, которая используется в в каждом учебнике или документация для dash и plotly.

Теперь я хочу настроить только шрифт для всей панели (включая текст в цифрах) и «ничего больше». Я ссылаюсь на внешний источник css через:

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

У меня нет опыта работы с CSS. Могу ли я просто перезаписать соответствующие переменные из указанного источника? Если возможно, как мне это сделать? Нравиться:

font-family: "Garamond";

Код CSS опубликован на codepen, и я тоже пытался искать там, но мне это не помогло.

Спасибо за помощь!


python css plotly-dash plotly
person Mike_H    schedule 27.03.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используйте универсальный селектор CSS *.

Создайте /assets/custom.css в каталоге вашего приложения или (что я делаю) создайте CodePen с вашим пользовательским CSS и включите его первым в список external_stylesheets в

app = dash.Dash(
    __name__,
    external_stylesheets=external_stylesheets
)

В assets/custom.css или CodePen:

*{
  font-family: Garamond;
}

Если вы хотите применить его ко всему, кроме определенных типов элементов / компонентов классов, например "все, кроме h2 и класса myclass"

*:not(h2):not(.myclass){
  font-family: Garamond;
}
person russellthehippo    schedule 27.03.2019
comment
Привет, @russellr, я уверен, что это ответ на мой вопрос. Не могли бы вы подробнее рассказать о том, как настроить CSS на CodePen. Поэтому я должен скопировать содержимое указанного CSS, создать свой собственный Pen, скопировать в него содержимое и добавить второй фрагмент кода прямо вверху. Я прав? :) - person Mike_H; 28.03.2019
comment
По сути. Попробуйте сами. Ссылайтесь на код с URL-адресом плюс .css во внешних таблицах стилей, как в примерах chriddyp. - person russellthehippo; 29.03.2019
comment
как это возможно без CodePen? просто создание файла custom.css в папке с ресурсами, похоже, не имеет никакого эффекта - person hedgedandlevered; 01.10.2019
comment
Любой файл CSS должен автоматически включаться, пока вы делаете app = dash.Dash(__name__). См. dash.plot.ly/external-resources. - person russellthehippo; 02.10.2019