We Keep Coding

Using relative paths in Qt stylesheet urls

I have trouble reading the images in a .qss file. The organizations is as following:
How can I fix this bug ?
Is there a proper way to append all folders/subfolder to the path of the main application main.py. I have tried sys.path.append('./images'), but it always requires the absolute path to any image or icon ?
Example Code (Note that No icons are appearing (no down_arrow for QCombobox, and no question icon for messagebox)):
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.hbox = QHBoxLayout()
self.setLayout(self.hbox)
self.combo = QComboBox()
self.combo.addItem('item_1')
self.combo.addItem('item_2')
self.combo.setCurrentText('item_1')
self.hbox.addWidget(self.combo)
self.bt = QPushButton('Question')
self.hbox.addWidget(self.bt)
self.bt.clicked.connect(self.openMess)
# style
file = QFile(r'./themes/DarkBlue.qss')
file.open(QFile.ReadOnly | QFile.Text)
stylesheet = file.readAll()
app.setStyleSheet(str(stylesheet, encoding='utf-8'))
def openMess(self):
buttonReply = QMessageBox.question(self, 'No Image', "Check icons", QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if buttonReply == QMessageBox.Yes:
print('Yup')
else:
print('Nup')
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
ex.show()
sys.exit(app.exec_())
This is a sample of the .qss file i use. The images folder is a subfolder at same location as the .qss file:
QMenuBar
{
background-color: #302F2F;
color: silver;
}
QMenuBar::item
{
background: transparent;
}
QMenuBar::item:selected
{
background: transparent;
border: 1px solid #3A3939;
}
QMenuBar::item:pressed
{
border: 1px solid #3A3939;
background-color: #3d8ec9;
color: black;
margin-bottom:-1px;
padding-bottom:1px;
}
QMenu
{
border: 1px solid #3A3939;
color: silver;
margin: 1px;
}
QMenu::icon
{
margin: 1px;
}
QMenu::item
{
padding: 2px 2px 2px 25px;
margin-left: 5px;
border: 1px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected
{
color: black;
}
QMenu::separator {
height: 2px;
background: lightblue;
margin-left: 10px;
margin-right: 5px;
}
QMenu::indicator {
width: 16px;
height: 16px;
}
/* non-exclusive indicator = check box style indicator
(see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
image: url(images/checkbox_unchecked.png);
}
QMenu::indicator:non-exclusive:unchecked:selected {
image: url(images/checkbox_unchecked_disabled.png);
}
QMenu::indicator:non-exclusive:checked {
image: url(images/checkbox_checked.png);
}
QMenu::indicator:non-exclusive:checked:selected {
image: url(images/checkbox_checked_disabled.png);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
image: url(images/radio_unchecked.png);
}
QMenu::indicator:exclusive:unchecked:selected {
image: url(images/radio_unchecked_disabled.png);
}
QMenu::indicator:exclusive:checked {
image: url(images/radio_checked.png);
}
QMenu::indicator:exclusive:checked:selected {
image: url(images/radio_checked_disabled.png);
}
QMenu::right-arrow {
margin: 5px;
image: url(images/right_arrow.png)
}
QWidget:disabled
{
color: #808080;
background-color: #302F2F;
}
QAbstractItemView
{
alternate-background-color: #3A3939;
color: silver;
border: 1px solid 3A3939;
border-radius: 2px;
padding: 1px;
}
QWidget:focus, QMenuBar:focus
{
border: 1px solid #78879b;
}
QTabWidget:focus, QCheckBox:focus, QRadioButton:focus, QSlider:focus
{
border: none;
}
QLineEdit
{
background-color: #201F1F;
padding: 2px;
border-style: solid;
border: 1px solid #3A3939;
border-radius: 2px;
color: silver;
}
QGroupBox {
border:1px solid #3A3939;
border-radius: 2px;
margin-top: 20px;
background-color: #302F2F;
color: silver;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
QAbstractScrollArea
{
border-radius: 2px;
border: 1px solid #3A3939;
background-color: transparent;
}
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: #2A2929;
}
QScrollBar::handle:horizontal
{
background-color: #605F5F;
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(images/right_arrow_disabled.png);
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(images/left_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
{
border-image: url(images/right_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
{
border-image: url(images/left_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{
background: none;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background-color: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: #605F5F;
min-height: 5px;
border-radius: 4px;
}
QScrollBar::sub-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(images/up_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(images/down_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
{
border-image: url(images/up_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
{
border-image: url(images/down_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
QTextEdit
{
background-color: #201F1F;
color: silver;
border: 1px solid #3A3939;
}
QPlainTextEdit
{
background-color: #201F1F;;
color: silver;
border-radius: 2px;
border: 1px solid #3A3939;
}
QHeaderView::section
{
background-color: #3A3939;
color: silver;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
QSizeGrip {
image: url(images/sizegrip.png);
width: 12px;
height: 12px;
}
QMainWindow
{
background-color: #302F2F;
}
QMainWindow::separator
{
background-color: #302F2F;
color: white;
padding-left: 4px;
spacing: 2px;
border: 1px dashed #3A3939;
}
QMainWindow::separator:hover
{
background-color: #787876;
color: white;
padding-left: 4px;
border: 1px solid #3A3939;
spacing: 2px;
}
QMenu::separator
{
height: 1px;
background-color: #3A3939;
color: white;
padding-left: 4px;
margin-left: 10px;
margin-right: 5px;
}
QFrame
{
border-radius: 2px;
border: 1px solid #444;
}
QFrame[frameShape="0"]
{
border-radius: 2px;
border: 1px transparent #444;
}
QStackedWidget
{
background-color: #302F2F;
border: 1px transparent black;
}
QToolBar {
border: 1px transparent #393838;
background: 1px solid #302F2F;
font-weight: bold;
}
QToolBar::handle:horizontal {
image: url(images/Hmovetoolbar.png);
}
QToolBar::handle:vertical {
image: url(images/Vmovetoolbar.png);
}
QToolBar::separator:horizontal {
image: url(images/Hsepartoolbar.png);
}
QToolBar::separator:vertical {
image: url(images/Vsepartoolbars.png);
}
QPushButton
{
color: silver;
background-color: #302F2F;
border-width: 2px;
border-color: #4A4949;
border-style: solid;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
/* outline: none; */
/* min-width: 40px; */
}
QPushButton:disabled
{
background-color: #302F2F;
border-width: 2px;
border-color: #3A3939;
border-style: solid;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
/*border-radius: 2px;*/
color: #808080;
}
QPushButton:focus {
background-color: #3d8ec9;
color: white;
}
QComboBox
{
selection-background-color: #3d8ec9;
background-color: #201F1F;
border-style: solid;
border: 1px solid #3A3939;
border-radius: 2px;
padding: 2px;
min-width: 75px;
}
QPushButton:checked{
background-color: #4A4949;
border-color: #6A6969;
}
QPushButton:hover {
border: 2px solid #78879b;
color: silver;
}
QComboBox:hover, QAbstractSpinBox:hover,QLineEdit:hover,QTextEdit:hover,QPlainTextEdit:hover,QAbstractView:hover,QTreeView:hover
{
border: 1px solid #78879b;
color: silver;
}
QComboBox:on
{
background-color: #626873;
padding-top: 3px;
padding-left: 4px;
selection-background-color: #4a4a4a;
}
QComboBox QAbstractItemView
{
background-color: #201F1F;
border-radius: 2px;
border: 1px solid #444;
selection-background-color: #3d8ec9;
color: silver;
}
QComboBox::drop-down
{
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 0px;
border-left-color: darkgray;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow
{
image: url(images/down_arrow_disabled.png);
}
QComboBox::down-arrow:on, QComboBox::down-arrow:hover,
QComboBox::down-arrow:focus
{
image: url(images/down_arrow.png);
}
QPushButton:pressed
{
background-color: #484846;
}
QAbstractSpinBox {
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #3A3939;
background-color: #201F1F;
color: silver;
border-radius: 2px;
min-width: 75px;
}
QAbstractSpinBox:up-button
{
background-color: transparent;
subcontrol-origin: border;
subcontrol-position: top right;
}
QAbstractSpinBox:down-button
{
background-color: transparent;
subcontrol-origin: border;
subcontrol-position: bottom right;
}
QAbstractSpinBox::up-arrow,QAbstractSpinBox::up-arrow:disabled,QAbstractSpinBox::up-arrow:off {
image: url(images/up_arrow_disabled.png);
width: 10px;
height: 10px;
}
QAbstractSpinBox::up-arrow:hover
{
image: url(images/up_arrow.png);
}
QAbstractSpinBox::down-arrow,QAbstractSpinBox::down-arrow:disabled,QAbstractSpinBox::down-arrow:off
{
image: url(images/down_arrow_disabled.png);
width: 10px;
height: 10px;
}
QAbstractSpinBox::down-arrow:hover
{
image: url(images/down_arrow.png);
}
QLabel
{
border: 0px solid black;
}
QTabWidget{
border: 1px transparent black;
}
QTabWidget::pane {
border: 1px solid #444;
border-radius: 3px;
padding: 3px;
}
QTabBar
{
qproperty-drawBase: 0;
left: 5px; /* move to the right by 5px */
}
QTabBar:focus
{
border: 0px transparent black;
}
QTabBar::close-button {
image: url(images/close.png);
background: transparent;
}
QTabBar::close-button:hover
{
image: url(images/close-hover.png);
background: transparent;
}
QTabBar::close-button:pressed {
image: url(images/close-pressed.png);
background: transparent;
}
/* TOP TABS */
QTabBar::tab:top {
color: #b1b1b1;
border: 1px solid #4A4949;
border-bottom: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
QTabBar::tab:top:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-bottom: 1px transparent #4A4949;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
QTabBar::tab:top:!selected:hover {
background-color: #48576b;
}
/* BOTTOM TABS */
QTabBar::tab:bottom {
color: #b1b1b1;
border: 1px solid #4A4949;
border-top: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
QTabBar::tab:bottom:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-top: 1px transparent #4A4949;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
QTabBar::tab:bottom:!selected:hover {
background-color: #78879b;
}
/* LEFT TABS */
QTabBar::tab:left {
color: #b1b1b1;
border: 1px solid #4A4949;
border-left: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
QTabBar::tab:left:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-right: 1px transparent #4A4949;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
QTabBar::tab:left:!selected:hover {
background-color: #48576b;
}
/* RIGHT TABS */
QTabBar::tab:right {
color: #b1b1b1;
border: 1px solid #4A4949;
border-right: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
QTabBar::tab:right:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-right: 1px transparent #4A4949;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
QTabBar::tab:right:!selected:hover {
background-color: #48576b;
}
QTabBar QToolButton::right-arrow:enabled {
image: url(images/right_arrow.png);
}
QTabBar QToolButton::left-arrow:enabled {
image: url(images/left_arrow.png);
}
QTabBar QToolButton::right-arrow:disabled {
image: url(images/right_arrow_disabled.png);
}
QTabBar QToolButton::left-arrow:disabled {
image: url(images/left_arrow_disabled.png);
}
QDockWidget {
border: 1px solid #403F3F;
titlebar-close-icon: url(images/close.png);
titlebar-normal-icon: url(images/undock.png);
}
QDockWidget::close-button, QDockWidget::float-button {
border: 1px solid transparent;
border-radius: 2px;
background: transparent;
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover {
background: rgba(255, 255, 255, 10);
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
padding: 1px -1px -1px 1px;
background: rgba(255, 255, 255, 10);
}
QTreeView, QListView, QTextBrowser, AtLineEdit, AtLineEdit::hover {
border: 1px solid #444;
background-color: silver;
border-radius: 3px;
margin-left: 3px;
color: black;
}
QTreeView:branch:selected, QTreeView:branch:hover {
background: url(images/transparent.png);
}
QTreeView::branch:has-siblings:!adjoins-item {
border-image: url(images/transparent.png);
}
QTreeView::branch:has-siblings:adjoins-item {
border-image: url(images/transparent.png);
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
border-image: url(images/transparent.png);
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
image: url(images/branch_closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
image: url(images/branch_open.png);
}
QTreeView::branch:has-children:!has-siblings:closed:hover,
QTreeView::branch:closed:has-children:has-siblings:hover {
image: url(images/branch_closed-on.png);
}
QTreeView::branch:open:has-children:!has-siblings:hover,
QTreeView::branch:open:has-children:has-siblings:hover {
image: url(images/branch_open-on.png);
}
QListView::item:!selected:hover, QListView::item:!selected:hover, QTreeView::item:!selected:hover {
background: rgba(0, 0, 0, 0);
outline: 0;
color: #FFFFFF
}
QListView::item:selected:hover, QListView::item:selected:hover, QTreeView::item:selected:hover {
background: #3d8ec9;
color: #FFFFFF;
}
QSlider::groove:horizontal {
border: 1px solid #3A3939;
height: 8px;
background: #201F1F;
margin: 2px 0;
border-radius: 2px;
}
QSlider::handle:horizontal {
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0.0 silver, stop: 0.2 #a8a8a8, stop: 1 #727272);
border: 1px solid #3A3939;
width: 14px;
height: 14px;
margin: -4px 0;
border-radius: 2px;
}
QSlider::groove:vertical {
border: 1px solid #3A3939;
width: 8px;
background: #201F1F;
margin: 0 0px;
border-radius: 2px;
}
QSlider::handle:vertical {
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.0 silver,
stop: 0.2 #a8a8a8, stop: 1 #727272);
border: 1px solid #3A3939;
width: 14px;
height: 14px;
margin: 0 -4px;
border-radius: 2px;
}
QToolButton {
/* background-color: transparent; */
border: 2px transparent #4A4949;
border-radius: 4px;
background-color: dimgray;
margin: 2px;
padding: 2px;
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
padding-right: 20px; /* make way for the popup button */
border: 2px transparent #4A4949;
border-radius: 4px;
}
QToolButton[popupMode="2"] { /* only for InstantPopup */
padding-right: 10px; /* make way for the popup button */
border: 2px transparent #4A4949;
}
QToolButton:hover, QToolButton::menu-button:hover {
border: 2px solid #78879b;
}
QToolButton:checked, QToolButton:pressed,
QToolButton::menu-button:pressed {
background-color: #4A4949;
border: 2px solid #78879b;
}
/* the subcontrol below is used only in the InstantPopup or DelayedPopup mode */
QToolButton::menu-indicator {
image: url(images/down_arrow.png);
top: -7px; left: -2px; /* shift it a bit */
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
border: 1px transparent #4A4949;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
outline: none;
}
QToolButton::menu-arrow {
image: url(images/down_arrow.png);
}
QToolButton::menu-arrow:open {
top: 1px; left: 1px; /* shift it a bit */
border: 1px solid #3A3939;
}
QPushButton::menu-indicator {
subcontrol-origin: padding;
subcontrol-position: bottom right;
left: 4px;
}
QTableView
{
border: 1px solid #444;
gridline-color: #6c6c6c;
background-color: #201F1F;
}
QTableView, QHeaderView
{
border-radius: 0px;
}
QTableView::item:pressed, QListView::item:pressed, QTreeView::item:pressed {
background: #78879b;
color: #FFFFFF;
}
QTableView::item:selected:active, QTreeView::item:selected:active, QListView::item:selected:active {
background: #3d8ec9;
color: #FFFFFF;
}
QHeaderView
{
border: 1px transparent;
border-radius: 2px;
margin: 0px;
padding: 0px;
}
QHeaderView::section {
background-color: #3A3939;
color: silver;
padding: 4px;
border: 1px solid #6c6c6c;
border-radius: 0px;
text-align: center;
}
QHeaderView::section::vertical::first, QHeaderView::section::vertical::only-one
{
border-top: 1px solid #6c6c6c;
}
QHeaderView::section::vertical
{
border-top: transparent;
}
QHeaderView::section::horizontal::first, QHeaderView::section::horizontal::only-one
{
border-left: 1px solid #6c6c6c;
}
QHeaderView::section::horizontal
{
border-left: transparent;
}
QHeaderView::section:checked
{
color: white;
background-color: #5A5959;
}
/* style the sort indicator */
QHeaderView::down-arrow {
image: url(images/down_arrow.png);
}
QHeaderView::up-arrow {
image: url(images/up_arrow.png);
}
QTableCornerButton::section {
background-color: #3A3939;
border: 1px solid #3A3939;
border-radius: 2px;
}
QToolBox {
padding: 3px;
border: 1px transparent black;
}
QToolBox::tab {
color: #b1b1b1;
background-color: #302F2F;
border: 1px solid #4A4949;
border-bottom: 1px transparent #302F2F;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
QToolBox::tab:selected { /* italicize selected tabs */
font: italic;
background-color: #302F2F;
border-color: #3d8ec9;
}
QStatusBar::item {
border: 1px solid #3A3939;
border-radius: 2px;
}
QFrame[height="3"], QFrame[width="3"] {
background-color: #AAA;
}
QSplitter::handle {
border: 1px dashed #3A3939;
}
QSplitter::handle:hover {
background-color: #787876;
border: 1px solid #3A3939;
}
QSplitter::handle:horizontal {
width: 1px;
}
QSplitter::handle:vertical {
height: 1px;
}
QListWidget {
background-color: silver;
border-radius: 5px;
margin-left: 5px;
}
QListWidget::item {
color: black;
}
QMessageBox {
messagebox-critical-icon : url(images/critical.png);
messagebox-information-icon : url(images/information.png);
messagebox-question-icon : url(question.png);
messagebox-warning-icon: : url(images/warning.png);
}
ColorButton::enabled {
border-radius: 0px;
border: 1px solid #444444;
}
ColorButton::disabled {
border-radius: 0px;
border: 1px solid #AAAAAA;
}

Probably the best way to do this is to use QDir.addSearchPath, which would allow you to use a simple alias in your stylesheet like this:
QComboBox::down-arrow
{
image: url(images:down_arrow_disabled.png);
}
The alias needs to be created at the beginning of the script, like this:
if __name__ == '__main__':
import os
# use script directory as root
root = os.path.dirname(os.path.abspath(__file__))
QDir.addSearchPath('themes', os.path.join(root, 'themes'))
QDir.addSearchPath('images', os.path.join(root, 'themes/images'))
app = QApplication(sys.argv)
file = QFile('themes:DarkBlue.qss')
file.open(QFile.ReadOnly | QFile.Text)
app.setStyleSheet(str(file.readAll(), 'utf-8'))
...
Note that this mechanism is also used to load the stylesheet itself (although it's not strictly necessary). It's best to avoid using normal relative paths, because they depend on the current working directory which can be changed independently. It's very unlikely to be the same every time your application is run, so you should never rely on it.

Is there any way to style the field alerts in Django?

I'm working on the style of my website and I'd like to style this part of the form:
I tried with field.errors but that's not it. Any ideas?

you can change this style with JS in your code
visit this page
(function() {
var input = document.getElementById('username');
var form = document.getElementById('form');
var elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
form.appendChild(elem);
input.addEventListener('invalid', function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
input.className = 'invalid animated shake';
elem.textContent = 'Username should only contain lowercase letters e.g. john';
elem.className = 'error';
elem.style.display = 'block';
}
});
input.addEventListener('input', function(event){
if ( 'block' === elem.style.display ) {
input.className = '';
elem.style.display = 'none';
}
});
})();
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
background-color: #ECEFF1;
}
form {
max-width: 300px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
text-align: left;
position: relative;
padding-top: 80px;
}
label,
input {
display: block;
}
label {
font-size: 12px;
text-transform: uppercase;
color: #B0BEC5;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
outline: 0;
border: 2px solid #B0BEC5;
}
input.invalid {
border-color: #DD2C00;
}
#notify {
margin-top: 5px;
padding: 10px;
font-size: 12px;
width: 100%;
color: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#notify.error {
background-color: #DD2C00;
}
<form id="form">
<div>
<label for="username">Username</label>
<input name="username" type="text" placeholder="Username" pattern="[a-z]{1,15}" id="username" value="12345">
</div>
</form>

How to remove specific section/snippet from a string in Python

I have a PyQt stylesheet given as a str type where I insert it into app.setStyleSheet() to change CSS properties. I want to remove a specific section of code within this string, specifically this section:
QSlider::groove:horizontal {
background: #32414B;
border: 1px solid #32414B;
height: 4px;
margin: 0px;
border-radius: 4px;
}
This is the entire stylesheet string
stylesheet = '''
/* QWidget ---------------------------------------------------------------- */
QWidget {
background-color: #19232D;
border: 0px solid #32414B;
padding: 0px;
color: #F0F0F0;
selection-background-color: #1464A0;
selection-color: #F0F0F0;
}
QWidget:disabled {
background-color: #19232D;
color: #787878;
selection-background-color: #14506E;
selection-color: #787878;
}
QWidget:item:selected {
background-color: #1464A0;
}
QWidget:item:hover {
background-color: #148CD2;
color: #32414B;
}
/* QMainWindow ------------------------------------------------------------ */
/* This adjusts the splitter in the dock widget, not qsplitter */
QMainWindow::separator {
background-color: #32414B;
border: 0 solid #19232D;
spacing: 0;
padding: 2px;
}
QMainWindow::separator:hover {
background-color: #505F69;
border: 0px solid #148CD2;
}
QMainWindow::separator:horizontal {
width: 5px;
margin-top: 2px;
margin-bottom: 2px;
image: url(:/qss_icons/rc/Vsepartoolbar.png);
}
QMainWindow::separator:vertical {
height: 5px;
margin-left: 2px;
margin-right: 2px;
image: url(:/qss_icons/rc/Hsepartoolbar.png);
}
/* QToolTip --------------------------------------------------------------- */
QToolTip {
background-color: #148CD2;
border: 1px solid #19232D;
color: #19232D;
padding: 0; /*remove padding, for fix combo box tooltip*/
opacity: 230; /*reducing transparency to read better*/
}
/* QStatusBar ------------------------------------------------------------- */
QStatusBar {
border: 1px solid #32414B;
background: #32414B; /*fixes spyder #9120,#9121*/
}
QStatusBar QToolTip {
background-color: #148CD2;
border: 1px solid #19232D;
color: #19232D;
padding: 0; /*remove padding, for fix combo box tooltip*/
opacity: 230; /*reducing transparency to read better*/
}
QStatusBar QLabel {
background-color: transparent; /*fixes spyder #9120,#9121*/
}
/* QCheckBox -------------------------------------------------------------- */
QCheckBox {
background-color: #19232D;
color: #F0F0F0;
spacing: 4px;
outline: none;
padding-top: 4px;
padding-bottom: 4px;
}
QCheckBox:focus {
border: none;
}
QCheckBox QWidget:disabled {
background-color: #19232D;
color: #787878;
}
QCheckBox::indicator {
margin-left: 4px;
width: 16px;
height: 16px;
}
QCheckBox::indicator:unchecked {
image: url(:/qss_icons/rc/checkbox_unchecked.png);
}
QCheckBox::indicator:unchecked:hover,
QCheckBox::indicator:unchecked:focus,
QCheckBox::indicator:unchecked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_unchecked_focus.png);
}
QCheckBox::indicator:unchecked:disabled {
image: url(:/qss_icons/rc/checkbox_unchecked_disabled.png);
}
QCheckBox::indicator:checked {
image: url(:/qss_icons/rc/checkbox_checked.png);
}
QCheckBox::indicator:checked:hover,
QCheckBox::indicator:checked:focus,
QCheckBox::indicator:checked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_checked_focus.png);
}
QCheckBox::indicator:checked:disabled{
image: url(:/qss_icons/rc/checkbox_checked_disabled.png);
}
QCheckBox::indicator:indeterminate {
image: url(:/qss_icons/rc/checkbox_indeterminate.png);
}
QCheckBox::indicator:indeterminate:disabled {
image: url(:/qss_icons/rc/checkbox_indeterminate_disabled.png);
}
QCheckBox::indicator:indeterminate:focus,
QCheckBox::indicator:indeterminate:hover,
QCheckBox::indicator:indeterminate:pressed {
image: url(:/qss_icons/rc/checkbox_indeterminate_focus.png);
}
/* QGroupBox -------------------------------------------------------------- */
QGroupBox {
font-weight: bold;
border: 1px solid #32414B;
border-radius: 4px;
padding: 4px;
margin-top: 16px;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top left;
left: 3px;
padding-left: 3px;
padding-right: 5px;
padding-top: 8px;
padding-bottom: 16px;
}
QGroupBox::indicator {
margin-left: 4px;
width: 16px;
height: 16px;
}
QGroupBox::indicator {
margin-left: 2px;
}
QGroupBox::indicator:unchecked:hover,
QGroupBox::indicator:unchecked:focus,
QGroupBox::indicator:unchecked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_unchecked_focus.png);
}
QGroupBox::indicator:checked:hover,
QGroupBox::indicator:checked:focus,
QGroupBox::indicator:checked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_checked_focus.png);
}
QGroupBox::indicator:checked:disabled {
image: url(:/qss_icons/rc/checkbox_checked_disabled.png);
}
QGroupBox::indicator:unchecked:disabled {
image: url(:/qss_icons/rc/checkbox_unchecked_disabled.png);
}
/* QRadioButton ----------------------------------------------------------- */
QRadioButton {
background-color: #19232D;
color: #F0F0F0;
spacing: 0;
padding: 0;
border: none;
outline: none;
}
QRadioButton:focus {
border: none;
}
QRadioButton:disabled {
background-color: #19232D;
color: #787878;
border: none;
outline: none;
}
QRadioButton QWidget {
background-color: #19232D;
color: #F0F0F0;
spacing: 0px;
padding: 0px;
outline: none;
border: none;
}
QRadioButton::indicator {
border: none;
outline: none;
margin-bottom: 2px;
width: 25px;
height: 25px;
}
QRadioButton::indicator:unchecked {
image: url(:/qss_icons/rc/radio_unchecked.png);
}
QRadioButton::indicator:unchecked:hover,
QRadioButton::indicator:unchecked:focus,
QRadioButton::indicator:unchecked:pressed {
border: none;
outline: none;
image: url(:/qss_icons/rc/radio_unchecked_focus.png);
}
QRadioButton::indicator:checked {
border: none;
outline: none;
image: url(:/qss_icons/rc/radio_checked.png);
}
QRadioButton::indicator:checked:hover,
QRadioButton::indicator:checked:focus,
QRadioButton::indicator:checked:pressed {
border: none;
outline: none;
image: url(:/qss_icons/rc/radio_checked_focus.png);
}
QRadioButton::indicator:checked:disabled {
outline: none;
image: url(:/qss_icons/rc/radio_checked_disabled.png);
}
QRadioButton::indicator:unchecked:disabled {
image: url(:/qss_icons/rc/radio_unchecked_disabled.png);
}
/* QMenuBar --------------------------------------------------------------- */
QMenuBar {
background-color: #32414B;
padding: 2px;
border: 1px solid #19232D;
color: #F0F0F0;
}
QMenuBar:focus {
border: 1px solid #148CD2;
}
QMenuBar::item {
background: transparent;
padding: 4px;
}
QMenuBar::item:selected {
padding: 4px;
background: transparent;
border: 0px solid #32414B;
}
QMenuBar::item:pressed {
padding: 4px;
border: 0px solid #32414B;
background-color: #148CD2;
color: #F0F0F0;
margin-bottom: 0px;
padding-bottom: 0px;
}
/* QMenu ------------------------------------------------------------------ */
QMenu {
border: 0px solid #32414B;
color: #F0F0F0;
margin: 0px;
}
QMenu::separator {
height: 2px;
background-color: #505F69;
color: #F0F0F0;
padding-left: 4px;
margin-left: 2px;
margin-right: 2px;
}
QMenu::icon {
margin: 0px;
padding-left:4px;
}
QMenu::item {
padding: 4px 24px 4px 24px;
border: 1px transparent #32414B; /* reserve space for selection border */
}
QMenu::item:selected {
color: #F0F0F0;
}
QMenu::indicator {
width: 12px;
height: 12px;
padding-left:6px;
}
/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
image: url(:/qss_icons/rc/checkbox_unchecked.png);
}
QMenu::indicator:non-exclusive:unchecked:selected {
image: url(:/qss_icons/rc/checkbox_unchecked_disabled.png);
}
QMenu::indicator:non-exclusive:checked {
image: url(:/qss_icons/rc/checkbox_checked.png);
}
QMenu::indicator:non-exclusive:checked:selected {
image: url(:/qss_icons/rc/checkbox_checked_disabled.png);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
image: url(:/qss_icons/rc/radio_unchecked.png);
}
QMenu::indicator:exclusive:unchecked:selected {
image: url(:/qss_icons/rc/radio_unchecked_disabled.png);
}
QMenu::indicator:exclusive:checked {
image: url(:/qss_icons/rc/radio_checked.png);
}
QMenu::indicator:exclusive:checked:selected {
image: url(:/qss_icons/rc/radio_checked_disabled.png);
}
QMenu::right-arrow {
margin: 5px;
image: url(:/qss_icons/rc/right_arrow.png)
}
/* QAbstractItemView ------------------------------------------------------ */
QAbstractItemView {
alternate-background-color: #19232D;
color: #F0F0F0;
border: 1px solid #32414B;
border-radius: 4px;
}
QAbstractItemView QLineEdit {
padding: 2px;
}
/* QAbstractScrollArea ---------------------------------------------------- */
QAbstractScrollArea {
background-color: #19232D;
border: 1px solid #32414B;
border-radius: 4px;
padding: 4px;
color: #F0F0F0;
}
QAbstractScrollArea:disabled {
color: #787878;
}
/* QScrollArea ------------------------------------------------------------ */
QScrollArea QWidget QWidget:disabled {
background-color: #19232D;
}
/* QScrollBar ------------------------------------------------------------- */
QScrollBar:horizontal {
height: 16px;
margin: 2px 16px 2px 16px;
border: 1px solid #32414B;
border-radius: 4px;
background-color: #19232D;
}
QScrollBar::handle:horizontal {
background-color: #787878;
border: 1px solid #32414B;
border-radius: 4px;
min-width: 8px;
}
QScrollBar::handle:horizontal:hover {
background-color: #148CD2;
border: 1px solid #148CD2;
border-radius: 4px;
min-width: 8px;
}
QScrollBar::add-line:horizontal {
margin: 0px 0px 0px 0px;
border-image: url(:/qss_icons/rc/right_arrow_disabled.png);
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
margin: 0px 3px 0px 3px;
border-image: url(:/qss_icons/rc/left_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,
QScrollBar::add-line:horizontal:on {
border-image: url(:/qss_icons/rc/right_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover,
QScrollBar::sub-line:horizontal:on {
border-image: url(:/qss_icons/rc/left_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal,
QScrollBar::down-arrow:horizontal {
background: none;
}
QScrollBar::add-page:horizontal,
QScrollBar::sub-page:horizontal {
background: none;
}
QScrollBar:vertical {
background-color: #19232D;
width: 16px;
margin: 16px 2px 16px 2px;
border: 1px solid #32414B;
border-radius: 4px;
}
QScrollBar::handle:vertical {
background-color: #787878;
border: 1px solid #32414B;
min-height: 8px;
border-radius: 4px;
}
QScrollBar::handle:vertical:hover {
background-color: #148CD2;
border: 1px solid #148CD2;
border-radius: 4px;
min-height: 8px;
}
QScrollBar::sub-line:vertical {
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/up_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical {
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/down_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,
QScrollBar::sub-line:vertical:on {
border-image: url(:/qss_icons/rc/up_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover,
QScrollBar::add-line:vertical:on {
border-image: url(:/qss_icons/rc/down_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical,
QScrollBar::down-arrow:vertical {
background: none;
}
QScrollBar::add-page:vertical,
QScrollBar::sub-page:vertical {
background: none;
}
/* QTextEdit--------------------------------------------------------------- */
QTextEdit {
background-color: #19232D;
color: #F0F0F0;
border: 1px solid #32414B;
}
QTextEdit:hover {
border: 1px solid #148CD2;
color: #F0F0F0;
}
QTextEdit:selected {
background: #1464A0;
color: #32414B;
}
/* QPlainTextEdit --------------------------------------------------------- */
QPlainTextEdit {
background-color: #19232D;
color: #F0F0F0;
border-radius: 4px;
border: 1px solid #32414B;
}
QPlainTextEdit:hover {
border: 1px solid #148CD2;
color: #F0F0F0;
}
QPlainTextEdit:selected {
background: #1464A0;
color: #32414B;
}
/* QSizeGrip --------------------------------------------------------------- */
QSizeGrip {
image: url(:/qss_icons/rc/sizegrip.png);
width: 12px;
height: 12px;
}
/* QStackedWidget --------------------------------------------------------- */
QStackedWidget {
padding: 4px;
border: 1px solid #32414B;
border: 1px solid #19232D;
}
/* QToolBar --------------------------------------------------------------- */
QToolBar {
background-color: #32414B;
border-bottom: 1px solid #19232D;
padding: 2px;
font-weight: bold;
}
QToolBar QToolButton{
background-color: #32414B;
}
QToolBar::handle:horizontal {
width: 6px;
image: url(:/qss_icons/rc/Hmovetoolbar.png);
}
QToolBar::handle:vertical {
height: 6px;
image: url(:/qss_icons/rc/Vmovetoolbar.png);
}
QToolBar::separator:horizontal {
width: 3px;
image: url(:/qss_icons/rc/Hsepartoolbar.png);
}
QToolBar::separator:vertical {
height: 3px;
image: url(:/qss_icons/rc/Vsepartoolbar.png);
}
QToolButton#qt_toolbar_ext_button {
background: #32414B;
border: 0px;
color: #F0F0F0;
image: url(:/qss_icons/rc/right_arrow.png);
}
/* QAbstractSpinBox ------------------------------------------------------- */
QAbstractSpinBox {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
padding-top: 2px; /* This fix 103, 111*/
padding-bottom: 2px; /* This fix 103, 111*/
padding-left: 4px;
padding-right: 4px;
border-radius: 4px;
/* min-width: 5px; removed to fix 109 */
}
QAbstractSpinBox:up-button {
background-color: transparent #19232D;
subcontrol-origin: border;
subcontrol-position: top right;
border-left: 1px solid #32414B;
margin: 1px;
}
QAbstractSpinBox::up-arrow,
QAbstractSpinBox::up-arrow:disabled,
QAbstractSpinBox::up-arrow:off {
image: url(:/qss_icons/rc/up_arrow_disabled.png);
width: 9px;
height: 9px;
}
QAbstractSpinBox::up-arrow:hover {
image: url(:/qss_icons/rc/up_arrow.png);
}
QAbstractSpinBox:down-button {
background-color: transparent #19232D;
subcontrol-origin: border;
subcontrol-position: bottom right;
border-left: 1px solid #32414B;
margin: 1px;
}
QAbstractSpinBox::down-arrow,
QAbstractSpinBox::down-arrow:disabled,
QAbstractSpinBox::down-arrow:off {
image: url(:/qss_icons/rc/down_arrow_disabled.png);
width: 9px;
height: 9px;
}
QAbstractSpinBox::down-arrow:hover {
image: url(:/qss_icons/rc/down_arrow.png);
}
QAbstractSpinBox:hover{
border: 1px solid #148CD2;
color: #F0F0F0;
}
QAbstractSpinBox:selected {
background: #1464A0;
color: #32414B;
}
/* ------------------------------------------------------------------------ */
/* DISPLAYS --------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */
/* QLabel ----------------------------------------------------------------- */
QLabel {
background-color: #19232D;
border: 0px solid #32414B;
padding: 2px;
margin: 0px;
color: #F0F0F0
}
QLabel::disabled {
background-color: #19232D;
border: 0px solid #32414B;
color: #787878;
}
/* QTextBrowser ----------------------------------------------------------- */
QTextBrowser {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
}
QTextBrowser:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
}
QTextBrowser:hover,
QTextBrowser:!hover,
QTextBrowser::selected,
QTextBrowser::pressed {
border: 1px solid #32414B;
}
/* QGraphicsView --------------------------------------------------------- */
QGraphicsView {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
}
QGraphicsView:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
}
QGraphicsView:hover,
QGraphicsView:!hover,
QGraphicsView::selected,
QGraphicsView::pressed {
border: 1px solid #32414B;
}
/* QCalendarWidget -------------------------------------------------------- */
QCalendarWidget {
border: 1px solid #32414B;
border-radius: 4px;
}
QCalendarWidget:disabled {
background-color: #19232D;
color: #787878;
}
/* QLCDNumber ------------------------------------------------------------- */
QLCDNumber {
background-color: #19232D;
color: #F0F0F0;
}
QLCDNumber:disabled {
background-color: #19232D;
color: #787878;
}
/* QProgressBar ----------------------------------------------------------- */
QProgressBar {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
text-align: center;
}
QProgressBar:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
text-align: center;
}
QProgressBar::chunk {
background-color: #1464A0;
color: #19232D;
border-radius: 4px;
}
QProgressBar::chunk:disabled {
background-color: #14506E;
color: #787878;
border-radius: 4px;
}
/* ------------------------------------------------------------------------ */
/* BUTTONS ---------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */
/* QPushButton ------------------------------------------------------------ */
QPushButton {
background-color: #505F69 ;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
padding: 3px;
outline: none;
}
QPushButton:disabled {
background-color: #32414B;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
padding: 3px;
}
QPushButton:checked {
background-color: #32414B;
border: 1px solid #32414B;
border-radius: 4px;
padding: 3px;
outline: none;
}
QPushButton:checked:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
padding: 3px;
outline: none;
}
QPushButton::menu-indicator {
subcontrol-origin: padding;
subcontrol-position: bottom right;
bottom: 4px;
}
QPushButton:pressed {
background-color: #19232D;
border: 1px solid #19232D;
}
QPushButton:hover,
QPushButton:checked:hover{
border: 1px solid #148CD2;
color: #F0F0F0;
}
QPushButton:pressed:hover{
border: 1px solid #1464A0;
}
QPushButton:selected,
QPushButton:checked:selected{
background: #1464A0;
color: #32414B;
}
/* QToolButton ------------------------------------------------------------ */
QToolButton {
background-color: transparent;
border: 1px solid #32414B;
border-radius: 4px;
margin: 0px;
padding: 2px;
}
QToolButton:checked {
background-color: #19232D;
border: 1px solid #19232D;
}
QToolButton:pressed {
background-color: #19232D;
border: 1px solid #19232D;
}
QToolButton:disabled {
border: 1px solid #32414B;
}
QToolButton:hover,
QToolButton:checked:hover{
border: 1px solid #148CD2;
}
QToolButton:pressed:hover{
border: 1px solid #1464A0;
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton[popupMode="1"] {
padding: 2px;
padding-right: 12px; /* only for MenuButtonPopup */
border: 1px solid #32414B; /* make way for the popup button */
border-radius: 4px;
}
/* The subcontrol below is used only in the InstantPopup or DelayedPopup mode */
QToolButton[popupMode="2"] {
padding: 2px;
padding-right: 12px; /* only for InstantPopup */
border: 1px solid #32414B; /* make way for the popup button */
}
QToolButton::menu-button {
padding: 2px;
border-radius: 4px;
border: 1px solid #32414B;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
outline: none;
}
QToolButton::menu-button:hover,
QToolButton::menu-button:checked:hover {
border: 1px solid #148CD2;
}
QToolButton::menu-indicator {
image: url(:/qss_icons/rc/down_arrow.png);
top: -8px; /* shift it a bit */
left: -4px; /* shift it a bit */
}
QToolButton::menu-arrow {
image: url(:/qss_icons/rc/down_arrow.png);
}
QToolButton::menu-arrow:open {
border: 1px solid #32414B;
}
/* QCommandLinkButton ----------------------------------------------------- */
QCommandLinkButton {
background-color: transparent;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
padding: 0px;
margin: 0px;
}
QCommandLinkButton:disabled {
background-color: transparent;
color: #787878;
}
/* ------------------------------------------------------------------------ */
/* INPUTS - NO FIELDS ----------------------------------------------------- */
/* ------------------------------------------------------------------------ */
/* QCombobox -------------------------------------------------------------- */
QComboBox {
border: 1px solid #32414B;
border-radius: 4px;
selection-background-color: #1464A0;
padding-top: 2px; /* This fix #103, #111*/
padding-bottom: 2px; /* This fix #103, #111*/
padding-left: 4px;
padding-right: 4px;
/* min-width: 75px; removed to fix 109 */
}
QComboBox:disabled {
background-color: #19232D;
color: #787878;
}
QComboBox:hover{
border: 1px solid #148CD2;
}
QComboBox:on {
selection-background-color: #19232D;
}
QComboBox QAbstractItemView {
background-color: #19232D;
border-radius: 4px;
border: 1px solid #32414B;
selection-color: #148CD2;
selection-background-color: #32414B;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 20px;
border-left-width: 0px;
border-left-color: #32414B;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
image: url(:/qss_icons/rc/down_arrow_disabled.png);
}
QComboBox::down-arrow:on,
QComboBox::down-arrow:hover,
QComboBox::down-arrow:focus {
image: url(:/qss_icons/rc/down_arrow.png);
}
/* QSlider ---------------------------------------------------------------- */
QSlider:disabled {
background: #19232D;
}
QSlider:focus {
border: none;
}
QSlider::groove:horizontal {
background: #32414B;
border: 1px solid #32414B;
height: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: #1464A0;
border: 1px solid #32414B;
height: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:horizontal:disabled {
background: #14506E;
}
QSlider::handle:horizontal {
background: #787878;
border: 1px solid #32414B;
width: 8px;
height: 8px;
margin: -8px 0;
border-radius: 4px;
}
QSlider::handle:horizontal:hover {
background: #148CD2;
border: 1px solid #148CD2;
}
QSlider::groove:vertical {
background: #32414B;
border: 1px solid #32414B;
width: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:vertical {
background: #1464A0;
border: 1px solid #32414B;
width: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:vertical:disabled {
background: #14506E;
}
QSlider::handle:vertical {
background: #787878;
border: 1px solid #32414B;
width: 8px;
height: 8px;
margin: 0 -8px;
border-radius: 4px;
}
QSlider::handle:vertical:hover {
background: #148CD2;
border: 1px solid #148CD2;
}
/* QLine ------------------------------------------------------------------ */
QLineEdit {
background-color: #19232D;
padding-top: 2px; /* This QLineEdit fix 103, 111 */
padding-bottom: 2px; /* This QLineEdit fix 103, 111 */
padding-left: 4px;
padding-right: 4px;
border-style: solid;
border: 1px solid #32414B;
border-radius: 4px;
color: #F0F0F0;
}
QLineEdit:disabled {
background-color: #19232D;
color: #787878;
}
QLineEdit:hover{
border: 1px solid #148CD2;
color: #F0F0F0;
}
QLineEdit:selected{
background: #1464A0;
color: #32414B;
}
/* QTabWiget -------------------------------------------------------------- */
QTabWidget {
padding: 2px;
selection-background-color: #32414B;
}
QTabWidget QFrame{
border: 1px solid #32414B;
}
QTabWidget::pane {
border: 1px solid #32414B;
border-radius: 4px;
padding: 2px;
margin: 0px;
}
QTabWidget::pane:selected {
background-color: #32414B;
border: 1px solid #1464A0;
}
/* QTabBar ---------------------------------------------------------------- */
QTabBar {
qproperty-drawBase: 0;
border-radius: 4px;
margin: 0px;
padding: 2px;
border: 0;
/* left: 5px; move to the right by 5px - removed for fix */
}
QTabBar::close-button {
border: 0;
margin: 2px;
padding: 0;
image: url(:/qss_icons/rc/close.png);
}
QTabBar::close-button:hover {
image: url(:/qss_icons/rc/close-hover.png);
}
QTabBar::close-button:pressed {
image: url(:/qss_icons/rc/close-pressed.png);
}
/* QTabBar::tab - selected ----------------------------------------------- */
QTabBar::tab:top:selected:disabled {
border-bottom: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
QTabBar::tab:bottom:selected:disabled {
border-top: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
QTabBar::tab:left:selected:disabled {
border-left: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
QTabBar::tab:right:selected:disabled {
border-right: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
/* QTabBar::tab - !selected and disabled ---------------------------------- */
QTabBar::tab:top:!selected:disabled {
border-bottom: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
QTabBar::tab:bottom:!selected:disabled {
border-top: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
QTabBar::tab:left:!selected:disabled {
border-right: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
QTabBar::tab:right:!selected:disabled {
border-left: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
'''
Since I'm not reading from a file, I can't use readline(). I already tried to use a for loop to iterate through and check if QSlider::groove:horizontal is inside but I can't figure out how to remove the remaining lines. How can I remove this snippet of CSS and return the other untouched CSS as a str?
stylesheet = 'the really big CSS stylesheet string'
def remove_qslider_tick_bug():
# Remove snippet
return filtered_stylesheet

You can use .find to get the location of your substring, then Python allow string slicing the same as slicing lists. So if you want to do this all yourself you could do something like:
def snip_outside_str(text,start_text,end_text):
start = text.find(start_text)
end = text[start:].find(end_text) #fails if start_text=end_text
end = end + start + len(end_text)
return text[:start]+ text[end:]
stylesheet = 'the really big /*CSS*/ stylesheet string'
def remove_qslider_tick_bug(my_str, start_str='/*', end_str='*/'):
while my_str.find(start_str) != -1:
my_str = snip_outside_str(my_str, start_str, end_str)
return my_str
WARNING: This code is just an example of how to tackle the problem, it's going to produce some weird results when start_str=end_str or when end_str doesn't exist. So if you want to work with CSS there are libraries that can do that for you. For example: https://tinycss.readthedocs.io/en/latest/
(Disclaimer, I'm not a web guy and I've never used tinycss in anger)

flask project- css not pulling in colors

I'm new to web development in python. I'm working on converting a project from php over to flask. I followed the instructions in this post (Application not picking up .css file (flask/python)), and now my text is centered, so I know that I'm linked to my stylesheet. But I'm not getting any colors on my pages. Not sure what I did wrong. Here is my css file:
body {
background-color: #003300;
text-align: center;
}
.greenones{
color: #003300;
text-align: center;
}
.redones{
color: #dd164e;
text-align: center;
}
.yellowones{
color: #CA9800;
text-align: center;
}
.orangeones{
color: #ff6600;
text-align: center;
}
.centerMe{
text-align: center;
}
.dropdown-toggle{
color: #CA9800;
}
.yellowleft{
color: #CA9800;
text-align: left;
}
.leagueguide{
color: #CA9800;
text-align: left;
list-style-type: upper-roman;
}
.leagueguide-indent{
color: #CA9800;
text-align: left;
list-style-type: upper-alpha;
}
.leagueguide-decimal{
color: #CA9800;
text-align: left;
list-style-type: decimal;
}
div.well {
font-weight: bold;
}
a {
font-weight: bold;
}
img.align-left {
float: left;
margin-right: 10 px;
text-align: left;
}
label.yellow, div.yellow{
color: #CA9800;
}
label.logs{
color: #CA9800;
text-align: right;
padding: 10px 10px 10px 10px;
}
table.statsTable{
text-align: center;
color: #003300;
padding: 3px;
}
td.cen {
text-align: center;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
editing my question: my css file is not being found. I'm getting this error:
"GET /static/ibc.css HTTP/1.1" 304 -
In my layout.html file, I have this line:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='ibc.css') }}">
I created a static folder underneath the app folder (where app.py lives), and placed the .css file in there. This obviously is not the correct location...

I can answer my own question. I needed to include the link to the stylesheet in each .html file, not just the layout.html. Once I did that, the css started working.

htmlparse doesn't clear <style>

i have a problem with my html parser. I convert emails filled with html code into nice clean text, except for the "< style > content < /style >" part, which it completely ignores and i have no clue as to what i did wrong:
# Remove any HTML code from our raw content
htmlparse = re.sub(r'<.*?>', '', clean) \
.replace(" ", '') \
.replace("é", 'é') \
.replace("è", 'è') \
clean_email = htmlparse
what it actually should delete is:
<style> .MailHeader { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; } .DataHeader { font-family: Tahoma; font-size: 8pt; color: #666666; text-decoration: none; padding-left: 15px; padding-right: 15px; border: solid 1px #E0E0E0; vertical-align: text-top; } .Data { font: normal 8pt Tahoma,Verdana; padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; background: #F9F9F9; font-size: 8pt; color: #666666; height: 20px !important; } .GridHeader { font: normal 8pt Tahoma,Verdana; padding-left: 6px; background: #DAEBFF; height: 20px; } .DataRow { padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; font-size: 8pt; color: #003399; } .GridRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: transparent; height: 20px !important; min-height: 1%; } .GridAltRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: #F9F9F9; height: 20px !important; min-height: 1%; } .li { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-left: 5px; } .TableHeader { font-family: Tahoma,calibri,verdana; font-size: 8pt; font-weight: bold; height: 22px; color: #003399; border: solid 1px #E0E0E0; border-collapse: collapse; padding-left: 5px; padding-right: 5px; background-color: #BBD8FF; } .TableSubHeader { font: normal 8pt Tahoma, Verdana, Sans-Serif; vertical-align: middle; padding-left: 3px; font-weight: bold; color: #666666; } .Separator { background-repeat: repeat-x; background-position: center; background: #666666; } .tableDetail { padding: 0 0 0 0; spacing: 0 0 0 0; border-collapse: collapse; width: 750px; margin-left: 5px; border: solid 1px #E0E0E0; } .style1 { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; height: 18px; } </style>
What it actually does is delete style and /style but leaves the whole garbage of the stylesheet in the parsed file...
.MailHeader { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; } .DataHeader { font-family: Tahoma; font-size: 8pt; color: #666666; text-decoration: none; padding-left: 15px; padding-right: 15px; border: solid 1px #E0E0E0; vertical-align: text-top; } .Data { font: normal 8pt Tahoma,Verdana; padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; background: #F9F9F9; font-size: 8pt; color: #666666; height: 20px !important; } .GridHeader { font: normal 8pt Tahoma,Verdana; padding-left: 6px; background: #DAEBFF; height: 20px; } .DataRow { padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; font-size: 8pt; color: #003399; } .GridRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: transparent; height: 20px !important; min-height: 1%; } .GridAltRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: #F9F9F9; height: 20px !important; min-height: 1%; } .li { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-left: 5px; } .TableHeader { font-family: Tahoma,calibri,verdana; font-size: 8pt; font-weight: bold; height: 22px; color: #003399; border: solid 1px #E0E0E0; border-collapse: collapse; padding-left: 5px; padding-right: 5px; background-color: #BBD8FF; } .TableSubHeader { font: normal 8pt Tahoma, Verdana, Sans-Serif; vertical-align: middle; padding-left: 3px; font-weight: bold; color: #666666; } .Separator { background-repeat: repeat-x; background-position: center; background: #666666; } .tableDetail { padding: 0 0 0 0; spacing: 0 0 0 0; border-collapse: collapse; width: 750px; margin-left: 5px; border: solid 1px #E0E0E0; } .style1 { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; height: 18px; } Hello, this is a test mail.
Can anyone help me?
thank you guys in advance,
regards

First remove the style itself, and then in second pass, do what you want to do.
import re
some = """
<style>.MailHeader { font: normal 10pt Tahoma, Verdana, Sans-Serif;
vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; }
.DataHeader { font-family: Tahoma; font-size: 8pt; color: #666666; text-decoration: none;
padding-left: 15px; padding-right: 15px; border: solid 1px #E0E0E0; vertical-align: text-top; }
.Data { font: normal 8pt Tahoma,Verdana; padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0;
\ background: #F9F9F9; font-size: 8pt; color: #666666; height: 20px !important; }
.GridHeader { font: normal 8pt Tahoma,Verdana; padding-left: 6px; background: #DAEBFF; height: 20px; }
.DataRow { padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; font-size: 8pt; color: #003399; }
.GridRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: transparent;
height: 20px !important; min-height: 1%; } .GridAltRow { font: normal 8pt Tahoma, Verdana, Sans-serif;
padding-left: 6px; background: #F9F9F9; height: 20px !important; min-height: 1%; }
.li { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-left: 5px; }
.TableHeader { font-family: Tahoma,calibri,verdana; font-size: 8pt; font-weight: bold; height: 22px;
color: #003399; border: solid 1px #E0E0E0; border-collapse: collapse; padding-left: 5px;
padding-right: 5px; background-color: #BBD8FF; }
.TableSubHeader { font: normal 8pt Tahoma, Verdana, Sans-Serif;
vertical-align: middle; padding-left: 3px; font-weight: bold; color: #666666; }
.Separator { background-repeat: repeat-x; background-position: center; background: #666666; }
.tableDetail { padding: 0 0 0 0;
spacing: 0 0 0 0; border-collapse: collapse; width: 750px; margin-left: 5px; border: solid 1px #E0E0E0; }
.style1 { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom:
0px; padding-top: 0px; spacing: 0px 0px 0px 0px; height: 18px; }
</style>
<h1>Hello, this is a test mail.</h1>
"""
some1 = re.sub(r'<style>.*</style>', '', some, flags=re.DOTALL)
print some1
Result :
I have no name!#sla-334:~/stack_o$ python stack_o_html.py
<h1>Hello, this is a test mail.</h1>
Now, do what you want to do with this html.

I kinda fixed it myself by reparsing trough the parsed text and using this as parameters
cleaner = re.sub(r'{.*}', '', clean_email)\
.replace(".MailHeader", '') \
Ill try out your solutions