Εκπαιδευτικό βοήθημα: Προσθήκη προσαρμοσμένου CSS στην τοποθεσία σας

Ο χώρος εργασίας στυλ σάς επιτρέπει να επεξεργαστείτε ορισμένες από τις δυνατότητες θέματος της τοποθεσίας σας, όπως γραμματοσειρές και χρώματα. Ωστόσο, μπορείτε να εφαρμόσετε τα δικά σας προσαρμοσμένα CSS θέματα.

Μπορείτε να δημιουργήσετε το δικό σας θέμα καθορίζοντας ένα προσαρμοσμένο αρχείο CSS και στέλνοντάς το στην τοποθεσία σας.

Σε αυτό το εκπαιδευτικό βοήθημα, θα μάθετε πώς μπορείτε να κάνετε τα εξής:

• Αποστολή προσαρμοσμένου αρχείου CSS
• Επεξεργασία CSS σε Visual Studio Code για το Web

Προϋποθέσεις

• Συνδρομή ή δοκιμαστική έκδοση του Power Pages. Αποκτήστε μια δωρεάν δοκιμαστική έκδοση του Power Pages εδώ.
• Δημιουργήθηκε μια τοποθεσία Power Pages. Δημιουργία τοποθεσίας Power Pages.
• Ένα προσαρμοσμένο θέμα αρχείου δημιουργήθηκε με χρήση του αγαπημένου σας προγράμματος επεξεργασίας CSS.

Σημείωμα

Οποιοδήποτε προσαρμοσμένο θέμα που δημιουργείτε πρέπει να είναι συμβατό με το Bootstrap v3.

Προσθήκη προσαρμοσμένου CSS στην τοποθεσία σας

Το παρακάτω βίντεο σάς δείχνει πώς να εφαρμόζετε προσαρμοσμένο κώδικα CSS στην τοποθεσία σας.

Σε αυτό το παράδειγμα, θα προσθέσουμε ορισμένα προσαρμοσμένα αρχεία CSS τα οποία θα μας επιτρέψουν να προσθέσουμε εφέ σκιάς στα κουμπιά στην τοποθεσία Web μας. Μπορείτε να χρησιμοποιήσετε το δικό σας προσαρμοσμένο αρχείο CSS ή να χρησιμοποιήσετε το παρεχόμενο δείγμα.

1. Για να δημιουργήσετε ένα δείγμα, στο δικό σας πρόγραμμα επεξεργασίας CSS, δημιουργήστε το προσαρμοσμένο αρχείο θέματος button_shadow.css και αποθηκεύστε το.

   .button1 {
   box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
    }
   

2. Μετάβαση σε Power Pages.

3. Επιλέξτε την τοποθεσία στην οποία θέλετε να προσθέσετε το προσαρμοσμένο θέμα και επιλέξτε Επεξεργασία.

4. Ανοίξτε τον χώρο εργασίας Στυλ.

5. Επιλέξτε ένα θέμα και επιλέξτε ... (ellipses) και έπειτα επιλέξτε Διαχείριση CSS.

   

6. Στην ενότητα Προσαρμογή CSS, επιλέξτε Αποστολή και επιλέξτε το προσαρμοσμένο αρχείο σας CSS. Μπορείτε να αποστείλετε μόνο ένα CSS αρχείο κάθε φορά, αλλά είναι δυνατή η αποστολή πολλών αρχείων. Εάν πολλά CSS αρχεία ενημερώσουν το ίδιο χαρακτηριστικό, θα εφαρμοστούν τα χαρακτηριστικά στο αρχείο CSS στο κάτω μέρος της λίστας. Μπορείτε να προσαρμόσετε τη σειρά των προσαρμοσμένων αρχείων σας CSS.

7. Θα πρέπει να δείτε αμέσως τα αποτελέσματα των ενημερώσεων στον καμβά σελίδων.

   

8. Μπορείτε να απενεργοποιήσετε ή να μετακινήσετε τη σειρά των προσαρμοσμένων αρχείων σας CSS. Το αρχείο που παρατίθεται τελευταίο θα έχει προτεραιότητα έναντι των άλλων.

   

9. Μπορείτε να επεξεργαστείτε ένα αρχείο CSS επιλέγοντας απευθείας τα αποσιωπητικά (...) και έπειτα επιλέγοντας Επεξεργασία κώδικα. Αυτό το βήμα θα ανοίξει το πρόγραμμα επεξεργασίας Visual Code for the Web. Επιλέξτε CTRL-S για να αποθηκευτούν οι αλλαγές σας.

   

10. Επιλέξτε Συγχρονισμός στο στούντιο σχεδίασης για να ενημερώσετε το CSS και να προβάλετε τις αλλαγές.

11. Επιλέξτε Προεπισκόπηση για να προβάλετε το προσαρμοσμένο θέμα στην τοποθεσία σας.

Σημείωμα

Για να καταργήσετε τελείως το προσαρμοσμένο θέμα, διαγράψτε την καρτέλα του αρχείου web στην εφαρμογή διαχείρισης πύλης.