Differences between revisions 6 and 23 (spanning 17 versions)
Revision 6 as of 2016-01-11 05:02:45
Size: 2583
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 ,the text in the {} pair are the declearation*/ /* CCLabel is the directive also the ClassName ,the text in the {} pair are the declearation*/
Line 75: 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 78: Line 85:
{{attachment:ccmenubar_labeled.png}} {{attachment:ccmenubar_labeled.jpeg||height="211px",width="1173px"}}
Line 81: Line 88:
{{attachment:qsssieat_labeled.png}} {{attachment:qsssieat2_labeled.png}} {{attachment:qsssieat3_labeled.png}} {{attachment:qsssieat4_labeled.png}} {{attachment:menu_labeled.png}} {{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"}}
Line 83: Line 91:
{{attachment:qssstaad_labeled.png}} {{attachment:qssstaad2_labeled.png}} {{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)