Related
I'm consuming messages from Kafka in JSON format. I get the name and surname from the Kafka message. I want to insert name and surname variables in the HTML email template to send emails to our customers with their names and surnames. I tried formatting but there are a lot of curly brackets. Is there a way to do it?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .btn table {
width: 100% !important;
}
table.body .btn a {
width: 100% !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body>
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
I tried this code:
with open("index.html", "w") as f:
f.write("<html><body>")
f.write("<h1>Header</h1>")
input = "name surname"
f.write("<p>{}</p>".format(input))
f.write("</body></html>")
But this code overwrites everything.
Start with the template HTML, and inject your desired HTML into it
For example,
Step 1. Read the template html into a string, such as template.
Step 2. Ensure the template contains a unique piece of text that won't occur more than once. In your case perhaps the <span class="preheader" ... /span>
Step 3. Replace that text with your desired text:
output = template.replace('<span class="preheader"> blah blah</span>', "<p>{}</p>".format(input))
Step 4. Output your updated HTML
with open("index_output.html", "w") as f:
f.write(output)
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.
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)
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.
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