Differences between revisions 4 and 23 (spanning 19 versions)
⇤ ← Revision 4 as of 2016-01-11 04:57:50 →
Size: 2355
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*/
Line 19: Line 20:
/*enabled, pressed and disabled CCDDPushButton will look different*/
Line 46: Line 48:
/*only CCBox with attribute CCColour equal "q" will affected by this declearation*/
Line 55: Line 58:
Line 57: Line 59:
Line 60: Line 61:
Line 62: Line 62:
Line 64: Line 63:
Line 66: Line 64:
Line 68: Line 65:
Line 70: Line 66:
Line 72: Line 67:
Line 74: Line 68:
Line 76: Line 69:
Line 78: Line 70:
Line 80: Line 71:
Line 82: Line 72:
Line 84: Line 73:
Line 87: 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 90: Line 85:
{{attachment:ccmenubar_labeled.png}} {{attachment:ccmenubar_labeled.jpeg||height="211px",width="1173px"}}
Line 93: Line 88:
{{attachment:qsssieat_labeled.png}}
{{attachment:qsssieat2_labeled.png}}
{{attachment:qsssieat3_labeled.png}}
{{attachment:qsssieat4_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 99: 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)