Στυλ συγκεκριμένα για συστατικά στοιχεία

Συστατικό στοιχείο εικόνας

Το συστατικό στοιχείο εικόνας έχει την ακόλουθη δομή κλάσης CSS κάτω από την κλάση scs-component-content:

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

Η κλάση scs-image-image εφαρμόζεται στην ίδια την ετικέτα <img>. Η κλάση scs-image-caption χρησιμοποιείται για την εφαρμογή στυλ στη λεζάντα, εάν αυτή υπάρχει.

Η κλάση scs-image-link υπάρχει μόνο αν η εικόνα έχει συνημμένο έναν δεσμό. Ούτε αυτή, ούτε η κλάση scs-image-container απαιτούν συνήθως προσαρμοσμένο στυλ.

Ως προεπιλογή, η λεζάντα εικόνας αποδίδεται ως μια ημιδιαφανής επικάλυψη που εξαπλώνεται έως το κάτω μέρος της εικόνας.

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

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

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

Συστατικό στοιχείο κουμπιού

Το συστατικό στοιχείο κουμπιού έχει την ακόλουθη δομή κλάσεων:

scs-button-button
    scs-button-text

Η κλάση scs-button-button είναι το στοιχείο με δυνατότητα επιλογής <div>, το οποίο έχει στυλ ώστε να μοιάζει με κουμπί. Η κλάση scs-button-text χρησιμοποιείται για την εφαρμογή στυλ στο κείμενο μέσα στο κουμπί.

Για παράδειγμα, δοκιμάστε να αλλάξετε την εμφάνιση και την αίσθηση του συστατικού στοιχείου κουμπιού προσθέτοντας πρόσθετο στυλ για αυτό στο αρχείο design.json και, στη συνέχεια, ορίστε CSS για αυτό στο αρχείο design.css.

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

Έγγραφο

Το συστατικό στοιχείο εγγράφου έχει την ακόλουθη δομή κλάσεων:

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

Η κλάση scs-document-container περιβάλλει τη λειτουργία προβολής εγγράφων και κανονικά δεν διαθέτει στυλ.

Συλλογή

Το συστατικό στοιχείο συλλογής έχει μία μοναδική κλάση που περιβάλλει το υποκείμενο συστατικό στοιχείο ρυθμιστικού JSSOR:

scs-gallery-container 

Το ρυθμιστικό JSSOR χρησιμοποιεί αρκετές κλάσεις στις οποίες μπορείτε επίσης να εφαρμόσετε στυλ:

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

Πλέγμα συλλογής

Οι κλάσεις που χρησιμοποιούνται για το συστατικό στοιχείο Πλέγμα συλλογής εξαρτώνται από τη διάταξη και την περικοπή που έχουν επιλεγεί στο παράθυρο Ρυθμίσεις:

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

Ανάλογα με τις ρυθμίσεις περικοπής και διάταξης που έχουν επιλεγεί για το Πλέγμα συλλογής, η τιμή layout \θα επεκταθεί, θα περικοπεί, θα εφαρμοστεί ή θα ρέει.

Η κλάση scs-gallerygrid-cell υπάρχει μόνο για τις διατάξεις Στήλης.

Γραμμή κοινωνικών μέσων

Το συστατικό γραμμής κοινωνικών μέσων έχει την ακόλουθη δομή κλάσεων:

scs-socialbar-container
  scs-socialbar-icon

Η κλάση scs-socialbar-icon εφαρμόζεται σε κάθε ετικέτα <img> στη γραμμή κοινωνικών μέσων.

Παράγραφος

Το συστατικό στοιχείο παραγράφου διαθέτει μόνο μία μοναδική κλάση που περιβάλλει το πραγματικό κείμενο παραγράφου:

scs-paragraph-text 

Για παράδειγμα, για να μετατρέψετε το κείμενο που συνεισφέρετε στο συστατικό στοιχείο Παράγραφος ώστε να έχει ένα εφέ ανάγλυφου κειμένου πάνω σε μέταλλο, προσθέστε μια πρόσθετη κλάση στυλ στο αρχείο design.json και, στη συνέχεια, ορίστε CSS για αυτή στο αρχείο design.css.

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

Ή αν θέλετε κάτι πιο εντυπωσιακό, χρησιμοποιήστε κάτι σαν το επόμενο παράδειγμα.

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

Τίτλος

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

scs-title-text 

Χάρτης

Το συστατικό στοιχείο χάρτη διαθέτει μόνο μία μοναδική κλάση που περιβάλλει την απόδοση του χάρτη:

scs-map-content

Αυτή η κλάση δεν διαθέτει κανονικά στυλ.

Προσαρμοσμένο τοπικό συστατικό στοιχείο

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

scs-custom-component-wrapper 

Έχετε πλήρη έλεγχο των στυλ CSS που πρέπει να χρησιμοποιείτε για την απόδοση προσαρμοσμένης προβολής για το προσαρμοσμένο τοπικό συστατικό στοιχείο σας. Ένα τοπικό συστατικό στοιχείο αποδίδεται ενσωματωμένο; δηλαδή, μπορείτε να εφαρμόσετε άμεσα στυλ CSS που έχουν οριστεί στο θέμα σας ή στο αρχείο design.css.

Προσαρμοσμένο απομακρυσμένο συστατικό στοιχείο

Το προσαρμοσμένο απομακρυσμένο συστατικό στοιχείο διαθέτει μόνο μία μοναδική κλάση που περιβάλλει το πλαίσιό του:

scs-app-iframe-wrapper

Επιπλέον από την εφαρμογή στυλ CSS που ορίζονται στο προσαρμοσμένο απομακρυσμένο συστατικό στοιχείο σας, μπορείτε να αξιοποιήσετε SDK τοποθεσιών για να ανακτήσετε ένα αρχείο design.css από την τοποθεσία κεντρικού υπολογιστή.

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

Έτσι, μπορείτε να κάνετε το συστατικό στοιχείο σας να κληρονομήσει το στυλ από το στυλ του κεντρικού υπολογιστή.

Διαχωριστικό

Παρόλο που δεν υπάρχουν κλάσεις συγκεκριμένα για το συστατικό στοιχείο Διαχωριστικό, μπορείτε να εφαρμόσετε στυλ στην ίδια την ετικέτα <hr>.

Για παράδειγμα, μπορείτε να δημιουργήσετε ένα διαχωριστικό με τελείες:

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

Βίντεο, YouTube, Διάστημα

Δεν υπάρχουν κλάσεις συγκεκριμένα για τα συστατικά στοιχεία Βίντεο, YouTube ή Διάστημα.