Tutoriala: Gehitu CSS pertsonalizatua gunean

Styling laneko eremuak zure guneko gai-ezaugarri batzuk editatzeko aukera ematen dizu, adibidez, letra-tipoak eta koloreak; hala ere, zure pertsonalizatutako CSS gaiak aplika ditzakezu.

Zure gaia sor dezakezu CSS fitxategi pertsonalizatu bat definitu eta zure gunera kargatuz.

Tutorial honetan, hauek egiten ikasiko duzu:

• Kargatu CSS fitxategi pertsonalizatu bat
• Editatu CSS Visual Studio Code weberako

Aurrebaldintzak

• Power Pages harpidetza edo proba. Lortu Power Pages proba hemen.
• Power Pages gunea sortu da. Sortu Power Pages gunea.
• Zure gogoko CSS editorea erabiliz sortutako gai pertsonalizatutako fitxategia.

Oharra

Sortzen duzun edozein gai pertsonalizatu Bootstrap v3-rekin bateragarria izan behar da.

Gehitu CSS pertsonalizatua gunean

Hurrengo bideoak CSS kode pertsonalizatua zure webgunean nola aplikatu erakusten dizu.

Adibide honetan, gure webguneko botoietan itzal-efektuak gehitzeko aukera emango duten CSS fitxategi pertsonalizatu batzuk gehituko ditugu. Zure pertsonalizatutako CSS fitxategi propioa erabil dezakezu edo emandako lagina erabil dezakezu.

1. Lagin bat sortzeko, zure gogoko CSS editorean, sortu button_shadow.css gai pertsonalizatuaren fitxategia eta gorde.

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

2. Joan Power Pages zerbitzura.

3. Hautatu gai pertsonalizatua gehitu nahi duzun gunea eta aukeratu Editatu.

4. Ireki Diseinua laneko area.

5. Hautatu gaia eta hautatu ... (elipsia), eta gero hautatu Kudeatu CSS.

   

6. Pertsonalizatua CSS atalean, hautatu Kargatu eta aukeratu zure CSS fitxategi pertsonalizatua. Fitxategi bat CSS bakarrik karga dezakezu aldi berean, baina hainbat fitxategi karga daitezke. Hainbat CSS fitxategik atributu bera eguneratzen badute, zerrendaren behealdean dagoen CSS fitxategiko atributuak aplikatuko dira. Zure pertsonalizatutako CSS fitxategien ordena doi dezakezu.

7. Berehala ikusi beharko zenituzke eguneraketen emaitzak orrialdeen mihisean.

   

8. Zure pertsonalizatutako CSS fitxategien ordena desgaitu edo mugi dezakezu. Azken zerrendatutako fitxategiak lehentasuna izango du gainerakoen gainetik.

   

9. Edita dezakezu CSS fitxategia zuzenean hautatuta elipsia (...) eta gero hautatu Editatu kodea. Urrats honek Visual Code weberako editorea irekiko du. Hautatu CTRL-S aldaketak gordetzeko.

   

10. Hautatu Sinkronizatu diseinu estudioan CSS eguneratzeko eta aldaketak ikusteko.

11. Hautatu Aurrebista zure webguneko gai pertsonalizatua ikusteko.

Oharra

Gai pertsonalizatua guztiz kentzeko, ezabatu Portal Management aplikazioan fitxategi-erregistroa.