Όλα τα ενσωματωμένα συστατικά στοιχεία Τοποθεσίες μοιράζονται μια παρόμοια δομή κλάσεων CSS.
Κάθε συστατικό στοιχείο έχει τις ακόλουθες τρεις κλάσεις CSS που εφαρμόζονται στο πλέον εξωτερικό στοιχείο του <div>:
scs-component scs-type design-style
Ο τύπος είναι ο τύπος συστατικού στοιχείου (όπως εικόνα, συλλογή ή διαχωριστικό). Το στοιχείο design-style είναι η επιλεγμένη κλάση στυλ για ένα συστατικό στοιχείο, όπως ορίζεται στο αρχείο θέματος.
Βασικές πληροφορίες για τα στυλ θέματος
Το αρχείο design.json ενός θέματος παραθέτει όλα τα στυλ (πλαίσιο, σκίαση, επισήμανση, κ.ο.κ.) που μπορούν να εφαρμοστούν σε κάθε τύπο συστατικού στοιχείου (όπως κουμπί ή εικόνα). Κάθε στυλ έχει ένα εμφανιζόμενο όνομα και ένα όνομα κλάσης. Το εμφανιζόμενο όνομα εμφανίζεται στην καρτέλα "Στυλ" του πίνακα "Ρυθμίσεις". Το όνομα κλάσης αναφέρεται σε έναν επιλογέα CSS στο αρχείο design.css του θέματος. Για παράδειγμα, ακολουθεί η καταχώρηση για το συστατικό στοιχείο κουμπί:
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
Τα ονόματα των ενσωματωμένων συστατικών στοιχείων μεταφράζονται, οπότε βλέπετε ένα κλειδί για να λάβετε το όνομα στυλ από το πακέτο πόρων. Αν προσθέστε ένα συστατικό στοιχείο κουμπί σε μια σελίδα και, στη συνέχεια, επιλέξετε το στυλ Απλό στον πίνακα Ρυθμίσεις > Στυλ, το αρχείο design.json συσχετίζει το εμφανιζόμενο όνομα Απλό (κλειδί COMP_STYLE_SIMPLE) με το όνομα κλάσης scs-button-style-3. Το κουμπί θα αποδοθεί με τις ακόλουθες κλάσεις:
scs-component scs-button scs-button-style-3
Αν δεν έχει επιλεγεί στυλ για ένα συγκεκριμένο συστατικό στοιχείο, χρησιμοποιείται το προεπιλεγμένο στυλ scs-type-default-style. Στο προηγούμενο παράδειγμα, το κουμπί θα αποδοθεί με τις ακόλουθες κλάσεις:
scs-component scs-button scs-button-default-style
Το στυλ scs-component-content
Για κάθε ενσωματωμένο συστατικό στοιχείο, εντός του scs-component <div> που αναφέρθηκε προηγουμένως, υπάρχει ένα content <div> με την κλάση CSS scs-component-content. Με άλλα λόγια:
scs-component scs-type design-style scs-component-content
Στο αρχείο design.css, η κλάση scs-component-content χρησιμοποιείται συχνά για το στυλ του "πλαισίου" γύρω από το συστατικό στοιχείο (για παράδειγμα, για την εφαρμογή περιγράμματος ή σκίασης).
Αξίζει να σημειωθεί ότι στο ενσωματωμένο αρχείο comp.css, η κοινή κλάση scs-component-content ορίζεται με τις ιδιότητες position:relative και display:inline-block, μεταξύ άλλων ιδιοτήτων CSS.
Παρόλο που η κλάση scs-component-content είναι χρήσιμη για το στυλ του "πλαισίου" γύρω από κάθε συστατικό στοιχείο, απαιτούνται κλάσεις συγκεκριμένες για συστατικά στοιχεία για να ορίσετε πλήρως το στυλ ενός συστατικού στοιχείου. Ανατρέξτε στην ενότητα Στυλ συγκεκριμένα για συστατικά στοιχεία.