Differences between revisions 3 and 23 (spanning 20 versions)
Revision 3 as of 2016-01-11 04:52:27
Size: 1422
Editor: clifford
Comment:
Revision 23 as of 2017-04-13 07:44:18
Size: 3434
Editor: thog
Comment:
Deletions are marked like this. Additions are marked like this.
Line 4: Line 4:
=== a, basic format directive following by declearations. === === a, basic format directive following by declearations, directive is the ClassName of the widgets. ===
Line 6: Line 6:
/* CCLabel is the directive also the ClassName ,the text in the {} pair are the declearation*/
CCLabel {
    font-size: 16pt;
    }
Line 7: Line 11:

Line 13: Line 15:
    font-size: 16pt;
    }
Line 16: Line 20:
/*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;
    }
Line 19: Line 48:
/*only CCBox with attribute CCColour equal "q" will affected by this declearation*/
CCBox[CCColour="g"] {
    border-style: inset;
    background-color: #DCEDE4;
    }
Line 24: Line 58:
Line 26: Line 59:
Line 29: Line 61:
Line 31: Line 62:
Line 33: Line 63:
Line 35: Line 64:
Line 37: Line 65:
Line 39: Line 66:
Line 41: Line 67:
Line 43: Line 68:
Line 45: Line 69:
Line 47: Line 70:
Line 49: Line 71:
Line 51: Line 72:
Line 53: Line 73:
Line 55: Line 74:
Line 57: Line 75:
= Examples = === 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 =
Line 60: Line 85:
{{attachment:ccmenubar_labeled.png}} {{attachment:ccmenubar_labeled.jpeg||height="211px",width="1173px"}}
Line 62: Line 87:
== 2, gui aad programs == == 2, starndard control programs ==
{{attachment:qsssieat_labeled.png||height="731px",width="1171px"}} {{attachment:qsssieat2_labeled.png||height="731px",width="1171px"}} {{attachment:qsssieat3_labeled.png||height="731px",width="1171px"}} {{attachment:qsssieat4_labeled.png||height="731px",width="1171px"}} {{attachment:menu_labeled.png||height="731px",width="1171px"}}

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

== 4, keyboard ==
{{attachment:qsssieat2_labeled2.png||height="731px",width="1171px"}} {{attachment:qsssieat2_labeled.png||height="731px",width="1171px"}}

= 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

4, keyboard

qsssieat2_labeled2.png qsssieat2_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)