Ενημέρωση του θέματος για άλλους για επιλογή του στυλ συστατικού στοιχείου H1

Μπορείτε να εγγράψετε στυλ για το συστατικό στοιχείο σας στο θέμα, ώστε οι άλλοι χρήστες να μπορούν να αλλάξουν μεταξύ των στυλ που παρέχετε για το συστατικό στοιχείο σας από τον πίνακα ρυθμίσεων ή την καρτέλα "Στυλ".

1. Προσθέστε μερικά ακόμα στυλ στο αρχείο design.css του συστατικού στοιχείου σας. Προσθέστε ως πρόθημα σε κάθε στυλ το εγγεγραμμένο στοιχείο styleClassName του συστατικού στοιχείου, όπως ορίζεται στο αρχείο appinfo.json. Για αυτό το συστατικό στοιχείο, αυτό το πρόθημα είναι h1-component.

   Έχουν προστεθεί δύο ακόμα στυλ h1-component-gothic-style και h1-component-courier-style.

   Τα νέα περιεχόμενα του αρχείου design.css θα είναι τώρα τα εξής:

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }
   .h1-component-gothic-style .scs-component-content {
    font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
    font-size: 32px;
    font-weight: bold; }
   .h1-component-courier-style .scs-component-content {
    font-family: "Courier";
    font-size: 32px;
    font-weight: bold; }

2. Εγγράψτε τα στυλ σας στο αρχείο design.json του θέματος. Μπορείτε να βρείτε αυτό το αρχείο στο θέμα που χρησιμοποιεί η τοποθεσία. Εμφανίστε τις λεπτομέρειες των αρχείων θέματος στον φάκελο σχεδίων, στη συνέχεια, στον φάκελο προεπιλογών και προσθέστε μια ενότητα για το συστατικό στοιχείο σας στο αρχείο design.json.

   Το έντονο κείμενο που ακολουθεί είναι ένα παράδειγμα του τι να προσθέσετε:

              "news-article": {
                       "styles": [{
                                         "name": "News Article 1",
                                         "class": "news-article-default-style"
                                         },
                       {
                                         "name": "News Article 2",
                                         "class": "news-article-style-1"
                                         }
                                  ]
              }, 
              "h1-component": { 
       "styles": [{ 
         "name": "Plain", 
         "class": "h1-component-default-style" 
      }, { 
               "name": "Courier", 
               "class": "h1-component-courier-style" 
      }, { "name": "Gothic", 
           "class": "h1-component-gothic-style" 
      }] 
     }
     },
     "componentIcons": {
             "scs-socialbar": {
                       "icons": [