Differences between revisions 1 and 21 (spanning 20 versions)
Revision 1 as of 2016-01-11 04:17:54
Size: 33
Editor: clifford
Comment:
Revision 21 as of 2017-02-06 02:31:56
Size: 3275
Editor: clifford
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
QSS directive matching explains QSS on control explained

== 1, Basic concept introduction ==
=== a, basic format directive following by declearations, directive is the ClassName of the widgets. ===
{{{
/* CCLabel is the directive also the ClassName ,the text in the {} pair are the declearation*/
CCLabel {
    font-size: 16pt;
    }
}}}
=== b, more than one directives can be jointed for a declearation ===
{{{
/*CCListView, QListView, QComboBox, QPushButton, QMessageBox all have 16 pt font-size*/
CCListView, QListView, QComboBox, QPushButton,QMessageBox {
    font-size: 16pt;
    }
}}}
=== c, for some widget they have state can use ":" to indicate state. ===
{{{
/*enabled, pressed and disabled CCDDPushButton will look different*/
CCDDPushButton::enabled {
    border-style: outset;
    border-width: 3px;
    border-radius: 10px;
    border-color: #948E8C;
    background: qlineargradient(
       x1:0, y1:0, x2:0, y2:1,
       stop:0 #ffe0cd,
       stop: 0.4 #ffb587,
       stop: 0.5 #ff904b,
       stop:1 #ff6200
       );
    }

CCDDPushButton:pressed {
    border-style: inset;
    }

CCDDPushButton:disabled {
    border-style: inset;
    border-width: 3px;
    border-radius: 10px;
    border-color: #949494;
    }
}}}
=== d, can also select a widget by one of its attribute using "[" and "]". ===
{{{
/*only CCBox with attribute CCColour equal "q" will affected by this declearation*/
CCBox[CCColour="g"] {
    border-style: inset;
    background-color: #DCEDE4;
    }
}}}
=== e, when a property of a widget was not found in a more specific directive, the lest specific directive will be used. ===
{{{
/*all CCDDPushButton will have font-size 11pt*/
CCDDPushButton {
    font-size: 11pt;
    }
/*only the enabled CCDDPushButton will have the back stylish border and background*/
CCDDPushButton::enabled {
    border-style: outset;
    border-width: 3px;
    border-radius: 10px;
    border-color: #948E8C;
    background: qlineargradient(
       x1:0, y1:0, x2:0, y2:1,
       stop:0 #ffe0cd,
       stop: 0.4 #ffb587,
       stop: 0.5 #ff904b,
       stop:1 #ff6200
       );
    }
}}}
=== f, when selecting only widgets belong to an other widget can use ">" ===
{{{
/*only affect QPushButton which is a child of CCTouchScreen*/
CCTouchScreen > QPushButton {
    border-style: inset;
    }
}}}
= Examples of currently implemented directives =
= All the Red Text indicate the Directive with link to their Widget. =
== 1, ccmenubar, ccexplore -- the menu programs. ==
{{attachment:ccmenubar_labeled.jpeg||height="211px",width="1173px"}}

== 2, starndard control programs ==
{{attachment:qsssieat_labeled.png||height="731px",width="1171px"}} {{attachment:qsssieat2_labeled.png||height="824px",width="1319px"}} {{attachment:qsssieat3_labeled.png||height="824px",width="1319px"}} {{attachment:qsssieat4_labeled.png||height="824px",width="1319px"}} {{attachment:menu_labeled.png||height="824px",width="1319px"}}

== 3, guiaad programs ==
{{attachment:qssstaad_labeled.png||height="824px",width="1319px"}} {{attachment:qssstaad2_labeled.png||height="824px",width="1319px"}}

= Advance =
for more detail can run "Qt::assistant" on sam and search "stylesheet" or google "qt 4.8 qss" for full doco.

QSS on control explained

1, Basic concept introduction

a, basic format directive following by declearations, directive is the ClassName of the widgets.

/* CCLabel is the directive also the ClassName ,the text in the {} pair are the declearation*/
CCLabel {
    font-size: 16pt;
    }

b, more than one directives can be jointed for a declearation

/*CCListView, QListView, QComboBox, QPushButton, QMessageBox all have 16 pt font-size*/
CCListView, QListView, QComboBox, QPushButton,QMessageBox {
    font-size: 16pt;
    }

c, for some widget they have state can use ":" to indicate state.

/*enabled, pressed and disabled CCDDPushButton will look different*/
CCDDPushButton::enabled {
    border-style: outset;
    border-width: 3px;
    border-radius: 10px;
    border-color: #948E8C;
    background: qlineargradient(
       x1:0, y1:0, x2:0, y2:1,
       stop:0 #ffe0cd,
       stop: 0.4 #ffb587,
       stop: 0.5 #ff904b,
       stop:1 #ff6200
       );
    }

CCDDPushButton:pressed {
    border-style: inset;
    }

CCDDPushButton:disabled {
    border-style: inset;
    border-width: 3px;
    border-radius: 10px;
    border-color: #949494;
    }

d, can also select a widget by one of its attribute using "[" and "]".

/*only CCBox with attribute CCColour equal "q" will affected by this declearation*/
CCBox[CCColour="g"] {
    border-style: inset;
    background-color: #DCEDE4;
    }

e, when a property of a widget was not found in a more specific directive, the lest specific directive will be used.

/*all CCDDPushButton will have font-size 11pt*/
CCDDPushButton {
    font-size: 11pt;
    }
/*only the enabled CCDDPushButton will have the back stylish border and background*/
CCDDPushButton::enabled {
    border-style: outset;
    border-width: 3px;
    border-radius: 10px;
    border-color: #948E8C;
    background: qlineargradient(
       x1:0, y1:0, x2:0, y2:1,
       stop:0 #ffe0cd,
       stop: 0.4 #ffb587,
       stop: 0.5 #ff904b,
       stop:1 #ff6200
       );
    }

f, when selecting only widgets belong to an other widget can use ">"

/*only affect QPushButton which is a child of CCTouchScreen*/
CCTouchScreen > QPushButton {
    border-style: inset;
    }

Examples of currently implemented directives

All the Red Text indicate the Directive with link to their Widget.

1, ccmenubar, ccexplore -- the menu programs.

ccmenubar_labeled.jpeg

2, starndard control programs

qsssieat_labeled.png qsssieat2_labeled.png qsssieat3_labeled.png qsssieat4_labeled.png [ATTACH]

3, guiaad programs

qssstaad_labeled.png qssstaad2_labeled.png

Advance

for more detail can run "Qt::assistant" on sam and search "stylesheet" or google "qt 4.8 qss" for full doco.

CONTROL/Software/Development/QSS (last edited 2017-04-13 07:44:18 by thog)