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

#python #css #plotly #plotly-dash

#python #css #plotly #plotly-dash

Вопрос:

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

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

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

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

 font-family: "Garamond";
  

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

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

Ответ №1:

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

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

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

В assets/custom.css или CodePen:

 *{
  font-family: Garamond;
}
  

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

 *:not(h2):not(.myclass){
  font-family: Garamond;
}
  

Комментарии:

1. Привет, @ russellr, я уверен, что это ответ на мой вопрос. Не могли бы вы подробнее рассказать о том, как настроить CSS в CodePen. Итак, я должен скопировать содержимое ссылочного CSS, создать свое собственное перо, скопировать содержимое в него и добавить ваш второй фрагмент кода прямо вверху. Я прав? 🙂

2. В принципе. Попробуйте. Ссылайтесь на codepen с URL plus .css во внешних таблицах стилей, как в примерах chriddyp.

3. как это возможно без CodePen? простое создание файла custom.css в папке assets, похоже, не имеет никакого эффекта

4. Любой файл CSS должен автоматически включаться до тех пор, пока вы это делаете app = dash.Dash(__name__) . Смотрите dash.plot.ly/external-resources