Re: Change color and size of Button in XML View via CSS

Hi Dominic,

First configure the App control with your own custom namespace class and this class is used in the definition of the CSS rules to define CSS classes that are only valid for this app.

Example from Walkthrough tutorials:

<mvc:View

   controllerName="sap.ui.demo.wt.controller.App"

   xmlns="sap.m"

   xmlns:mvc="sap.ui.core.mvc"

   displayBlock="true">

   <App class="myAppDemoWT">  // App control custom css class

      <pages>

         <Page title="{i18n>homePageTitle}">

            <content>

               <Panel

                  headerText="{i18n>helloPanelTitle}"

                  class="sapUiResponsiveMargin"

                  width="auto">

                  <content>

                     <Button

                        text="{i18n>showHelloButtonText}"

                        press="onShowHello"

                        class="myCustomButton"/>   // custom css class to define color to button

                  </content>

               </Panel>

            </content>

         </Page>

      </pages>

   </App>

custom CSS :

.myAppDemoWT .myCustomButton {

  background-color: red;

}

output :