Βήμα 12: Ορισμός προσαρμοσμένων στυλ

Τα συστατικά στοιχεία που δημιουργείτε αντιμετωπίζονται όπως οποιοδήποτε άλλο συστατικό στοιχείο στα αρχεία design.json και design.css στο θέμα που χρησιμοποιείται για την τοποθεσία σας.

Για να προσθέσετε το δικό σας στυλ στο προσαρμοσμένο συστατικό στοιχείο σας, επιβεβαιώστε την τιμή id που χρησιμοποιήσατε όταν εγγράψατε το συστατικό στοιχείο. Στο αρχείο appinfo.json αυτή ήταν "id": "hello-world".

Χρησιμοποιώντας αυτήν την τιμή, επεξεργαστείτε το αρχείο design.json του θέματος και προσθέστε τα νέα στυλ που θέλετε να υποστηρίζονται με αυτό το id. Για παράδειγμα, επεξεργαστείτε το αρχείο /designs/default/design.json στο θέμα σας και προσθέστε αυτόν τον κώδικα:

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

Εάν ανοίξετε τον πίνακα "Ρυθμίσεις" για το συστατικό στοιχείο σας, θα πρέπει τώρα να βλέπετε τα Plain (προεπιλογή) και Gothic ως τις δύο επιλογές που παρατίθενται στην καρτέλα "Στυλ". Ωστόσο, η εναλλαγή μεταξύ αυτών των επιλογών δεν θα αλλάξει κάτι, μέχρι να ορίσετε τις κλάσεις στυλ που παρατίθενται στο αρχείο design.css .

Επεξεργαστείτε το αρχείο design.css του θέματος και προσθέστε τις κλάσεις επικαλυπτόμενων φύλλων στυλ (CSS) για το στυλ σας. Για παράδειγμα, επεξεργαστείτε το αρχείο /designs/default/design.css στο θέμα σας και προσθέστε αυτόν τον κώδικα:

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

Αποθηκεύστε και συγχρονίστε τα αρχεία σας στον server του στιγμιότυπου Oracle Content Management.