Med style.css kan du påverka hur dina svg-symboler ser ut i olika tillstånd. Du kan också skapa en unik grafisk standard för dina rubriker, texter och taggar för varje symbol. Varje bibliotek har sin egen style.css. När du skapar stilar i denna fil är det viktigt att du namnger "sökvägarna" till klasserna korrekt.
Exempel 1
Här är ett exempel på hur en "sökväg" till en klass kan se ut:.fastighet-svg.Fan.on .ind_on {
fill: #23d879;
}
.fastighet-svg är namnet på biblioteket
.fan är namnet (ID) på symbolen
.on är i detta fall ett tillstånd
.ind_on är den klass som satts på det specifika elementet i svg-bilden. I det här exemplet byter vi färg på elementet när tillståndet är "on".
En annan sak du kan göra med style.css är att ställa in unika textstilar för ditt symbolbibliotek. Om du vill skapa en generisk stil för alla symbolbibliotek bör du istället lägga till stilen i /assets/theme/style.css.
Tips!
Du kan redigera standardfärgen för alla suffix. Gå till din webbportkatalog/assets/theme/style.css på den lokala datorn och öppna den. Här kan du ändra vilken färg varje suffix ska presenteras i under en symbol.
I dessa filer finns exempelklasser som visar hur man ändrar textstilarna. Nedan följer ytterligare ett exempel:
Exempel 2
.fastighet-svg.WpCompV2 .wpCompText .NAME
{
font-weight:bold;
}
I detta exempel ändrar vi rubriken på alla symboler till fet.
Här är en lista över standardklasser:
| Klass | Beskrivning |
| .fastighet-svg.WpCompV2 .wpCompText .NAME | stil för rubrik |
| .fastighet-svg.WpCompV2 .wpCompTag | stil för beskrivning och taggvärde |
| .fastighet-svg.WpCompV2 .wpCompTag .wpCompDescription | stil för beskrivning av värde |
| .fastighet-svg.WpCompV2 .wpCompTag .wpCompTagValue | stil för värde |
| .fastighet-svg.WpCompV2 .wpCompSelectBox | stil för rutan som innehåller symbolen och alla dess texter |
| .fastighet-svg.WpCompV2 .wpCompImage | stil runt symbolen |
Standard style.css fil
/* General styles */
.TEXT {white-space: nowrap; font-weight: normal;}
.NAME {white-space: nowrap; font-weight: normal;}
.PV {color: #000080; white-space: nowrap; font-weight: normal;}
.OP {color: #000080; white-space: nowrap; font-weight: normal;}
.SP {color: #005500; white-space: nowrap; font-weight: normal;}
.CSP {color: #AA00AA; white-space: nowrap; font-weight: normal;}
.PV1 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV2 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV3 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV4 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV5 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV6 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV7 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV8 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV9 {color: #000080; white-space: nowrap; font-weight: normal;}
.PV10 {color: #000080; white-space: nowrap; font-weight: normal;}
.CNT {color: #000080; white-space: nowrap; font-weight: normal;}
.DT {color: #000080; white-space: nowrap; font-weight: normal;}
.F {color: #000080; white-space: nowrap; font-weight: normal;}
.U1 {color: #000080; white-space: nowrap; font-weight: normal;}
.U2 {color: #000080; white-space: nowrap; font-weight: normal;}
.U3 {color: #000080; white-space: nowrap; font-weight: normal;}
.U12 {color: #000080; white-space: nowrap; font-weight: normal;}
.U21 {color: #000080; white-space: nowrap; font-weight: normal;}
.U23 {color: #000080; white-space: nowrap; font-weight: normal;}
.U31 {color: #000080; white-space: nowrap; font-weight: normal;}
.I1 {color: #000080; white-space: nowrap; font-weight: normal;}
.I2 {color: #000080; white-space: nowrap; font-weight: normal;}
.I3 {color: #000080; white-space: nowrap; font-weight: normal;}
.COSFI {color: #000080; white-space: nowrap; font-weight: normal;}
.Q {color: #000080; white-space: nowrap; font-weight: normal;}
.P {color: #000080; white-space: nowrap; font-weight: normal;}
.P1 {color: #000080; white-space: nowrap; font-weight: normal;}
.P2 {color: #000080; white-space: nowrap; font-weight: normal;}
.P3 {color: #000080; white-space: nowrap; font-weight: normal;}
.E {color: #000080; white-space: nowrap; font-weight: normal;}
.E1 {color: #000080; white-space: nowrap; font-weight: normal;}
.E2 {color: #000080; white-space: nowrap; font-weight: normal;}
.E3 {color: #000080; white-space: nowrap; font-weight: normal;}
.ED {color: #000080; white-space: nowrap; font-weight: normal;}
.EV {color: #000080; white-space: nowrap; font-weight: normal;}
.EM {color: #000080; white-space: nowrap; font-weight: normal;}
.CMD {color: #35ff35; white-space: nowrap; font-weight: normal;}
.CMD1 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.CMD2 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V0 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V1 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V2 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V3 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V4 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V5 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V6 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V7 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V8 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V9 {color: #35ff35; white-space: nowrap; font-weight: normal;}
.V10 {color: #35ff35; white-space: nowrap; font-weight: normal;}
/*Standard style library objects*/
/*------------------------------*/
/*name of object*/
.WpCompV2 .wpCompText .NAME {
}
/*tag/description of object*/
.WpCompV2 .wpCompTag {
}
/*tag description of object*/
.WpCompV2 .wpCompTag .wpCompDescription {
}
/*tag value of object*/
.WpCompV2 .wpCompTag .wpCompTagValue {
}
/*div around symbol and texts*/
.WpCompV2 .wpCompSelectBox {
}
/*div around symbol*/
.WpCompV2 .wpCompImage {
}
/*------------END---------------*/
.ALARMTAG {
color: #35ff35;
/*white-space: nowrap;*/
font-weight: normal;
cursor: pointer;
}
.ALARMTAG.NONE {color: #35ff35;}
.ALARMTAG.OK {color: #35ff35;}
.ALARMTAG.OK_NACK {color: #AECC5D;}
.ALARMTAG.ALARM {color: #FF9C4C;}
.ALARMTAG.ALARM_NACK {color: #FF2626;}
.ALARMTAG.BLOCKED {color: #F2EFC1;}
/* Alarm-list */
.datatable tr.OK_NACK .alStateImage,.datatable tr.OK_NACK .alStateImageText
{
background-image: url('/images/ico16/bullet_error.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
.datatable tr.OK .alStateImage,.datatable tr.OK .alStateImageText
{
background-image: url('/images/ico16/bullet_green.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
.datatable tr.ALARM_NACK .alStateImage, .datatable tr.ALARM_NACK .alStateImageText
{
background-image: url('/images/ico16/bell_error.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
.datatable tr.ALARM .alStateImage, .datatable tr.ALARM .alStateImageText
{
background-image: url('/images/ico16/bell.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
.datatable tr.BLOCKED .alStateImage, .datatable tr.BLOCKED .alStateImageText
{
background-image: url('/images/ico16/bell_delete.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
.datatable tr.odd, .datatable tr.odd.a:link, .datatable tr.odd.a:visited { color: #000; border-bottom: 1px solid #fff; }
.datatable tr.odd a:link, .datatable tr.odd a:visited { color: #000; }
.datatable tr.odd.NONE {background-color: #F2F2F2 !important;}
.datatable tr.odd.NONE td.sorting_1 {background-color: #D8D8D8 !important;}
.datatable tr.odd.OK, .datatable tr.odd.ON {background-color: #6BB247 !important;}
.datatable tr.odd.OK td.sorting_1, .datatable tr.odd.ON td.sorting_1 {background-color: #60AD34 !important;}
.datatable tr.odd.OK_NACK {background-color: #B0CC66 !important;}
.datatable tr.odd.OK_NACK td.sorting_1 {background-color: #ADCC51 !important;}
.datatable tr.odd.ALARM {background-color: #FFBC66 !important;}
.datatable tr.odd.ALARM td.sorting_1 {background-color: #FFAB4C !important;}
.datatable tr.odd.ALARM_NACK {background-color: #FF5959 !important;}
.datatable tr.odd.ALARM_NACK td.sorting_1 {background-color: #FF3F3F !important;}
.datatable tr.odd.BLOCKED {background-color: #FFEBBF !important; color: #000;}
.datatable tr.odd.BLOCKED td.sorting_1 {background-color: #FFE5A5 !important; color: #000;}
.datatable tr.odd td img { vertical-align: bottom; }
.datatable tr.even, .datatable tr.even.a:link, .datatable tr.even.a:visited { color: #000; border-bottom: 1px solid #fff;}
.datatable tr.even a:link, .datatable tr.even a:visited { color: #000; }
.datatable tr.even.NONE {background-color: #E5E5E5 !important;}
.datatable tr.even.NONE td.sorting_1 {background-color: #CCCCCC !important;}
.datatable tr.even.OK, .datatable tr.even.ON {background-color: #65AF3D !important;}
.datatable tr.even.OK td.sorting_1, .datatable tr.even.ON td.sorting_1 {background-color: #59AA2A !important;}
.datatable tr.even.OK_NACK {background-color: #AECC5B !important;}
.datatable tr.even.OK_NACK td.sorting_1 {background-color: #AACC47 !important;}
.datatable tr.even.ALARM {background-color: #FFB459 !important;}
.datatable tr.even.ALARM td.sorting_1 {background-color: #FFA23F !important;}
.datatable tr.even.ALARM_NACK {background-color: #FF4C4C !important;}
.datatable tr.even.ALARM_NACK td.sorting_1 {background-color: #FF3232 !important;}
.datatable tr.even.BLOCKED {background-color: #FFE8B2 !important; color: #000;}
.datatable tr.even.BLOCKED td.sorting_1 {background-color: #FFE399 !important; color: #000;}
.datatable tr.even td img { vertical-align: bottom; }
.datatable tr.click:hover { opacity: 0.9 !important; cursor: pointer; }
.datatable tr.clickable:hover { opacity: 0.9 !important; cursor: pointer; }