Μπορείτε να δημιουργήσετε μια καθορισμένη λίστα στυλ που μπορούν να εφαρμοστούν στα συστατικά στοιχεία σας από τους χρήστες.
Έχοντας μια προκαθορισμένη λίστα στυλ για τα συστατικά στοιχεία σας, ακολουθείτε το ίδιο μοντέλο με τον καθορισμό κλάσεων στυλ για συστατικά στοιχεία που παρέχονται από το Oracle Content Management μέσω των αρχείων σχεδίασης ενός θέματος. Ονομάζετε τις προσαρμοσμένες κλάσεις στυλ στο αρχείο appinfo.json
για το συστατικό στοιχείο.
Ορίζετε πρόσθετα στυλ στα αρχεία design.css
και design.json
. Το αρχείο json
παρέχει μια αντιστοιχία από το όνομα που θα εμφανιστεί στο περιβάλλον χρήστη στο όνομα της υποκείμενης πραγματικής κλάσης css
και το αρχείο css
παρέχει τις λεπτομέρειες για κάθε κλάση στυλ.
Το αρχείο design.json
έχει την ακόλουθη δομή για συστατικά στοιχεία:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-txt": { "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":[]
μπορεί να περιέχει μια λίστα στυλ για το συγκεκριμένο συστατικό στοιχείο. Το "name"
μπορεί είτε να είναι μια αναφορά σε μια ενσωματωμένη τοπικά προσαρμοσμένη συμβολοσειρά ή μια καθορισμένη τιμή για χρήση. Για παράδειγμα, το συστατικό στοιχείο Τίτλος παρέχει αυτά τα προεπιλεγμένα στυλ:
{ "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" } ] }
Οι τιμές ονομάτων αντιστοιχίζονται στις πραγματικές λέξεις που θα εμφανίζονται στο περιβάλλον χρήστη, με αυτόν τον τρόπο:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Το αρχείο css
παρέχει τους ορισμούς για τις τιμές κλάσεων:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Ως παράδειγμα, στο αρχείο design.json
του θέματος, μπορείτε να προσθέσετε καταχωρήσεις για το συστατικό στοιχείο σας με βάση την τιμή initialData.compomentId
που ορίζετε στο αρχείο components.json
:
"componentId": "news-article"
Οι αντίστοιχες καταχωρήσεις στο αρχείο design.json
θα είναι αυτές:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Οι αντίστοιχες καταχωρήσεις στο αρχείο design.css
θα είναι αυτές:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}