Theming QT YaST.

English Forums Feedback
#1

I got tired of seeing nothing in QT YaST with KDE dark themes and ended up redesigning that ugly gray YaST theme.

/* ******************************************  */
/*  Pistachio YaST2 qt css theme               */
/*  redesigned from openSUSE-Oxygen            */
/*  by Agnelo de la Crotche (Please_try_again) */
/*  Fri Apr 13 14:47:44 PDT 2012               */
/*                                             */
/*  Why Pistachio? Because Pinocchio!          */
/*                                             */
/* ******************************************  */

/* Background: wizard#full work_area.png */
/* Background: work_area#full work_area.png */
/* Richtext: richtext.css */

#wizard {
  font-size: 12pt;
  background-color: #0a3828;
}

#work_area {
  padding: 1em;
  border: none;
}


#DialogHeading { 
  font-family: Sans-serif;
  font: 16pt bold;
  padding: 12pt;
  color: #e8eb92;
  margin: 0px;
}


.Contents QWidget { color: white; } 
.Contents QComboBox { color: black; }
.Contents QSpinBox { color: black; }
.Contents QTreeView { color: black; }
.Contents QListView { color: black; }
.Contents QTextBrowser { color: white; }
.Contents QCheckBox::indicator:checked { image: url(checkbox-on.png); }
.Contents QCheckBox::indicator:unchecked { image: url(checkbox-off.png); }
.Contents QCheckBox::indicator:disabled { opacity: 0.5; }
.Contents QWidget:disabled { color: gray; }
.Contents YQMultiLineEdit QTextEdit { color: black; }
.Contents QMessageBox { background-color: #4e776b; }
.conflict QWidget { color: black; }

YQMultiProgressMeter {
	background-color: transparent;
	border: 1px solid gray;
	border-radius: 3px;
}

QGroupBox {
	border: 0px;
	margin-top: 2.5ex;
	margin-left: 10px;
	color: #ffffff;
}


QGroupBox::title {
	subcontrol-origin: margin;
	subcontrol-position: left top;
	font-weight: bold; color: #bbb;
	color: #86e340; 
}

QPushButton {
	border: 1 solid rgb(136, 136, 136);
    border-radius: 4px;
    min-height: 23px;
    min-width: 75px; 
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4f7c6c, stop: 1 #39504a);
	margin: 1px;
	padding-right: 5px;
	padding-left: 5px;
}

QPushButton:hover {
	color: #000000;
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4f7c6c, stop: 1 #85c092);
}

QPushButton:default:hover {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ad4, stop: 1 #9c3 );
}

QPushButton:pressed {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #588947, stop: 1 #86e340);
}

QPushButton:default {
	margin: 0px;
	color: black;
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #9c3, stop: 1 #690 ) ;
}

QPushButton:default:pressed {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #588947, stop: 1 #86e340);
}

QTabBar::tab {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #39504a, stop: 1 #6f8d85);
	color: #c7d1ce;
	border: 1px solid #C4C4C3;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 2px;
	border-bottom-color: gray;
}

QTabBar::tab:hover {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #11221c, stop: 1 #6f8d85);
	color: white;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

QTabBar::tab:selected {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #11221c, stop: 1 #0a3828);
	color: white;
	border: 1px solid #86e340;
	margin-top: 0px; 
	border-bottom-color: transparent;
}

QTabBar::tab:selected:hover {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #000000, stop: 1 #0a3828);
	color: white;
	border-color: #09f92f;
	border-bottom-color: transparent;
}

QMenu {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f8f8f8, stop: 1 #dddddd);
	border: 1px solid #C4C4C3;
	border-bottom-color: #C2C7CB; /* same as the pane color */
}

QMenu:selected {
	background-color: #9c3;
	color: black;
}

QTreeView {
    border: 1px solid #888;
    background-color: #85c092;	
    color: #000000;	
    border-radius: 4px;
    margin: 1px;
}

QTreeView::item:hover {
	background-color: #86e340 ;
	color: #000000 ;
}

QTreeView::item:selected ,
QTreeView::branch:selected { 
	background-color: #2b7212 ;
	color: #ffffff ;
}

QTreeView::branch:has-siblings:!adjoins-item {
	border-image: url(vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item {
	border-image: url(branch-more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
	border-image: url(branch-end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed, QTreeView::branch:closed:has-children:has-siblings {
	border-image: none;
	image: url(branch-closed.png);
}

QTreeView::branch:open:has-children:!has-siblings, QTreeView::branch:open:has-children:has-siblings  {
	border-image: none;
	image: url(branch-open.png);
}

QComboBox {
	border: 1 solid rgb(136, 136, 136);
    border-radius: 4px;
    min-height: 23px;
    min-width: 75px; 
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #86c092, stop: 1 #9ddbe2);
	color: black;
	margin: 1px;
	padding-right: 4px;
	padding-left: 4px;
}


QComboBox:pressed {
   background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 1 #f0f0f0);
}

QComboBox:default {
	border: 2px solid rgb(67,149,57);	/* suse dark green*/
	margin: 0px;
}

QListView {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f8f8f8, stop: 1 #dddddd);
    background-color: #86c092;
    border: 1px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
	selection-background-color: #9c3;
	selection-color: black;
    color: black;
}


QTreeView,  QTextBrowser,  QLineEdit, QSpinBox, QTextEdit
{
	border: 1px inset darkgray;  
	border-radius: 3px;
	margin: 0px; 
	background-color: #abf0ce;
	alternate-background-color: #7abf9d;
    color: black;
    selection-background-color: #86e340;
    selection-color: black;
}


QTextBrowser
{
	background-color: #546a54; 
}


QTreeView:hover, QTextBrowser:hover, QLineEdit:hover, QSpinBox:hover, QTextEdit:hover {
	border: 1px inset gray;  
    color: black;
}

QTreeView:focus, QTextBrowser:focus, QLineEdit:focus, QSpinBox:focus, QTextEdit:hover {
	border: 1px inset #9c3;
    color: black;
}

QComboBox:focus {
	border: 1px outset #9c3;
    color: black;
}

QComboBox {
    color: black;
    background-color: #86c092;
    selection-background-color: #00ff00;
    selection-color: #000000;
}

QComboBox::down-arrow {
     image: url(arr_down.png);
} 

QPushButton::menu-indicator {
     image: url(arr_down.png);
     position: relative;
     top: -6px; left: -2px;

}

QComboBox::drop-down {
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;
     border-left-width: 1px;
     border-left-color: 32435E;
     border-left-style: solid; 
}

QComboBox:hover , QComboBox:selected {
    color: black;
}

QSpinBox { 
    padding-right: 9px;
    color: black;
	selection-background-color: #0a3828;
	selection-color: white;
}


QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right;
    background-image: url(spin_up.png) ;
    background-repeat: no-repeat; 
}


QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
    background-image: url(spin_down.png) ;
    background-repeat: no-repeat; 
}

YQProgressBar > YQWidgetCaption { margin-top: 20px; }

QProgressBar {
	border: 1px solid #444;
	border-radius: 4px;
	text-align: center;
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #19222a, stop: 0.4 #273d3b, stop: 1 #000000);
}


QProgressBar:chunk {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #0b3818 , stop: 0.2 #128925 , stop: 1 #0b3818 );
	border: 1px solid #9c3;
	border-radius: 4px;
}


QScrollBar:vertical {
	width: 16px;
	margin: 16px 0 16px 0;
	background-color: #2d3b37;
}

QScrollBar::handle:vertical {
	min-height: 16px;
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #39504a, stop: 1 #6f8d85);
	border: 1px solid rgb(208,208,208); 
	border-radius: 4px;

}

QScrollBar::handle:vertical:hover {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #39504a, stop: 1 #86e340);
}

QScrollBar::add-line:vertical {
	border: none;
	background: transparent;
	height: 16px;
	subcontrol-position: bottom;
	subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
	border: none;
	height: 16px;
	subcontrol-position: top;
	subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
	width: 8px;
	height: 8px;
}

QScrollBar::up-arrow:vertical {
	background-image: url(arr_up.png);
}

QScrollBar::down-arrow:vertical {
	background-image: url(arr_down.png);
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
   background-color: transparent;
}

QScrollBar:horizontal {
	height: 16px;
	margin: 0 16px 0 16px;
	background-color: #2d3b37;
}

QScrollBar::handle:horizontal {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #39504a, stop: 1 #6f8d85);
	border: 1px solid rgb(208,208,208); 
	border-radius: 4px;
	min-width: 16px;
}

QScrollBar::handle:horizontal:hover {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #39504a, stop: 1 #86e340);
}
  
QScrollBar::add-line:horizontal {
	border: none;
	background: transparent;
	width: 16px;
	subcontrol-position: right;
	subcontrol-origin: margin; 
}
 
QScrollBar::sub-line:horizontal {
	border: none;
	width: 16px;
	subcontrol-position: left;
	subcontrol-origin: margin; 
}

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
	width: 8px;
	height: 8px;
}

QScrollBar::right-arrow:horizontal {
	background-image: url(arr_right.png);
}

QScrollBar::left-arrow:horizontal {
	background-image: url(arr_left.png); }

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
	background-color: transparent;
} 

QCheckBox:unchecked { color: #cfd5d2; }
QCheckBox:hover { color: #e8eb92; }
QCheckBox:checked { color: #ffffff; }
QCheckBox:checked:hover { color: #e8eb92; }

http://desmond.imageshack.us/Himg641/scaled.php?server=641&filename=yast2pistachio.png&res=crop](http://img641.imageshack.us/img641/8215/yast2pistachio.png)

To use this theme, save this file as style.qss, put it where you want and re-symlink /usr/share/YaST2/theme/openSUSE-current/wizard/style.qss to point to this file.

Example:

sudo ln -sf /home/you/style.qss /usr/share/YaST2/theme/openSUSE-current/wizard/style.qss

I don’t know how to do it for a single user. I didn’t look.
Of course you can change all the colors in the CSS and post your new theme … with a screenshot. :wink:

#2

Awesome! Will play around with it… got indeed bored with the grey colours rotfl!

#3

Alternatively, these commands will make YaST use the settings taken from the KDE settings, so you don’t need to make your own themes:

cd /usr/share/YaST2/theme/
sudo mv current current~

Keep in mind that it will use the theme defined for the root account, not the user. So you have to configure that for root independently, by using:

kdesu systemsettings

Personally I took advantage of a system like this to make the user theme white and green to fit with the desktop, and the root theme menacingly red and black to clearly indicate that it has root permissions. (And, well, all administrators are evil overlords deep in their hearts, anyway :wink: )

Here’s how it looks:
http://img14.imageshack.us/img14/4581/yastthemingpreview.th.png](http://img14.imageshack.us/img14/4581/yastthemingpreview.png)