Is there a way to get a dark theme for the Perforce P4V Helix GUI on Ubuntu Linux 16.04 LTS?
Another dark style:
LightweightTextView
{
background-color: /*#ffffff*/ #222222;
color: #cccccc;
}
/*
Modal lists can't figure out focus well
but we can hardcode them safely
*/
DefinitionTree::branch:selected {
background-color: /*#0088CC*/ #006600;
}
DefinitionTree::branch:selected:hover {
background-color: /*#0085C7*/ #008800;
}
DefinitionTree::item:selected {
background-color: /*#0088CC*/ #006600;
}
DefinitionTree::item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
TFilterView::branch:selected {
background-color: /*#0088CC*/ #006600;
}
TFilterView::branch:selected:hover {
background-color: /*#0085C7*/ #008800;
}
TFilterView::item:selected {
background-color: /*#0088CC*/ #006600;
}
TFilterView::item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
UIPreferencesDialog QTreeWidget::branch:selected {
background-color: /*#0088CC*/ #006600;
}
UIPreferencesDialog QTreeWidget::branch:selected:hover {
background-color: /*#0085C7*/ #008800;
}
UIPreferencesDialog QTreeWidget::item:selected {
background-color: /*#0088CC*/ #006600;
}
UIPreferencesDialog QTreeWidget::item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
QTreeView::branch:selected {
background-color: /*#0088CC*/ #006600;
}
QTreeView::branch:selected:hover {
background-color: /*#0085C7*/ #008800;
}
QTreeView::item:selected {
background-color: /*#0088CC*/ #006600;
}
QTreeView::item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
QTableWidget::item:selected {
background-color: /*#0088CC*/ #006600;
}
QTableWidget:item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
ConnectionPane::item:selected {
background-color: /*#0088CC*/ #006600;
}
ConnectionPane:item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
QAbstractItemView {
background-color: /*#ffffff*/ #222222;
color: /*#000000*/ #cccccc;
}
QAbstractItemView[hasFocus="false"]::item:selected {
background-color: #AAAAAA;
}
QAbstractItemView[hasFocus="false"]::item:selected:hover {
background-color: #999999;
}
QAbstractItemView[hasFocus="true"]::item:selected {
background-color: /*#0088CC*/ #006600;
}
QAbstractItemView[hasFocus="true"]::item:selected:hover {
background-color: /*#0085C7*/ #008800;
}
QAbstractItemView[hasFocus="false"]::branch:selected {
background-color: #AAAAAA;
}
QAbstractItemView[hasFocus="false"]::branch:selected:hover {
background-color: #999999;
}
QAbstractItemView[hasFocus="true"]::branch:selected {
background-color: /*#0088CC*/ #006600;
}
QAbstractItemView[hasFocus="true"]::branch:selected:hover {
background-color: /*#0085C7*/ #008800;
}
QAbstractItemView::item:hover {
background: /*#F8F8F8*/ #666666;
}
QAbstractItemView::branch:hover {
background: /*#F8F8F8*/ #666666;
}
QAbstractItemView::branch:has-children:!has-siblings:closed,
QAbstractItemView::branch:closed:has-children:has-siblings {
border-image: none;
image: url(:/directory_collapsed.png);
}
QAbstractItemView::branch:open:has-children:!has-siblings,
QAbstractItemView::branch:open:has-children:has-siblings {
border-image: none;
image: url(:/directory_expanded.png);
}
QRadioButton {
color: /*#000000*/ #cccccc;
}
QCheckBox {
color: /*#000000*/ #cccccc;
}
/*
QCheckBox::indicator:unchecked {
background-color: #222222;
}
QCheckBox::indicator:checked {
background-color: #cccccc;
}
*/
QComboBox
{
selection-background-color: #5091bc;
background-color: /*#ffffff*/ #222222;
}
QComboBox:hover
{
background-color: /*#ffffff*/ #222222;
}
QComboBox:on
{
background-color: #777777;
selection-background-color: #777777;
}
QComboBox QAbstractItemView
{
background-color: /*#ffffff*/ #222222;
}
QHeaderView::section {
background-color: /*#e2edf5*/ #336633;
color: /*#5e707d*/ #cccccc;
padding: 0.125em;
border-top: 0em;
border-bottom: 0em;
border-left: 0em;
border-right: 0.062em solid #c2cfd8;
/* font-size: 11px; */
}
QLineEdit {
selection-background-color: #9ABFD9;
background-color: /*#ffffff*/ #222222;
color: /*#000000*/ #cccccc;
}
MostRecentCombo {
color: /*#000000*/ #cccccc;
}
QComboBox {
color: /*#000000*/ #cccccc;
}
QLineEdit[readOnly="true"]
{
color: /*#000000*/ #cccccc;
background: transparent;
}
QMainWindow {
background-color: #222222;
color: #cccccc;
}
QMainWindow::separator {
width: 0.062em;
height: 0.062em;
}
QMenuBar {
background-color: /*#f0f0f0*/ #202020;
selection-background-color: /*#9ABFD9*/ #606060;
color: /*#000000*/ #cccccc;
}
QMenu {
background-color: /*#ffffff*/ #202020; /* sets background of the menu */
border: 0.062em solid /*#999999*/ #666666;
padding-top: 0.31em;
}
QMenu::item {
/* sets background of menu item. set this to something non-transparent
if you want menu color and menu item color to be different */
background-color: transparent;
color: #cccccc;
}
QMenu::item:selected {
color: #ffffff;
background-color: /*#5091bc*/ #666666;
}
QMenu::item:disabled {
color: #666666;
}
QProgressBar
{
border: 0.062em solid #dddddd;
border-radius: 0em;
text-align: center;
}
QProgressBar::chunk {
background-color: #0088cc;
width: 0.62em;
margin: 0.062em;
}
QPushButton {
background-color: /*#f0f0f0*/ #444444;
color: /*black*/ #cccccc;
}
QPushButton:disabled {
color: #888888;
}
QScrollBar:horizontal {
border-top: 0.062em solid /*#dddddd*/ #000000;
background-color: /*#eeeeee*/ #444444;
height: 0.75em;
margin: 0em 0.75em 0 0.75em;
}
QScrollBar::handle:horizontal
{
background-color: /*#cccccc*/ #aaaaaa;
min-height: 1.1em;
}
QScrollBar::add-line:horizontal {
border-top: 0.062em solid /*#dddddd*/ #000000;
border-radius: 0em;
background-color: /*#eeeeee*/ #444444;
width: 0.75em;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border-top: 0.062em solid /*#dddddd*/ #000000;
border-radius: 0px;
background-color: /*#eeeeee*/ #444444;
width: 0.75em;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::left-arrow
{
height: 0.75em;
width: 0.75em;
image: url(:/scroll_left_arrow.png);
}
QScrollBar::right-arrow
{
height: 0.75em;
width: 0.75em;
image: url(:/scroll_right_arrow.png);
}
QScrollBar:vertical
{
background-color: /*#eeeeee*/ #444444;
width: 0.75em;
margin: 0.75em 0 0.75em 0;
border-left: 0.062em solid /*#dddddd*/ #000000;
}
QScrollBar::handle:vertical
{
background-color: /*#cccccc*/ #aaaaaa;
min-height: 1.1em;
border-radius: 0em;
}
QScrollBar::add-line:vertical
{
border-left: 0.062em solid /*#dddddd*/ #000000;
border-radius: 0em;
background-color: /*#eeeeee*/ #444444;
height: 0.75em;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical
{
border-left: 0.062em solid /*#dddddd*/ #000000;
border-radius: 0em;
background-color: /*#eeeeee*/ #444444;
height: 0.75em;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::up-arrow
{
height: 0.75em;
width: 0.75em;
image: url(:/scroll_up_arrow.png);
}
QScrollBar::down-arrow
{
height: 0.75em;
width: 0.75em;
image: url(:/scroll_down_arrow.png);
}
QSplitter {
background-color: transparent;
width: 0.4em;
height: 0.4em;
}
/* Main horizontal above log pane only*/
QSplitter#centralSplitter::handle {
height: 0.4em;
width: 0.25em;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 /*#a7a7a7*/ #444444, stop: 0.17 /*#a7a7a7*/ #444444,
stop: 0.18 transparent, stop: 0.83 transparent,
stop: 0.84 /*#a7a7a7*/ #444444, stop: 1.0 /*#a7a7a7*/ #444444);
}
QSplitter::handle:horizontal {
height: 0.25em;
width: 0.25em;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 /*#a7a7a7*/ #444444, stop: 0.17 /*#a7a7a7*/ #444444,
stop: 0.18 transparent, stop: 1.0 transparent);
image: url(:/splitter_handle_horizontal.png);
}
QSplitter::handle:vertical {
height: 0.25em;
width: 0.25em;
background-color: transparent;
image: url(:/splitter_handle_vertical.png);
}
QSplitter#P4MergeSplitter::handle:vertical {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 /*#a7a7a7*/ #444444, stop: 0.17 /*#a7a7a7*/ #444444,
stop: 0.18 transparent, stop: 0.83 transparent,
stop: 0.84 /*#a7a7a7*/ #444444, stop: 1.0 /*#a7a7a7*/ #444444);
}
P4mSplitter {
width: 3.12em;
}
QSplitterHandle {
background-color: /*#f0f0f0*/ #000000;
}
QTabBar::tab {
color: /*#888888*/ #aaaaaa;
background-color: /*#ededed*/ #333333;
border-left: none;
border-right: 0.062em solid /*#dddddd*/ #666666;
border-bottom: 0.062em solid #555555;
min-width: 0.5em;
padding: 0.32em;
margin-bottom: 0.13em;
}
QTabBar::tab:hover {
color: /*#444444*/ #aaaaaa;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 /*#fdfdfd*/ #444444, stop: 0.89 /*#fdfdfd*/ #444444,
stop: 0.9 /*#a7a7a7*/ #666666, stop: 1.0 /*#a7a7a7*/ #666666);
margin-bottom: 0.13em;
}
QTabBar::tab:selected {
color: /*#444444*/ #cccccc;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 /*#fdfdfd*/ #555555, stop: 0.89 /*#fdfdfd*/ #555555,
stop: 0.9 /*#a7a7a7*/ #aaccaa, stop: 1.0 /*#a7a7a7*/ #aaccaa);
border-top-left-radius: 0em;
border-top-right-radius: 0em;
margin-bottom: 0.13em;
}
QTabBar::tab:!selected { /* make non-selected tabs look smaller */
margin-top: 0em;
}
QTabBar::tab:first:selected { /* the first selected tab has nothing to overlap with on the left */
margin-left: 0;
}
QTabBar::tab:last:selected { /* the last selected tab has nothing to overlap with on the right */
margin-right: 0;
}
QTabBar::tab:only-one { /* if there is only one tab, we don't want overlapping margins */
margin: 0;
}
QTabBar::close-button {
image: url(:/clear_icon.png);
margin-bottom: 0.25em;
}
QTabBar {
background-color: /*#f0f0f0*/ #333333;
}
QTabWidget::tab-bar {
background-color: /*#ededed*/ #222222;
left: 0em;
}
QTabWidget::pane {
border: 1px solid #666666;
}
QTextEdit[readOnly="true"]
{
color: /*#000000*/ #cccccc;
padding: 0em;
background-color: transparent;
border: 0.062em solid rgba(0,0,0,10);
}
QTextEdit[readOnly="false"]
{
color: /*#000000*/ #cccccc;
background-color: /*#ffffff*/ #222222;
}
QDialog {
background-color: /*#f0f0f0*/ #333333;
}
QToolBar {
background-color: /*#ededed*/ #333333;
padding: 0.25em;
}
QStackedWidget {
background-color: /*#f0f0f0*/ #333333;
}
QWidget#centralWidget {
background-color: /*#f0f0f0*/ #333333;
}
UISpecList {
background-color: /*#f0f0f0*/ #333333;
}
UIWorkspace2 QToolBar {
background-color: /*#ededed*/ #333333;
spacing: 0.94em;
s}
QToolBar#P4VToolBar::separator:horizontal {
height: 6.25em;
width: 0.125em;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 /*#d8d8d8*/ #666666, stop: 0.5 /*#d8d8d8*/#666666,
stop: 0.6 /*#ffffff*/ #444444, stop: 1.0 /*#ffffff*/ #444444);
}
QToolBar#P4VToolBar::separator:vertical {
height: 0.125em;
width: 6.25em;
color: #FFFFFF;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 /*#d8d8d8*/ #666666, stop: 0.5 /*#d8d8d8*/#666666,
stop: 0.6 /*#ffffff*/ #444444, stop: 1.0 /*#ffffff*/ #444444);
}
QToolBar#AddressBar {
background-color: /*#ededed*/ #333333;
}
QToolBar#P4VToolBar QToolButton {
color: /*#333333*/ #cccccc;
/* font-size: 10px;*/
}
QScrollArea#filterScrollArea QWidget#filterScrollWidget {
background-color: /*#f0f0f0*/ #333333;
}
QScrollArea#filterScrollArea QToolButton {
background-color: /*#f0f0f0*/ #333333;
}
UIFilterWidget {
background-color: /*#f0f0f0*/ #333333;
}
WorkspaceStatusBar {
background-color: /*#f0f0f0*/ #333333;
color: /*#000000*/ #cccccc;
}
QFrame#ExtendedTabWidget-mCornerWidget {
background-color: /*#f0f0f0*/ #333333;
}
UIWorkspaceWidget {
background-color: /*#f0f0f0*/ #333333;
}
QFrame {
background-color: #333333;
color: #cccccc;
border-color: #000000;
}
QGroupBox {
color: #aaaaaa;
}
QToolBar#P4VToolBar QToolButton:hover {
background-color: /*#ededed*/ #333333;
color: /*#333333*/ #cccccc;
}
QToolBar#P4VToolBar QToolButton:disabled {
color: /*#cccccc*/ #666666;
}
QToolTip {
border: 0.062em solid /*#e5d36c*/ #000000;
background-color: /*#fdfdc9*/ #666666;
color: /*#000000*/ #eeeeee;
border-radius: 0em;
opacity: 250;
/* font-size: 11px;*/
}
QWidget#UIChangeWindow_QWidget {
background-color: /*#fafafa*/ #3a3a3a;
}
QWidget#InnerWidget_for_QScrollArea {
background-color: transparent;
}
RevDetails {
background-color: /*#ededed*/ #222222;
}
RevDetails QLabel {
color: #777777;
}
Gui--DirectoryTreeView {
background-color: /*#f1f4f9*/ #222222;
}
Gui--DirectoryTreeView::item:hover {
background-color: /*#E5E8ED*/ #666666;
}
Gui--DirectoryTreeView::branch:hover {
background-color: /*#E5E8ED*/ #666666;
}
UIBrowseUsersDialog {
background-color: /*#f0f0f0*/ #333333;
}
Gui--PasswordDialog {
background-color: /*#f0f0f0*/ #333333;
}
QDialogButtonBox {
background-color: transparent;
}
UISpecPicker {
background-color: /*#f0f0f0*/ #333333;
}
UIClearableComboBox QPushButton {
min-width:0em;
background-color:transparent;
}
UIConfigurationDialog {
background-color: /*#f0f0f0*/ #333333;
color: /*#888888*/ #cccccc;
}
UITabTitleWidget QStackedWidget#qt_tabwidget_stackedwidget {
background-color: /*#f1f4f9*/ #333333;
}
QStatusBar {
max-height: 1.3em;
}
Gui--FormWidget {
background-color: transparent;
}
UISpecWindow {
background-color: /*#fafafa*/ #222222;
}
UISpecWindow QLabel {
color: /*#666666*/ #aaaaaa;
}
QLabel {
color: /*#000000*/ #cccccc;
}
P4V added a dark theme option in version 2019.2.
You can activate it in the display settings (requires restart):
Edit / Preferences / Display / Application / Application color scheme
Short answer: no.
Longer answer: since P4V is built on Qt, in theory it should be possible to apply modified "styles" to it, but I have never heard of anyone doing this successfully. IIRC there are a lot of custom UI widgets that aren't style-able.
EDIT - This theme doesn't work correctly with the latest version of P4V, I recommend mokoto's answer above!
I've modified the Default.qss inside Perforce/P4VResources/skins to create my own dark theme.
I'll Post it here, I added comments and mainly just edited hex code values. Feel free to use and modify.
!https://imgur.com/a/IyvSX54
/* DARK THEME - JP */
/* Modified */
/* Log Window Text */
LightweightTextView
{
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Generic Text */
QLabel {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* History/Pending/Submitted Items */
QAbstractItemView {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Window In Focus */
QAbstractItemView[hasFocus="true"]::item:selected:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView[hasFocus="true"]::branch:selected:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView[hasFocus="true"]::item:selected {
background-color: #2B4D73;
color: #A0A0A0;
}
QAbstractItemView[hasFocus="true"]::branch:selected {
background-color: #2B4D73;
color: #A0A0A0;
}
/* Window Out Of Focus */
QAbstractItemView[hasFocus="false"]::item:selected:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView[hasFocus="false"]::branch:selected:hover {
background-color: #0085C7;
}
QAbstractItemView[hasFocus="false"]::item:selected {
background-color: #343434;
color: #A0A0A0;
}
QAbstractItemView[hasFocus="false"]::branch:selected {
background-color: #343434;
color: #A0A0A0;
}
QAbstractItemView::item:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView::branch:hover {
background-color: #0085C7;
color: #D3D3D3;
}
/* Expand/Collapse Icons */
QAbstractItemView::branch:has-children:!has-siblings:closed,
QAbstractItemView::branch:closed:has-children:has-siblings {
background-color: #1E1E1E;
border-image: none;
image: url(:/directory_collapsed.png);
}
QAbstractItemView::branch:open:has-children:!has-siblings,
QAbstractItemView::branch:open:has-children:has-siblings {
background-color: #1E1E1E;
border-image: none;
image: url(:/directory_expanded.png);
}
/* List Headers */
QHeaderView::section {
background-color: #404040;
color: #808080;
padding: 2px;
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #c2cfd8;
font-size: 11px;
}
/* Text Input Boxes */
QLineEdit {
selection-background-color: #0085C7;
background-color: #5E5E5E;
color: #ffffff;
}
/* Unmodified */
/*
Modal lists can't figure out focus well
but we can hardcode them safely
*/
DefinitionTree::branch:selected {
background-color: #0088CC;
}
DefinitionTree::branch:selected:hover {
background-color: #0085C7;
}
DefinitionTree::item:selected {
background-color: #0088CC;
}
DefinitionTree::item:selected:hover {
background-color: #0085C7;
}
TFilterView::branch:selected {
background-color: #0088CC;
}
TFilterView::branch:selected:hover {
background-color: #0085C7;
}
TFilterView::item:selected {
background-color: #0088CC;
}
TFilterView::item:selected:hover {
background-color: #0085C7;
}
UIPreferencesDialog QTreeWidget::branch:selected {
background-color: #0088CC;
}
UIPreferencesDialog QTreeWidget::branch:selected:hover {
background-color: #0085C7;
}
UIPreferencesDialog QTreeWidget::item:selected {
background-color: #0088CC;
}
UIPreferencesDialog QTreeWidget::item:selected:hover {
background-color: #0085C7;
}
QTreeView::branch:selected {
background-color: #0088CC;
}
QTreeView::branch:selected:hover {
background-color: #0085C7;
}
QTreeView::item:selected {
background-color: #0088CC;
}
QTreeView::item:selected:hover {
background-color: #0085C7;
}
QTableWidget::item:selected {
background-color: #0088CC;
}
QTableWidget:item:selected:hover {
background-color: #0085C7;
}
ConnectionPane::item:selected {
background-color: #0088CC;
}
ConnectionPane:item:selected:hover {
background-color: #0085C7;
}
/*---------------------------------*/
/* NOT SURE WHAT THIS STUFF IS YET */
/*---------------------------------*/
QSplitter#P4MergeSplitter::handle:vertical {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #a7a7a7, stop: 0.17 #a7a7a7,
stop: 0.18 transparent, stop: 0.83 transparent,
stop: 0.84 #a7a7a7, stop: 1.0 #a7a7a7);
}
P4mSplitter {
width: 50px;
}
QSplitterHandle {
background-color: #f0f0f0;
}
QTabBar::tab {
background-color: #1E1E1E;
color: #A0A0A0;
border-left: none;
border-right: 1px solid #dddddd;
min-width: 8ex;
padding: 5px;
margin-bottom: 2px;
}
QTabBar::close-button {
image: url(:/clear_icon.png);
margin-bottom: 4px;
}
QTabWidget::tab-bar {
background-color: #ededed;
left: 0px;
}
QToolBar {
background-color: #ededed;
padding: 4px;
}
UISpecList {
background-color: #f0f0f0;
}
QToolBar#P4VToolBar::separator:vertical {
height: 2px;
width: 100px;
color: #FFFFFF;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #d8d8d8, stop: 0.5 #d8d8d8,
stop: 0.6 #ffffff, stop: 1.0 #ffffff);
}
UIFilterWidget {
background-color: #f0f0f0;
}
WorkspaceStatusBar {
background-color: #f0f0f0;
color: #000000;
}
QWidget#UIChangeWindow_QWidget {
background-color: #fafafa;
}
QWidget#InnerWidget_for_QScrollArea {
background-color: transparent;
}
RevDetails {
background-color: #ededed;
}
RevDetails QLabel {
color: #777777;
}
UIBrowseUsersDialog {
background-color: #f0f0f0;
}
Gui--PasswordDialog {
background-color: #f0f0f0;
}
QDialogButtonBox {
background-color: transparent;
}
UISpecPicker {
background-color: #f0f0f0;
}
UIClearableComboBox QPushButton {
min-width:0px;
background-color:transparent;
}
Gui--FormWidget {
background-color: transparent;
}
/*--------------------------------------------------------------------*/
/* THIS STUFF HAS BEEN MODIFIED BUT FOR SOME REASON IT CAN'T BE MOVED */
/*--------------------------------------------------------------------*/
/* Check Box */
QCheckBox {
background-color: #transparent;
color: #ffffff;
}
/* Combo Boxes */
QComboBox
{
selection-background-color: #5091bc;
background-color: #5E5E5E;
color: #ffffff;
}
QComboBox:hover
{
background-color: #8E8E8E;
color: #ffffff;
}
QComboBox:on
{
background-color: #777777;
selection-background-color: #777777;
}
QComboBox QAbstractItemView
{
background-color: #1E1E1E;
color: #ffffff;
}
MostRecentCombo {
background-color: #1E1E1E;
color: #ffffff;
}
QComboBox {
background-color: #5E5E5E;
color: #ffffff;
}
/* Read Only Text */
QLineEdit[readOnly="true"]
{
color: #ffffff;
background: transparent;
}
/* Title Bar Menu */
QMainWindow::separator {
width: 1px;
height: 1px;
}
QMenuBar {
background-color: #1E1E1E;
selection-background-color: #9ABFD9;
color: #A0A0A0;
}
QMenu {
background-color: #1E1E1E;
color: #A0A0A0;
border: 1px solid #999999;
padding-top: 5px;
}
QMenu::item {
/* sets background of menu item. set this to something non-transparent
if you want menu color and menu item color to be different */
background-color: transparent;
}
QMenu::item:selected {
color: #ffffff;
background-color: #5091bc;
}
/* Progress Bar Background */
QProgressBar
{
border: 1px solid #5E5E5E;
border-radius: 0px;
text-align: center;
}
/* Progress Bar Chunks */
QProgressBar::chunk {
background-color: #0088cc;
width: 10px;
margin: 1px;
}
/* Common Buttons */
QPushButton {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Scroll Bar Horizontal */
QScrollBar:horizontal {
border-top: 1px solid #ffffff;
background-color: #1E1E1E;
height: 13px;
margin: 0px 13px 0 13px;
}
QScrollBar::handle:horizontal
{
background-color: #5E5E5E;
min-height: 20px;
}
QScrollBar::add-line:horizontal {
border-top: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
width: 13px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border-top: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
width: 13px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::left-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_left_arrow.png);
}
QScrollBar::right-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_right_arrow.png);
}
/* Scroll Bar Vertical */
QScrollBar:vertical
{
background-color: #1E1E1E;
width: 13px;
margin: 13px 0 13px 0;
border-left: 1px solid #ffffff;
}
QScrollBar::handle:vertical
{
background-color: #5E5E5E;
min-height: 20px;
border-radius: 0px;
}
QScrollBar::add-line:vertical
{
border-left: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
height: 13px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical
{
border-left: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
height: 13px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::up-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_up_arrow.png);
}
QScrollBar::down-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_down_arrow.png);
}
/* Area Behind Filter Options */
QSplitter {
background-color: #1E1E1E;
width: 6px;
height: 6px;
}
/* Main horizontal above log pane only*/
QSplitter#centralSplitter::handle {
height: 6px;
width: 4px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #5E5E5E, stop: 0.17 #5E5E5E,
stop: 0.18 #5E5E5E, stop: 0.83 #5E5E5E,
stop: 0.84 #5E5E5E, stop: 1.0 #5E5E5E);
}
/* Horizontal Splitter Handle */
QSplitter::handle:horizontal {
height: 4px;
width: 4px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #5E5E5E, stop: 0.17 #5E5E5E,
stop: 0.18 #5E5E5E, stop: 1.0 #5E5E5E);
image: url(:/splitter_handle_horizontal.png);
}
/* Vertical Splitter Handle */
QSplitter::handle:vertical {
height: 4px;
width: 4px;
background-color: #5E5E5E;
image: url(:/splitter_handle_vertical.png);
}
/* When hovering over a tab */
QTabBar::tab:hover {
color: #D3D3D3;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #ff0000, stop: 0.89 #ff0000,
stop: 0.9 #ff0000, stop: 1.0 #ff0000);
margin-bottom: 2px;
}
/* When a tab that is not the first or last has been selected */
QTabBar::tab:selected {
color: #A0A0A0;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #5E5E5E, stop: 0.89 #5E5E5E,
stop: 0.9 #5E5E5E, stop: 1.0 #5E5E5E);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
margin-bottom: 2px;
}
/* When a tab is not selected */
QTabBar::tab:!selected { /* make non-selected tabs look smaller */
background-color: #1E1E1E;
color: #A0A0A0;
margin-top: 0px;
}
/* When the first tab has been selected */
QTabBar::tab:first:selected { /* the first selected tab has nothing to overlap with on the left */
background-color: #5E5E5E;
color: #A0A0A0;
margin-left: 0;
}
/* When the last tab has been selected */
QTabBar::tab:last:selected { /* the last selected tab has nothing to overlap with on the right */
background-color: #5E5E5E;
color: #A0A0A0;
margin-right: 0;
}
/* Single Tab Background */
QTabBar::tab:only-one { /* if there is only one tab, we don't want overlapping margins */
background-color: #5E5E5E;
color: #A0A0A0;
margin: 0;
}
/* Line Under Tabs */
QTabBar {
background-color: #1E1E1E;
}
/* Pop Up Window Text Boxes */
QTextEdit[readOnly="true"]
{
background-color: #5E5E5E;
color: #ffffff;
padding: 0px;
border: 1px solid rgba(0,0,0,10);
}
QTextEdit[readOnly="false"]
{
background-color: #5E5E5E;
color: #ffffff;
}
/* Pop Up Dialog */
QDialog {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Initial Pop Up Dialog */
QStackedWidget {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Center Sliding Widget */
QWidget#centralWidget {
background-color: #5E5E5E;
color: #A0A0A0;
}
/* Tool Bar Background */
UIWorkspace2 QToolBar {
background-color: #1E1E1E;
color: #A0A0A0;
spacing: 15px;
}
/* Tool Bar Horizontal Separator */
QToolBar#P4VToolBar::separator:horizontal {
height: 100px;
width: 2px;
color: #A0A0A0;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #5E5E5E, stop: 0.5 #5E5E5E,
stop: 0.6 #5E5E5E, stop: 1.0 #5E5E5E);
}
/* Address Bar Background */
QToolBar#AddressBar {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Buttons */
QToolBar#P4VToolBar QToolButton {
background-color: #1E1E1E;
color: #808080;
font-size: 10px;
}
/* Filter Panel */
QScrollArea#filterScrollArea QWidget#filterScrollWidget {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* + & - buttons */
QScrollArea#filterScrollArea QToolButton {
background-color: #5E5E5E;
color: #A0A0A0;
}
/* Widget Background */
QFrame#ExtendedTabWidget-mCornerWidget {
background-color: #5E5E5E;
color: #A0A0A0;
}
/* Generic Background Space */
UIWorkspaceWidget {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Button Hover */
QToolBar#P4VToolBar QToolButton:hover {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Button Disabled */
QToolBar#P4VToolBar QToolButton:disabled {
background-color: #1E1E1E;
color: #404040;
}
/* Tool Tips */
QToolTip {
border: 1px solid #e5d36c;
background-color: #fdfdc9;
color: #000000;
border-radius: 0px;
opacity: 250;
font-size: 11px;
}
/* Depo/Workspace Panel */
Gui--DirectoryTreeView {
background-color: #1E1E1E;
color: #A0A0A0;
}
Gui--DirectoryTreeView::item:hover {
background-color: #0085C7;
color: #D3D3D3;
}
Gui--DirectoryTreeView::branch:hover {
background-color: #0085C7;
color: #D3D3D3;
}
/* Common Background */
UIConfigurationDialog {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Border for Depo/Workspace Panel */
UITabTitleWidget QStackedWidget#qt_tabwidget_stackedwidget {
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Bar At Bottom Of Window */
QStatusBar {
background-color: #1E1E1E;
color: #A0A0A0;
max-height: 20px;
margin-bottom: 1px;
}
/* Pop Up Window Background */
UISpecWindow {
background-color: #1E1E1E;
}
/* Pop Up Window Text */
UISpecWindow QLabel {
color: #A0A0A0;
}
There is a very slight enhancement of your dark theme:
I changed the text much lighter color (easier to read)
I set the color of disabled elements in the menu bar to darker gray so you notice them less
I did not check the entire theme, may be there are some text area where the color might not change or changes but should not
please be indulgent if you find one of those :-)
here is the file with the modification:
/* DARK THEME - JP */
/* Modified */
/* Log Window Text */
LightweightTextView
{
background-color: #1E1E1E;
color: #A0A0A0;
}
/* Generic Text */
QLabel {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* History/Pending/Submitted Items */
QAbstractItemView {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Window In Focus */
QAbstractItemView[hasFocus="true"]::item:selected:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView[hasFocus="true"]::branch:selected:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView[hasFocus="true"]::item:selected {
background-color: #2B4D73;
color: #d9d9d9;
}
QAbstractItemView[hasFocus="true"]::branch:selected {
background-color: #2B4D73;
color: #d9d9d9;
}
/* Window Out Of Focus */
QAbstractItemView[hasFocus="false"]::item:selected:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView[hasFocus="false"]::branch:selected:hover {
background-color: #0085C7;
}
QAbstractItemView[hasFocus="false"]::item:selected {
background-color: #343434;
color: #d9d9d9;
}
QAbstractItemView[hasFocus="false"]::branch:selected {
background-color: #343434;
color: #d9d9d9;
}
QAbstractItemView::item:hover {
background-color: #0085C7;
color: #D3D3D3;
}
QAbstractItemView::branch:hover {
background-color: #0085C7;
color: #D3D3D3;
}
/* Expand/Collapse Icons */
QAbstractItemView::branch:has-children:!has-siblings:closed,
QAbstractItemView::branch:closed:has-children:has-siblings {
background-color: #1E1E1E;
border-image: none;
image: url(:/directory_collapsed.png);
}
QAbstractItemView::branch:open:has-children:!has-siblings,
QAbstractItemView::branch:open:has-children:has-siblings {
background-color: #1E1E1E;
border-image: none;
image: url(:/directory_expanded.png);
}
/* List Headers */
QHeaderView::section {
background-color: #404040;
color: #808080;
padding: 2px;
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #c2cfd8;
font-size: 11px;
}
/* Text Input Boxes */
QLineEdit {
selection-background-color: #0085C7;
background-color: #5E5E5E;
color: #ffffff;
}
/* Unmodified */
/*
Modal lists can't figure out focus well
but we can hardcode them safely
*/
DefinitionTree::branch:selected {
background-color: #0088CC;
}
DefinitionTree::branch:selected:hover {
background-color: #0085C7;
}
DefinitionTree::item:selected {
background-color: #0088CC;
}
DefinitionTree::item:selected:hover {
background-color: #0085C7;
}
TFilterView::branch:selected {
background-color: #0088CC;
}
TFilterView::branch:selected:hover {
background-color: #0085C7;
}
TFilterView::item:selected {
background-color: #0088CC;
}
TFilterView::item:selected:hover {
background-color: #0085C7;
}
UIPreferencesDialog QTreeWidget::branch:selected {
background-color: #0088CC;
}
UIPreferencesDialog QTreeWidget::branch:selected:hover {
background-color: #0085C7;
}
UIPreferencesDialog QTreeWidget::item:selected {
background-color: #0088CC;
}
UIPreferencesDialog QTreeWidget::item:selected:hover {
background-color: #0085C7;
}
QTreeView::branch:selected {
background-color: #0088CC;
}
QTreeView::branch:selected:hover {
background-color: #0085C7;
}
QTreeView::item:selected {
background-color: #0088CC;
}
QTreeView::item:selected:hover {
background-color: #0085C7;
}
QTableWidget::item:selected {
background-color: #0088CC;
}
QTableWidget:item:selected:hover {
background-color: #0085C7;
}
ConnectionPane::item:selected {
background-color: #0088CC;
}
ConnectionPane:item:selected:hover {
background-color: #0085C7;
}
/*---------------------------------*/
/* NOT SURE WHAT THIS STUFF IS YET */
/*---------------------------------*/
QSplitter#P4MergeSplitter::handle:vertical {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #a7a7a7, stop: 0.17 #a7a7a7,
stop: 0.18 transparent, stop: 0.83 transparent,
stop: 0.84 #a7a7a7, stop: 1.0 #a7a7a7);
}
P4mSplitter {
width: 50px;
}
QSplitterHandle {
background-color: #f0f0f0;
}
QTabBar::tab {
background-color: #1E1E1E;
color: #d9d9d9;
border-left: none;
border-right: 1px solid #dddddd;
min-width: 8ex;
padding: 5px;
margin-bottom: 2px;
}
QTabBar::close-button {
image: url(:/clear_icon.png);
margin-bottom: 4px;
}
QTabWidget::tab-bar {
background-color: #ededed;
left: 0px;
}
QToolBar {
background-color: #ededed;
padding: 4px;
}
UISpecList {
background-color: #f0f0f0;
}
QToolBar#P4VToolBar::separator:vertical {
height: 2px;
width: 100px;
color: #FFFFFF;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #d8d8d8, stop: 0.5 #d8d8d8,
stop: 0.6 #ffffff, stop: 1.0 #ffffff);
}
UIFilterWidget {
background-color: #f0f0f0;
}
WorkspaceStatusBar {
background-color: #f0f0f0;
color: #000000;
}
QWidget#UIChangeWindow_QWidget {
background-color: #fafafa;
}
QWidget#InnerWidget_for_QScrollArea {
background-color: transparent;
}
RevDetails {
background-color: #ededed;
}
RevDetails QLabel {
color: #777777;
}
UIBrowseUsersDialog {
background-color: #f0f0f0;
}
Gui--PasswordDialog {
background-color: #f0f0f0;
}
QDialogButtonBox {
background-color: transparent;
}
UISpecPicker {
background-color: #f0f0f0;
}
UIClearableComboBox QPushButton {
min-width:0px;
background-color:transparent;
}
Gui--FormWidget {
background-color: transparent;
}
/*--------------------------------------------------------------------*/
/* THIS STUFF HAS BEEN MODIFIED BUT FOR SOME REASON IT CAN'T BE MOVED */
/*--------------------------------------------------------------------*/
/* Check Box */
QCheckBox {
background-color: #transparent;
color: #ffffff;
}
/* Combo Boxes */
QComboBox
{
selection-background-color: #5091bc;
background-color: #5E5E5E;
color: #ffffff;
}
QComboBox:hover
{
background-color: #8E8E8E;
color: #ffffff;
}
QComboBox:on
{
background-color: #777777;
selection-background-color: #777777;
}
QComboBox QAbstractItemView
{
background-color: #1E1E1E;
color: #ffffff;
}
MostRecentCombo {
background-color: #1E1E1E;
color: #ffffff;
}
QComboBox {
background-color: #5E5E5E;
color: #ffffff;
}
/* Read Only Text */
QLineEdit[readOnly="true"]
{
color: #ffffff;
background: transparent;
}
/* Title Bar Menu */
QMainWindow::separator {
width: 1px;
height: 1px;
}
QMenuBar {
background-color: #1E1E1E;
selection-background-color: #9ABFD9;
color: #d9d9d9;
}
QMenu {
background-color: #1E1E1E;
color: #d9d9d9;
border: 1px solid #999999;
padding-top: 5px;
}
QMenu::item {
/* sets background of menu item. set this to something non-transparent
if you want menu color and menu item color to be different */
background-color: transparent;
}
QMenu::item:selected {
color: #ffffff;
background-color: #5091bc;
}
QMenu::item:disabled {
color: #8c8c8c;
}
/* Progress Bar Background */
QProgressBar
{
border: 1px solid #5E5E5E;
border-radius: 0px;
text-align: center;
}
/* Progress Bar Chunks */
QProgressBar::chunk {
background-color: #0088cc;
width: 10px;
margin: 1px;
}
/* Common Buttons */
QPushButton {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Scroll Bar Horizontal */
QScrollBar:horizontal {
border-top: 1px solid #ffffff;
background-color: #1E1E1E;
height: 13px;
margin: 0px 13px 0 13px;
}
QScrollBar::handle:horizontal
{
background-color: #5E5E5E;
min-height: 20px;
}
QScrollBar::add-line:horizontal {
border-top: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
width: 13px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border-top: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
width: 13px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::left-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_left_arrow.png);
}
QScrollBar::right-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_right_arrow.png);
}
/* Scroll Bar Vertical */
QScrollBar:vertical
{
background-color: #1E1E1E;
width: 13px;
margin: 13px 0 13px 0;
border-left: 1px solid #ffffff;
}
QScrollBar::handle:vertical
{
background-color: #5E5E5E;
min-height: 20px;
border-radius: 0px;
}
QScrollBar::add-line:vertical
{
border-left: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
height: 13px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical
{
border-left: 1px solid #ffffff;
border-radius: 0px;
background-color: #1E1E1E;
height: 13px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::up-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_up_arrow.png);
}
QScrollBar::down-arrow
{
background-color: #5E5E5E;
height: 10px;
width: 10px;
image: url(:/scroll_down_arrow.png);
}
/* Area Behind Filter Options */
QSplitter {
background-color: #1E1E1E;
width: 6px;
height: 6px;
}
/* Main horizontal above log pane only*/
QSplitter#centralSplitter::handle {
height: 6px;
width: 4px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #5E5E5E, stop: 0.17 #5E5E5E,
stop: 0.18 #5E5E5E, stop: 0.83 #5E5E5E,
stop: 0.84 #5E5E5E, stop: 1.0 #5E5E5E);
}
/* Horizontal Splitter Handle */
QSplitter::handle:horizontal {
height: 4px;
width: 4px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #5E5E5E, stop: 0.17 #5E5E5E,
stop: 0.18 #5E5E5E, stop: 1.0 #5E5E5E);
image: url(:/splitter_handle_horizontal.png);
}
/* Vertical Splitter Handle */
QSplitter::handle:vertical {
height: 4px;
width: 4px;
background-color: #5E5E5E;
image: url(:/splitter_handle_vertical.png);
}
/* When hovering over a tab */
QTabBar::tab:hover {
color: #D3D3D3;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #ff0000, stop: 0.89 #ff0000,
stop: 0.9 #ff0000, stop: 1.0 #ff0000);
margin-bottom: 2px;
}
/* When a tab that is not the first or last has been selected */
QTabBar::tab:selected {
color: #d9d9d9;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #5E5E5E, stop: 0.89 #5E5E5E,
stop: 0.9 #5E5E5E, stop: 1.0 #5E5E5E);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
margin-bottom: 2px;
}
/* When a tab is not selected */
QTabBar::tab:!selected { /* make non-selected tabs look smaller */
background-color: #1E1E1E;
color: #d9d9d9;
margin-top: 0px;
}
/* When the first tab has been selected */
QTabBar::tab:first:selected { /* the first selected tab has nothing to overlap with on the left */
background-color: #5E5E5E;
color: #d9d9d9;
margin-left: 0;
}
/* When the last tab has been selected */
QTabBar::tab:last:selected { /* the last selected tab has nothing to overlap with on the right */
background-color: #5E5E5E;
color: #d9d9d9;
margin-right: 0;
}
/* Single Tab Background */
QTabBar::tab:only-one { /* if there is only one tab, we don't want overlapping margins */
background-color: #5E5E5E;
color: #d9d9d9;
margin: 0;
}
/* Line Under Tabs */
QTabBar {
background-color: #1E1E1E;
}
/* Pop Up Window Text Boxes */
QTextEdit[readOnly="true"]
{
background-color: #5E5E5E;
color: #ffffff;
padding: 0px;
border: 1px solid rgba(0,0,0,10);
}
QTextEdit[readOnly="false"]
{
background-color: #5E5E5E;
color: #ffffff;
}
/* Pop Up Dialog */
QDialog {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Initial Pop Up Dialog */
QStackedWidget {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Center Sliding Widget */
QWidget#centralWidget {
background-color: #5E5E5E;
color: #d9d9d9;
}
/* Tool Bar Background */
UIWorkspace2 QToolBar {
background-color: #1E1E1E;
color: #d9d9d9;
spacing: 15px;
}
/* Tool Bar Horizontal Separator */
QToolBar#P4VToolBar::separator:horizontal {
height: 100px;
width: 2px;
color: #d9d9d9;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #5E5E5E, stop: 0.5 #5E5E5E,
stop: 0.6 #5E5E5E, stop: 1.0 #5E5E5E);
}
/* Address Bar Background */
QToolBar#AddressBar {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Buttons */
QToolBar#P4VToolBar QToolButton {
background-color: #1E1E1E;
color: #808080;
font-size: 10px;
}
/* Filter Panel */
QScrollArea#filterScrollArea QWidget#filterScrollWidget {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* + & - buttons */
QScrollArea#filterScrollArea QToolButton {
background-color: #5E5E5E;
color: #d9d9d9;
}
/* Widget Background */
QFrame#ExtendedTabWidget-mCornerWidget {
background-color: #5E5E5E;
color: #d9d9d9;
}
/* Generic Background Space */
UIWorkspaceWidget {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Button Hover */
QToolBar#P4VToolBar QToolButton:hover {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Button Disabled */
QToolBar#P4VToolBar QToolButton:disabled {
background-color: #1E1E1E;
color: #404040;
}
/* Tool Tips */
QToolTip {
border: 1px solid #e5d36c;
background-color: #fdfdc9;
color: #000000;
border-radius: 0px;
opacity: 250;
font-size: 11px;
}
/* Depo/Workspace Panel */
Gui--DirectoryTreeView {
background-color: #1E1E1E;
color: #d9d9d9;
}
Gui--DirectoryTreeView::item:hover {
background-color: #0085C7;
color: #D3D3D3;
}
Gui--DirectoryTreeView::branch:hover {
background-color: #0085C7;
color: #D3D3D3;
}
/* Common Background */
UIConfigurationDialog {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Border for Depo/Workspace Panel */
UITabTitleWidget QStackedWidget#qt_tabwidget_stackedwidget {
background-color: #1E1E1E;
color: #d9d9d9;
}
/* Bar At Bottom Of Window */
QStatusBar {
background-color: #1E1E1E;
color: #d9d9d9;
max-height: 20px;
margin-bottom: 1px;
}
/* Pop Up Window Background */
UISpecWindow {
background-color: #1E1E1E;
}
/* Pop Up Window Text */
UISpecWindow QLabel {
color: #d9d9d9;
}
Related
I am hopeless and so I hope you could help us with this. I recently just bought a new theme for our site but I just want to place the menu right under the Logo As shown.
this is the screenshot and fake adjustment of what we hope we could change to
As we pressed F12 to inspect the section, we are only able to find the below code in base.css but dont know how to adjust them.
/* Header menu drawer */
.header__icon--menu .icon {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}
details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8);
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
visibility: hidden;
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}
.header__inline-menu details[open] > .header__submenu {
opacity: 1;
transform: translateY(2.7rem);
animation: animateMenuOpen var(--duration-default) ease;
}
/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
}
.header__inline-menu .header__menu-item {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
text-transform: var(--font-header-menu-text-transform);
font-size: 1rem;
letter-spacing: 0.125em;
}
.header--top-center .header__heading-link {
margin-left: 0;
}
#media screen and (min-width: 990px) {
.header__inline-menu {
display: inline-block;
}
.header--middle-left .header__inline-menu {
margin-left: 0;
}
}
.header__menu {
padding: 0 1rem;
}
.header__menu-item {
overflow: hidden;
padding: 1.5rem;
text-decoration: none;
color: rgba(var(--color-foreground), 0.75);
}
.header__inline-menu .header__menu-item {
align-items: flex-start;
}
.header__menu-item > span {
position: relative;
display: flex;
flex-direction: column;
backface-visibility: hidden;
transition: var(--duration-default);
overflow: hidden;
}
.header__menu-item span:not(.header__active-menu-item) > span {
display: flex;
flex-direction: column;
backface-visibility: hidden;
transition: var(--duration-default);
}
.header__menu-item span:not(.header__active-menu-item) > span:after {
position: absolute;
transform: translateY(100%);
display: block;
content: attr(title);
color: rgba(var(--color-foreground));
}
.header__menu-item:hover span:not(.header__active-menu-item) > span {
transform: translateY(-100%);
}
.header__menu-item:hover span:not(.header__active-menu-item):after {
}
.header__menu-item .header__active-menu-item {
color: rgba(var(--color-foreground));
}
.header__icon .header__icon-name {
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
height: 1.5rem;
text-decoration: none;
font-size: 1rem;
}
.header__icon .header__icon-name span {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
backface-visibility: hidden;
transition: var(--duration-default);
}
.header__icon-name span:after {
display: inline-block;
content: attr(title);
margin-top: 0.8rem;
color: rgb(var(--color-foreground));
}
.header__icon:hover .header__icon-name span {
transform: translateY(calc(-50% - 0.8rem / 2));
}
.header__submenu {
transition: opacity var(--duration-default) ease;
transform: var(--duration-default) ease;
z-index: 15;
}
.header__submenu.list-menu {
padding: 0.9rem 2.2rem 0.9rem 2.2rem;
}
.header__submenu .header__menu-item:after {
right: 2rem;
}
.header__submenu .header__menu-item {
padding: 1.3rem 0;
height: auto;
}
.header__submenu .header__menu-item:hover {
color: rgba(var(--color-foreground), 1);
}
.header__submenu li:not(:last-child) {
border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
}
.header__submenu .header__submenu .header__menu-item {
padding-left: 3rem;
}
.header__menu-item .icon-caret {
right: 0.8rem;
z-index: 0;
}
.header__submenu .icon-caret {
right: 0.5rem;
transform: rotate(-90deg);
}
details-disclosure > details {
position: relative;
}
#media screen and (min-width: 990px) {
.header__submenu .header__submenu .header__menu-item {
padding-left: 0;
}
}
so I have been starting out with React and built a website, with bootstrap too, now there is this contact form that I want to make work, therefor I am using express and nodejs to do so.
The website was working, I created a separate folder "server" which stores the server.js file and the package.json
However, after I installed and created this file, I ran it and the css stopped working. I did not change anything in my app.js or css file
import React, { Component } from 'react'
import Navigation from './components/navigation';
import Header from './components/header';
import Features from './components/features';
import About from './components/about';
import Services from './components/services';
import Gallery from './components/gallery';
import Contact from './components/contact';
import JsonData from './data/data.json';
export class App extends Component {
state = {
landingPageData: {},
}
getlandingPageData() {
this.setState({landingPageData : JsonData})
}
componentDidMount() {
this.getlandingPageData();
}
render() {
return (
<div>
<Navigation />
<Header data={this.state.landingPageData.Header} />
<Features data={this.state.landingPageData.Features} />
<About data={this.state.landingPageData.About} />
<Services data={this.state.landingPageData.Services} />
<Gallery />
<Contact data={this.state.landingPageData.Contact} />
</div>
)
}
}
export default App;
Here is my css:
body, html {
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #252525;
font-weight: 400;
width: 100% !important;
height: 100% !important;
}
h2, h3, h4 {
font-family: 'Raleway', sans-serif;
}
h2 {
text-transform: uppercase;
margin: 0 0 20px 0;
font-weight: 800;
font-size: 36px;
color: #fff;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #ddd;
}
h4 {
font-size: 18px;
color: #fff;
font-weight: 600;
}
h5 {
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
p {
font-size: 15px;
color: #fff;
}
p.intro {
margin: 12px 0 0;
line-height: 24px;
}
a {
color: #ff0000;
font-weight: 400;
}
a:hover, a:focus {
text-decoration: none;
color: #ff0000;
}
ul, ol {
list-style: none;
}
ul, ol {
padding: 0;
}
hr {
height: 2px;
width: 70px;
text-align: center;
position: relative;
background: #ff0000;
margin-bottom: 20px;
border: 0;
}
/* Navigation */
#menu {
transition: all 0.8s;
}
#menu.navbar-default {
background-color: #252525;
border-color: rgba(231, 231, 231, 0);
box-shadow: 0 0 10px rgba(0,0,0,0.15)
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-top: 1vh;
color: #fff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 15px;
font-weight: 400;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
#menu.navbar-default .navbar-nav > li > a:after {
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%);
content: "";
transition: width 0.2s;
}
#menu.navbar-default .navbar-nav > li > a:hover:after {
width: 100%;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 100% !important;
height: 2px !important;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%) !important;
content: "" !important;
transition: width 0.2s !important;
}
.navbar-toggle {
border-radius: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #252525;
border-color: #ff0000;
}
.navbar-default .navbar-toggle:hover>.icon-bar {
background-color: #ff0000;
}
.section-title {
margin-bottom: 70px;
}
.section-title h2 {
position: relative;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.section-title h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
.section-title p {
font-size: 18px;
}
.btn-custom {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
color: #fff;
background-color: #ff0000;
background-image: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 14px 34px;
letter-spacing: 1px;
margin: 0;
font-size: 15px;
font-weight: 500;
border-radius: 25px;
transition: all 0.5s linear;
border: 0;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {
color: #fff;
background-image: none;
background-color: #ff0000;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: none;
outline-offset: none;
}
/* Header Section */
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/intro-bg.jpg) center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .overlay {
background: rgba(0,0,0,0.2);
}
.intro h1 {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 82px;
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
}
.intro h1 span {
font-weight: 800;
color: #ff0000;
}
.intro p {
color: #fff;
font-size: 22px;
font-weight: 300;
line-height: 30px;
margin: 0 auto;
margin-bottom: 60px;
}
header .intro-text {
padding-top: 350px;
padding-bottom: 200px;
text-align: center;
}
/* Features Section */
#features {
padding: 100px 0;
background: #252525;
}
#features i.fa {
font-size: 38px;
margin-bottom: 20px;
transition: all 0.5s;
color: #fff;
width: 100px;
height: 100px;
padding: 30px 0;
border-radius: 50%;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
/* About Section */
#about {
padding: 100px 0;
background-color: #252525;
}
#about h3 {
font-size: 22px;
margin: 0 0 20px 0;
}
#about h2 {
position: relative;
margin-bottom: 15px;
padding-bottom: 15px;
}
#about h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
left: 0;
}
#about .about-text li {
margin-bottom: 6px;
margin-left: 6px;
list-style: none;
padding: 0;
color: #fff;
}
#about .about-text li:before {
content: '\f00c';
font-family: 'FontAwesome';
color: #ff0000;
font-size: 11px;
font-weight: 300;
padding-right: 8px;
}
#about img {
width: 520px;
margin-top: 10px;
background: #fff;
border-right: 0;
box-shadow: 0 0 50px rgba(0,0,0,0.06);
}
#about p {
line-height: 24px;
margin: 30px 0;
}
/* Services Section */
#services {
padding: 100px 0;
background: linear-gradient(to right, #252525 0%, #252525 100%);
color: #252525;
}
#services .service-desc {
margin: 10px 10px 20px;
}
#services h2 {
color: #fff;
}
#services .section-title h2::after {
position: absolute;
content: "";
background: #ff0000;
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
#services i.fa {
font-size: 42px;
width: 120px;
height: 120px;
padding: 40px 0;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
border-radius: 50%;
color: #fff;
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
#services h3 {
font-weight: 500;
padding: 5px 0;
color: #fff;
}
#services p {
color: rgba(255,255,255,.75);
}
#services .service-desc {
margin-bottom: 40px;
}
/* Portfolio Section */
#portfolio {
padding: 100px 0;
background-color: #252525;
}
.portfolio-item {
margin: 1px -15px 0 -14px;
padding: 0;
}
.portfolio-item .hover-bg {
overflow: hidden;
position: relative;
margin: 0;
}
.hover-bg .hover-text {
position: absolute;
text-align: center;
margin: 0 auto;
color: #fff;
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 30% 0 0 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s;
}
.hover-bg .hover-text>h4 {
opacity: 0;
color: #fff;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all 0.3s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
}
.hover-bg:hover .hover-text>h4 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.hover-bg:hover .hover-text {
opacity: 1;
}
/* Testimonials Section */
#testimonials {
padding: 100px 0;
background: #f6f6f6;
}
#testimonials i {
color: #e6e6e6;
font-size: 32px;
margin-bottom: 20px;
}
.testimonial {
position: relative;
padding: 20px;
}
.testimonial-image {
float: left;
margin-right: 15px;
}
.testimonial-image, .testimonial-image img {
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
}
.testimonial-content {
position: relative;
overflow: hidden;
}
.testimonial-content p {
margin-bottom: 0;
font-size: 14px;
font-style: italic;
}
.testimonial-meta {
margin-top: 10px;
font-size: 15px;
font-weight: 600;
color: #666;
}
/* Team Section */
#team {
padding: 100px 0;
}
#team h4 {
margin: 5px 0;
}
#team .team-img {
width: 240px;
}
#team .thumbnail {
background: transparent;
border: 0;
}
#team .thumbnail .caption {
padding: 10px 0 0 0;
color: #888;
}
/* Contact Section */
#contact {
padding: 100px 0 60px 0;
background: linear-gradient(to right, #ff4e4e 0%, #ff4e4e 100%);
color: rgba(255,255,255,.75);
}
#contact .section-title {
margin-bottom: 40px;
}
#contact .section-title p {
font-size: 16px;
}
#contact h2 {
color: #fff;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
#contact .section-title h2::after {
position: absolute;
content: "";
background: #fff;
height: 4px;
width: 60px;
bottom: 0;
left: 30px;
}
#contact h3 {
color: #fff;
margin-top: 80px;
margin-bottom: 25px;
padding-bottom: 20px;
font-weight: 400;
}
#contact form {
padding-top: 20px;
}
#contact .text-danger {
color: #cc0033;
text-align: left;
}
#contact .btn-custom {
margin: 30px 0;
background: transparent;
border: 2px solid #fff;
}
#contact .btn-custom:hover {
color: #1f386e;
background: #fff;
}
label {
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
float: left;
}
#contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
color: #444;
background-color: #fff;
background-image: none;
border: 1px solid #ddd;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
#contact .form-control:focus {
border-color: #999;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}
.form-control::-webkit-input-placeholder {
color: #777;
}
.form-control:-moz-placeholder {
color: #777;
}
.form-control::-moz-placeholder {
color: #777;
}
.form-control:-ms-input-placeholder {
color: #777;
}
#contact .contact-item {
margin: 20px 0;
}
#contact .contact-item span {
color: rgba(255,255,255,1);
margin-bottom: 10px;
display: block;
}
#contact .contact-item i.fa {
margin-right: 10px;
}
#contact .social {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 50px;
margin-top: 50px;
text-align: center;
}
#contact .social ul li {
display: inline-block;
margin: 0 20px;
}
#contact .social i.fa {
font-size: 22px;
width: 48px;
height: 48px;
padding: 12px 0;
border: 2px solid #fff;
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
#contact .social i.fa:hover {
color: #608dfd;
background: #fff;
}
/* Footer Section*/
#footer {
background: #ff4e4e;
padding: 30px 0;
}
#footer p {
color: #fff;
font-size: 14px;
}
#footer a {
color: #d3d3d3;
}
#footer a:hover {
border-bottom: 2px solid #608dfd;
}
#media (max-width: 768px) {
#about img {
margin: 50px 0;
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 2vh;
color: #ffffff;
text-transform: uppercase;
}
}
#media (max-width: 960px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
color: #ffffff;
margin-top: -1vh;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
#media (max-width: 1200px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin-top: 1vh;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
Btw, app.js is inside the src folder and the style.css is inside the public folder.
Thank you in advance for any help.
I can't figure out how to set a stylesheet to modify the QScrollBar in a QScrollArea.
I've first tried:
scrollarea = QScrollArea()
scrollarea.verticalScrollBar().setStyleSheet("""
QScrollBar:horizontal {
min-width: 240px;
height: 13px;
}
QScrollBar:vertical {
min-height: 240px;
width: 13px;
}
QScrollBar::groove {
background: gray;
border-radius: 5px;
}
QScrollBar::handle {
background: blue;
border-radius: 5px;
}
QScrollBar::handle:horizontal {
width: 25px;
}
QScrollBar::handle:vertical {
height: 25px;
}"""
# same for horizontalScrollBar
Then I tried applying the exact same stylesheet directly on the QScrollArea instance, with no success.
Then I tried to define the scrollbar myself :
scrollArea = QScrollArea(self)
verticalScrollBar = QScrollBar(qt.Qt.Vertical, scrollArea)
verticalScrollBar.setStyleSheet(my_stylesheet)
scrollArea.setVerticalScrollBar(verticalScrollBar)
But the exact same stylesheet works on a QSlider (by replacing QScrollBar with QSlider).
Try it:
import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt
class MainWindow(QDialog):
def __init__(self):
super().__init__()
self.createWidgets()
def createWidgets(self):
self.layout = QVBoxLayout(self)
self.scrollbar1 = QScrollBar(Qt.Vertical, self)
self.scrollbar2 = QScrollBar(Qt.Horizontal, self)
for widget in [self.scrollbar1, self.scrollbar2]:
widget.valueChanged.connect(self.test)
self.layout.addWidget(widget)
def test(self, event):
print(self.sender().value())
stylesheet = """
/* --------------------------------------- QScrollBar -----------------------------------*/
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: yellow; /* #2A2929; */
}
QScrollBar::handle:horizontal
{
background-color: blue; /* #605F5F; */
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
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: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: red; /* #605F5F; */
min-height: 5px;
border-radius: 4px;
}
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;
}
"""
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyleSheet(stylesheet) # <----
GUI = MainWindow()
GUI.resize(300, 200)
GUI.show()
sys.exit(app.exec_())
Update
Upload images from a resource file.
This way is to convert
the res.qrc file in the res_rc.py file through the pyrcc5 file,
which can be directly loaded by import.
In a directory, for example images were put images: right_arrow.png, ...
Created a file such as stylesheet.qrc:
<RCC>
<qresource prefix="/">
<file>images/down_arrow.png</file>
<file>images/down_arrow_disabled.png</file>
<file>images/up_arrow.png</file>
<file>images/up_arrow_disabled.png</file>
<file>images/left_arrow.png</file>
<file>images/left_arrow_disabled.png</file>
<file>images/right_arrow.png</file>
<file>images/right_arrow_disabled.png</file>
</qresource>
</RCC>
Convert stylesheet.qrc to stylesheet_rc.py
pyrcc5 stylesheet.qrc -o stylesheet_rc.py
Paste into main.py - import stylesheet_rc
Transfer the modules main.py and stylesheet_rc.py to some other directory and run main.py
main.py
import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt
import stylesheet_rc # <--------
class MainWindow(QDialog):
def __init__(self):
super().__init__()
self.createWidgets()
def createWidgets(self):
self.layout = QVBoxLayout(self)
self.scrollbar1 = QScrollBar(Qt.Vertical, self)
self.scrollbar2 = QScrollBar(Qt.Horizontal, self)
for widget in [self.scrollbar1, self.scrollbar2]:
widget.valueChanged.connect(self.test)
self.layout.addWidget(widget)
def test(self, event):
print(self.sender().value())
stylesheet = """
/* --------------------------------------- QScrollBar -----------------------------------*/
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: yellow; /* #2A2929; */
}
QScrollBar::handle:horizontal
{
background-color: blue; /* #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: red; /* #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;
}
"""
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyleSheet(stylesheet) # <----
GUI = MainWindow()
GUI.resize(300, 200)
GUI.show()
sys.exit(app.exec_())
My problem was that the stylesheet for QSlider and QScrollBar have sligthly different syntaxes.
My eventual solution is (to be set either as the QScrollArea stylesheet or as the QApplication stylesheet, depending on the desired scope):
stylesheet = """
QScrollArea {
border: none;
}
QScrollBar {
background: gray;
border-radius: 5px;
}
QScrollBar:horizontal {
height: 13px;
}
QScrollBar:vertical {
width: 13px;
}
QScrollBar::handle {
background: green;
border-radius: 5px;
}
QScrollBar::handle:horizontal {
height: 25px;
min-width: 10px;
}
QScrollBar::handle:vertical {
width: 25px;
min-height: 10px;
}
QScrollBar::add-line {
border: none;
background: none;
}
QScrollBar::sub-line {
border: none;
background: none;
}
"""
I'm getting crazy to change the colours in the custom google search we have implemented at work... been researching for a few hours and nothing...
we are using this:
<div id="search">
<div id="results_007269481408127051346:b2b1fyxrklw"></div>
</div>
<script type="text/javascript">
var googleSearchIframeName = "results_007269481408127051346:b2b1fyxrklw";
var googleSearchFormName = "searchbox_007269481408127051346:b2b1fyxrklw";
var googleSearchFrameWidth = 600;
var googleSearchFrameborder = 0;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
var googleSearchResizeIframe = true;
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/show_afs_search.js"></script>
Do you know if theres any other var that I can add to these parameters to change the blue and the green color that come by default in the search?
Thanks a lot folks!
When you go to Google Webmaster Tools and then to Labs > Custom Search you can configure a new search engine. There are 4 tabs, in the second tab Look and Feel you can customize its appearance.
This style-sheet should be generated and putting this in your style-sheet should edit its appearance :)
<style type="text/css">
.gsc-control-cse {
font-family: Verdana, sans-serif;
border-color: #FF0000;
background-color: #999999;
}
.gsc-control-cse .gsc-table-result {
font-family: Verdana, sans-serif;
}
input.gsc-input {
border-color: #FFFFCC;
}
input.gsc-search-button {
border-color: #999999;
background-color: #FFCC00;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #E9E9E9;
background-color: #E9E9E9;
}
.gsc-tabHeader.gsc-tabhActive {
border-top-color: #FF9900;
border-left-color: #E9E9E9;
border-right-color: #E9E9E9;
background-color: #FFFFFF;
}
.gsc-tabsArea {
border-color: #E9E9E9;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
border-color: #000000;
background-color: #660000;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: #009900;
background-color: #CC33CC;
}
.gsc-webResult.gsc-result.gsc-promotion:hover {
border-color: #009900;
background-color: #CC33CC;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #666666;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #C0C0C0;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #999999;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #666666;
}
.gsc-cursor-page {
color: #666666;
}
a.gsc-trailing-more-results:link {
color: #666666;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #CCCCCC;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #330000;
}
.gs-webResult div.gs-visibleUrl-short {
color: #330000;
}
.gs-webResult div.gs-visibleUrl-short {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gs-promotion div.gs-visibleUrl-short {
display: none;
}
.gs-promotion div.gs-visibleUrl-long {
display: block;
}
.gsc-cursor-box {
border-color: #000000;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
border-color: #E9E9E9;
background-color: #660000;
color: #666666;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
border-color: #FF9900;
background-color: #FFFFFF;
color: #C0C0C0;
}
.gsc-webResult.gsc-result.gsc-promotion {
border-color: #336699;
background-color: #FFFFFF;
}
.gsc-completion-title {
color: #666666;
}
.gsc-completion-snippet {
color: #CCCCCC;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #0000CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: #0000CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #0000CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #0000CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #000000;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #008000;
}</style>
You can see everything in the picture (CSS, the behavior and divs).
The lower part of the p letter and g letter are hidden by the div.
http://img573.imageshack.us/img573/3553/screenshot3m.png
EDIT:
style.css:
/* Structure */
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#header, #intro, #tagline, #content {
background: url(images/bg.png) top center repeat;
}
#branding, .content, .content-block, .posts, #footer a {
margin-left: 10px !important;
margin-right: 10px !important;
}
#intro h2, #content h2, #nav li a {
text-shadow: 0 1px 0 #FFF;
}
/* Header */
#header {
}
#header a {
color: #333
}
#header a:hover {
color: #28A
}
#branding {
float: left;
margin: 10px 0 10px;
width: 940px;
}
#header h1, #lang {
margin: 20px 0 12px;
width: 280px;
}
#header h1 {
float: left;
width: 280px;
}
#nav {
float: left;
margin: 32px 0 10px;
}
#nav li {
float: left;
}
#nav li a {
font-size: 14px;
font-weight: 400;
margin: 0 40px 0 0;
}
#lang {
float: right;
}
#lang li {
float: left;
}
#lang li a {
font-size: 10px;
margin: 0 0 0 30px;
}
/* Intro */
#intro, #intro2 {
background: #333;
padding: 30px 0;
}
#intro {
height: 400px;
}
#intro2 {
background: #333;
padding: 30px 0;
}
#intro2 h2 {
color: #DDD;
}
...
You can try add css attribute line-height
.content h2{line-height: 35px;}