Перейти к содержимому

Как поменять цвет виджета

  • автор:

Как поменять цвет виджета

У каждого элемента виджета есть свои настройки стиля. Их можно посмотреть в административном меню (Ctrl + Shift + I или Cmd+Opt + I), на примере сайта с уже изменённым стилем кнопки.

Слева появится административная панель с кодом элемента. В нём содержится информация о стиле и атрибутах стиля.

На примере кнопки Купить, видим что ей задан класс class=btn-widget и параметры в виде атрибутов: class с параметрами фона, обязательными атрибутами type (тип) и tc-event (id нашего события).

Так как код каждого сайта уникален, то в вашем случае настройки могут иметь своё название, например, btn-widget, button-widget, tc-widget-button и др., важна лишь привязка к виджету.

Таким образом можно увидеть настройки любой части нашего виджета: фона, надписи, кнопки и цвета категорий. Для этого в левом верхнем углу нажмите стрелку и щёлкните на элемент виджета.

А целиком код страницы открывается через правую кнопку мыши �� Посмотреть код страницы. Скопируйте из админ панели class=btn-widget �� нажмите Ctrl + F на странице кода �� смотрите настройки.

Очень похоже на то, что мы предлагаем в нашем ЛК:

Чтобы изменить настройки, то есть изменить код виджета, нужны административные права к интернет-площадке. В зависимости от платформы, на базе которой сделан сайт, редактор стиля (кода) будет отличаться.

Например, у нас есть инструкция по установке виджета на сайт на платформе Tilda.

Как сделать индивидуальный стиль для любого виджета

Вопрос: Как изменить цвет фона отдельного виджета, чтобы выделить его визуально от других?

Ответ: Каждый виджет в сайдбаре имеет индивидуальный идентификатор ( id ), параметры стилей для которого мы можем задать в файле стилей шаблона (style.css, css.css и пр.). Вам остается определить данный id и прописать правильно параметры.

Для работы советую использовать бесплатное дополнение для браузера FireFox под названием FireBug. Если же вы используете Google Chrome, то нажмите просто клавишу F12 в браузере. В Opera выберите «Проинспектировать элемент».

Далее остается визуально определить необходимый нам виджет и его id.

как изменить фон виджета

Скриншот FireBug для FireFox

Для наглядной демонстрации я подготовил небольшое видео на примере, где мы определяем id виджета и задаем ему необходимые параметры стилей. Смотрите в высоком разрешении.

Как поменять цвет у виджета QDial в PyQT5 или PySide2

В setStyleSheet установлен цвет черный, но виджет отображается как розовый.
Есть ли способ поменять цвет на черный?

from PySide2 import QtWidgets import sys class Test(QtWidgets.QWidget): def __init__(self,parent=None): QtWidgets.QWidget.__init__(self,parent) self = QtWidgets.QDial(self) self.resize(300,300) self.setStyleSheet('background-color:#0f0d0e; border: 0px;') if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) window = Test() window.show() sys.exit(app.exec_()) 

введите сюда описание изображения Хотелось бы получить: введите сюда описание изображения

Отслеживать
72.6k 105 105 золотых знаков 38 38 серебряных знаков 55 55 бронзовых знаков
задан 16 мар 2021 в 17:16
leonidtime leonidtime
83 1 1 золотой знак 2 2 серебряных знака 10 10 бронзовых знаков
не могли бы вы как-то показать на изображении, что вы хотите получить?
17 мар 2021 в 0:42
Добавил в вопрос изображение
18 мар 2021 в 12:25

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Мне, как и вам, поменять цвет виджета QDial , используя таблицы стилей, не удалось.

Я также попробовал изменять цвета палитры для QDial и некоторых виджетов, близких по смыслу с ним.

Поменять цвет виджета QDial на сегодня нельзя, т.к. QDial вообще не поддерживает таблицы стилей.

import sys import random from PyQt5 import QtCore, QtGui, QtWidgets class Widget(QtWidgets.QWidget): def __init__(self): super().__init__() self.setWindowTitle('PyQt5 изменяет палитру динамически') self.label = QtWidgets.QLabel("Hello Label Label Label", maximumHeight=70, alignment=QtCore.Qt.AlignCenter) self.dial = QtWidgets.QDial(notchesVisible=True) self.slider = QtWidgets.QSlider(QtCore.Qt.Horizontal) self.spinBox = QtWidgets.QSpinBox(prefix="Hello ", suffix=" SpinBox", alignment=QtCore.Qt.AlignCenter) layout = QtWidgets.QVBoxLayout(self) for obj in ( QtWidgets.QRadioButton("Hello QRadioButton", checked=True), self.label, self.spinBox, QtWidgets.QPushButton("Hello Button"), self.dial, self.slider, ): layout.addWidget(obj) self.timer = QtCore.QTimer(self) self.timer.timeout.connect(self.on_timeout) QtCore.QTimer.singleShot(2000, lambda: self.timer.start(2000)) self.num = 0 @QtCore.pyqtSlot() def on_timeout(self): pal = QtWidgets.QApplication.palette() palette = self.palette() color = QtGui.QColor(*random.sample(range(256), 3)) pal.setColor(QtGui.QPalette.Button, color) palette.setColor(QtGui.QPalette.Window, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.WindowText, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.Base, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.AlternateBase, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.Text, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(palette.Button, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(palette.ButtonText, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.BrightText, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.Highlight, QtGui.QColor(*random.sample(range(256), 3))) palette.setColor(QtGui.QPalette.HighlightedText, QtGui.QColor(*random.sample(range(256), 3))) self.setPalette(pal) self.setPalette(palette) self.dial.setValue(self.num) self.slider.setValue(self.num) self.spinBox.setValue(self.num) self.num += 1 if self.num > 100: self.num = 0 currentTime = QtCore.QTime.currentTime() timeTxt = currentTime.toString('hh:mm:ss') self.label.setText(timeTxt) def create_palette(): palette = QtGui.QPalette() palette.setColor(QtGui.QPalette.Window, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.WindowText, QtCore.Qt.white) palette.setColor(QtGui.QPalette.Base, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.AlternateBase, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.ToolTipBase, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.Text, QtCore.Qt.white) palette.setColor(QtGui.QPalette.Button, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.ButtonText, QtCore.Qt.white) palette.setColor(QtGui.QPalette.BrightText, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.Highlight, QtGui.QColor(0, 0, 0)) palette.setColor(QtGui.QPalette.HighlightedText, QtGui.QColor(220, 0, 0)) return palette if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) app.setStyle('Fusion') #. app.setFont(QtGui.QFont("Times", 15, QtGui.QFont.Bold)) QtWidgets.QApplication.setPalette(create_palette()) w = Widget() w.resize(300, 500) w.show() sys.exit(app.exec_()) 

Как поменять цвет виджета

Меняем цвет и подчеркивание одной или сразу всех ссылок на странице

Автор: Анна
Обновлено больше недели назад

После установки ссылки в виджет «Текст», ее цвет возможно изменить через глобальные цвета. Если ссылке необходимо установить индивидуальный цвет или убрать подчеркивание, то выполнить это можно при помощи редактирования кода.

А также есть специальный виджет, который упрощает это:

Шаг 1. Поместите рядом с виджетом текста, в которой ссылка, любой виджет. К примеру, текст.

Шаг 2. Откройте окно импорта виджета:

Шаг 3. В поле внутри окна импорта вставьте код, скопированный из файла по ссылке.
Сохраните изменения.

После этого появится HTML-виджет c примером ссылки в тексте:

Внутренний виджет текста можно удалить и переместить в этот HTML-виджет свой текстовой виджет, в котором находится ссылка.

Тогда цвет этой ссылки изменится на тот, который указан в настройках:

Ниже будет опция для изменения декорации (подчеркивания) ссылок в виджете.
Также есть опция применения указанных настроек для всех ссылок в тексте на данной странице. Если выбран вариант «Да», то настроенные в виджете стили применятся ко всем ссылкам на странице, в т.ч. и настроенным через глобальные цвета.

В анимации ниже удалим текстовый виджет, который был установлен по умолчанию, установим взамен его свой и рассмотрим настройки:

Важно: Если вы хотите использовать несколько виджетов и цветов для ссылок на странице, то достаточно просто для каждого отдельного виджета включить Инкапсуляцию стилей, как на скриншотах ниже:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *