Share via

Zelfstudie: Aangepaste CSS toevoegen aan uw site

  • Artikel

Via de werkruimte Een opmaakmodel toepassen kunt u enkele themakenmerken van uw site bewerken, zoals lettertypen en kleuren. U kunt echter ook uw eigen aangepaste CSS-thema's toepassen.

U kunt uw eigen thema maken door een aangepast CSS-bestand op te geven en naar uw site te uploaden.

In deze zelfstudie leert u het volgende:

  • Een aangepast CSS-bestand uploaden
  • CSS in Visual Studio Code voor het web bewerken

Vereisten

Notitie

Elk aangepast thema dat u maakt, moet compatibel zijn met Bootstrap v3.

Aangepaste CSS toevoegen aan uw site

In de volgende video ziet u hoe u aangepaste CSS-code toepast op uw site.

In dit voorbeeld voegen we enkele aangepaste CSS-bestanden toe waarmee we schaduweffecten kunnen toevoegen aan knoppen op onze website. U kunt uw eigen CSS-bestand gebruiken of het meegeleverde voorbeeld kiezen.

  1. U kunt een voorbeeld maken door in uw favoriete CSS-editor het aangepaste themabestand button_shadow.css te maken en op te slaan.

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

  2. Ga naar Power Pages.

  3. Selecteer de site waaraan u het aangepaste thema wilt toevoegen en kies Bewerken.

  4. Open de werkruimte Een opmaakmodel toepassen.

  5. Selecteer een thema en selecteer het beletselteken ... en selecteer vervolgens CSS beheren.

    Het paneel CSS beheren openen via de werkruimte Stijl.

  6. Selecteer in de sectie Aangepaste CSSUploaden en kies uw aangepaste CSS-bestand. U kunt slechts één CSS-bestand tegelijk uploaden, maar er kunnen meerdere bestanden worden geüpload. Als meerdere CSS-bestanden hetzelfde kenmerk bijwerken, zijn de kenmerken in het CSS-bestand onderaan de lijst van toepassing. U kunt de volgorde van uw aangepaste CSS-bestanden aanpassen.

  7. U zou onmiddellijk de resultaten van de updates op het canvas van de pagina's moeten zien.

    Schaduweffect voor knoppen van geüpload CSS-bestand.

  8. U kunt de volgorde van uw aangepaste CSS-bestanden uitschakelen of verplaatsen. Het laatst genoemde bestand heeft voorrang boven de andere.

    De volgorde van het CSS-bestand uitschakelen.

  9. U kunt een CSS-bestand rechtstreeks bewerken door het beletselteken (...) te selecteren en vervolgens Code bewerken te selecteren. Met deze stap wordt de editor Visual Code voor het web geopend. Selecteer Ctrl-S om uw wijzigingen op te slaan.

    Bewerk het CSS-bestand in Visual Studio Code voor het web.

  10. Selecteer Synchroniseren in de ontwerpstudio om het CSS-bestand bij te werken en de wijzigingen te bekijken.

  11. Selecteer Voorbeeld om het aangepaste thema op uw site te bekijken.

Opmerking

Als u het aangepaste thema volledig wilt verwijderen, moet u de webbestandsrecord in de Portalbeheer-app verwijderen.