Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Aussehen von SharePoint WebParts mit HTML Css ändern

16.03.2020 (👁135)

SharePoint Aussehen von WebPart ändern

Das Aussehen von WebPart Elementen wird in der src\webparts\WebPart.module.css als HTML Style Blöcke geändert.

Hier der CSS Code für die Listen-Elemente

//--< Style: List >---

    .list {

      color#333333;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin10;

      padding10;

      line-height50px;

      list-style-typenone;

      box-shadow0 4px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

    }

    

    .listItem {

      color#333333;

      vertical-aligncenter;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin0;

      padding0;

      box-shadownone;

      *zoom1;

      padding9px 28px 3px;

      positionrelative;

    }

    //--</ Style: List >---


Anschliessend wird der Style in einem Control angewendet, mit

<div class="${styles.List}">


@import '~office-ui-fabric-react/dist/sass/References.scss';

.webPart01 {

  .container {

    max-width700px;

    margin0px auto;

    box-shadow0 2px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

  }

  .row {

    @include ms-Grid-row;

    @include ms-fontColor-white;

    background-color$ms-color-themeDark;

    padding20px;

  }

  .column {

    @include ms-Grid-col;

    @include ms-lg10;

    @include ms-xl8;

    @include ms-xlPush2;

    @include ms-lgPush1;

  }

  .title {

    @include ms-font-xl;

    @include ms-fontColor-white;

  }

  .subTitle {

    @include ms-font-l;

    @include ms-fontColor-white;

  }

  .description {

    @include ms-font-l;

    @include ms-fontColor-white;

  }

  .button {

    // Our button

    text-decorationnone;

    height32px;

    // Primary Button

    min-width80px;

    background-color$ms-color-themePrimary;

    border-color$ms-color-themePrimary;

    color$ms-color-white;

    // Basic Button

    outlinetransparent;

    positionrelative;

    font-family"Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;

    -webkit-font-smoothingantialiased;

    font-size$ms-font-size-m;

    font-weight$ms-font-weight-regular;

    border-width0;

    text-aligncenter;

    cursorpointer;

    displayinline-block;

    padding0 16px;

    .label {

      font-weight$ms-font-weight-semibold;

      font-size$ms-font-size-m;

      height32px;

      line-height32px;

      margin0 4px;

      vertical-aligntop;

      displayinline-block;

    }

  }

  //--< Style: List >---

    .list {

      color#333333;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin10;

      padding10;

      line-height50px;

      list-style-typenone;

      box-shadow0 4px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

    }

    

    .listItem {

      color#333333;

      vertical-aligncenter;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin0;

      padding0;

      box-shadownone;

      *zoom1;

      padding9px 28px 3px;

      positionrelative;

    }

    //--</ Style: List >---

}