Tutorial: Adăugați CSS personalizate site-ului dvs.

Spațiul de lucru pentru stilizare vă permite să editați unele dintre caracteristicile de teme ale site-ului dvs., cum ar fi fonturile și culorile; dar puteți aplica și propriile teme personalizate CSS.

Vă puteți crea propria temă definind un fișier CSS personalizat și încărcându-l pe site-ul dvs.

În acest tutorial, veți afla cum să:

  • Încărcați un fișier CSS particularizat
  • Editați CSS din Visual Studio Code pentru web

Cerințe preliminare

Notă

Orice temă personalizată pe care o creați trebuie să fie compatibilă cu Bootstrap v3.

Adăugați CSS particularizat la site-ul dvs.

Următorul videoclip vă arată cum să aplicați codul CSS personalizat site-ului dvs.

În acest exemplu, vom adăuga câteva fișiere CSS personalizate care ne vor permite să adăugăm efecte de umbră la butoanele de pe site-ul nostru. Puteți utiliza propriul fișier CSS personalizat sau puteți utiliza exemplul furnizat.

  1. Pentru a crea un eșantion, în editorul CSS preferat, creați fișierul button_shadow.css cu temă personalizată și salvați.

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

  2. Accesați Power Pages.

  3. Selectați site-ul la care doriți să adăugați tema personalizată și alegeți Editare.

  4. Deschideți spațiul de lucru Stilizare.

  5. Selectați o temă și selectați punctele de suspensie ..., apoi selectați Gestionați CSS.

    Deschideți panoul de gestionare CSS din spațiul de lucru Stilizare.

  6. În secțiunea Personalizat CSS, selectați Încărcați și alegeți fișierul CSS personalizat. Puteți încărca un singur fișier CSS o dată, dar pot fi încărcate mai multe fișiere. Dacă mai multe fișiere CSS actualizează același atribut, se vor aplica atributele din fișierul CSS din partea de jos a listei. Puteți ajusta ordinea fișierelor CSS personalizate.

  7. Ar trebui să vedeți imediat rezultatele actualizărilor pe pânza paginilor.

    Efectul de umbră al butonului din fișierul CSS încărcat.

  8. Puteți dezactiva sau schimba ordinea fișierelor CSS personalizate. Fișierul listat ultimul va avea prioritate față de celelalte.

    Dezactivați sau mutați ordinea fișierului CSS.

  9. Puteți edita un fișier CSS direct selectând punctele de suspensie (...) și apoi selectând Editați codul. Acest pas va deschide editorul Visual Code for Web. Pentru a vă salva modificările, selectați CTRL-S.

    Editați fișierul CSS în Visual Studio Code pentru web.

  10. În studioul de design, selectați Sincronizare pentru a actualiza CSS și a vizualiza modificările.

  11. Selectați Previzualizare pentru a vizualiza tema personalizată pe site.

Notă

Pentru a elimina complet tema personalizată, ștergeți înregistrarea fișierului web din aplicația de gestionare a portalului.

  • Last updated on