Αρχεία σχεδίων

Δύο αρχεία θεωρούνται τα προεπιλεγμένα αρχεία σχεδίων για ένα θέμα: design.json και design.css.

design.json καθορίζει στυλ για συστατικά στοιχεία
design.css παρέχει ορισμούς για τιμές κλάσεων (όπως χρώμα και γραμματοσειρά)

Αυτά τα αρχεία βρίσκονται στον κατάλογο /designs/default/ σε μια δομή θέματος.

Αρχείο design.json

Το αρχείο design.json έχει την ακόλουθη δομή:

{
    "componentStyles": {
        "scs-image": {
            "styles": []
        },
        "scs-map": {
            "styles": []
        },
        "scs-title": {
            "styles": []
        },
        "scs-paragraph": {
            "styles": []
        },
        "scs-divider": {
            "styles": []
        },
        "scs-button": {
            "styles": []
        },
        "scs-app": {
            "styles": []
        },
        "scs-spacer": {
        },
        "scs-gallery": {
            "styles": []
        },
        "scs-youtube": {
            "styles": []
        },
        "scs-socialbar": {
            "styles": []
        },
        "scs-document": {
            "styles": []
        }
    }
}

Κάθε μία από τις καταχωρήσεις "styles":[] μπορεί να περιέχει μια λίστα στυλ για το συγκεκριμένο συστατικό στοιχείο. Για παράδειγμα, το συστατικό στοιχείο τίτλου παρέχει αυτά τα προεπιλεγμένα στυλ:

    "styles": [{
                    "name": "COMP_STYLE_FLAT",
                    "class": "scs-title-default-style"
               },
               {
                     "name": "COMP_STYLE_HIGHLIGHT",
                     "class": "scs-title-style-2"
               },
               {
                     "name": "COMP_STYLE_DIVIDER",
                     "class": "scs-title-style-3"
               }
    ]

Σημείωση:

Αν δημιουργείτε προσαρμοσμένα στυλ για ένα συστατικό στοιχείο και τα αντιστοιχίσετε σε στυλ στο αρχείο design.json, δεν χρειάζεται να χρησιμοποιήσετε το πλήρες όνομα όπως αυτά που παρέχονται με το σύστημα. Καθορίστε απλώς τη συμβολοσειρά που θέλετε να χρησιμοποιήσετε. Για παράδειγμα, αντί για "COMP_STYLE_BOX" για το όνομα, απλώς χρησιμοποιήστε "Box". Αυτό σημαίνει ότι μόνο το όνομα "Box" θα εμφανίζεται στη λίστα για την καρτέλα "Στυλ" του πίνακα ρυθμίσεων για αυτό το συστατικό στοιχείο, αντί για το όνομα "COMP_STYLE_BOX".

Οι τιμές ονομάτων αντιστοιχίζονται στις πραγματικές λέξεις που θα εμφανίζονται στο περιβάλλον χρήστη, με αυτόν τον τρόπο:

                "COMP_STYLE_FLAT": "Flat",
                "COMP_STYLE_HIGHLIGHT": "Highlight",
                "COMP_STYLE_DIVIDER": "Divider",

Αρχείο design.css

Το αρχείο design.css παρέχει τους ορισμούς για τις τιμές κλάσεων. Ακολουθούν λίγα παραδείγματα.

.scs-title-default-style {
  color: #333333;
  display: block;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.scs-title-style-2 {
  background-color: #DEF300;
  color: #333333;
  font-family: adobe-clean, sans-serif;
  padding-top: 2em;
  padding-bottom: 2em; }

.scs-button-default-style .scs-button-button:hover {
  background: #f7f8f9;
  border: 1px solid #c4ced7;
  color: #0572ce;
  box-shadow: inset 0 1px 0 #f7f8f9;
  text-shadow: 0 1px 0 #f7f8f9; }

.scs-button-default-style .scs-button-button:active {
  background: #0572ce;
  border: 1px solid #0572ce;
  color: #fff;
  box-shadow: inset 0 1px 0 #0572ce;
  text-shadow: 0 1px 0 #0572ce; }