LogoLogo
WinForms to WebPowerBuilder to .NETPowerBuilder to Java
  • WebMAP Documentation | Mobilize.Net
  • WinForms
    • Introduction
    • Getting Started
    • Conversion Process
    • Post-Conversion
    • Extend or Modify the Converted Application
      • NoWebMap Forms Winforms
        • How to add a new Form
        • Adding the created form to the migrated App
        • Interacting with the application data
        • Call the custom API
        • Interaction between the no webmap added Form and the WebMap components
      • Adding a component
      • Adding a component dynamically
      • Add a new control model
      • Switching CSS theme
      • Adding new window
      • Conversion Configuration
        • WebMAP configuration file
        • Stub Filter
      • Adding Non-WebMap Angular Forms
      • Adding FrontEnd Handler to a ToolStripMenuItem
      • Changing ToolStripButton icons
      • Adding new items to existing toolbar
      • Adding FrontEnd element properties and JS listeners
      • Adding FrontEnd output handlers
      • Access FrontEnd components
      • Create custom components based on existing WebMap Component
      • Override FrontEnd methods
    • Assessment Mode
    • Errors and Troubleshooting
      • How to resolve broken reference problems with VBUC
    • Portability
    • Glossary
    • Release Notes
    • Internal Demos
    • Known Issues
    • WinForms DCP
  • WebForms
    • Introduction
    • Overview
    • Desktop Compatibility Platform (DCP)
      • Pages and Master Pages
      • GridView and DataList data synchronization
      • HTTP objects
    • Post-Conversion
    • Extend or Modify the Converted Application
      • Adding FrontEnd validator
      • Adding Page
      • Adding MasterPage
    • Designer classes on WebForms Conversion Tool
    • Errors and Troubleshooting
      • How fix Solution when have been added website from filesystem without project file
    • Release Notes
  • PowerBuilder to .Net
    • Introduction
    • Getting Started
      • Conversion Tool
    • Desktop Compatibility Platform (DCP)
      • Data Manager
    • Reports
      • Report Rendering in Modernized Code
      • ReportWatcher Service Configuration
      • Data Manager to RDL Conversion
      • Reporting Service Internals
      • Troubleshooting
  • PowerBuilder to Java
    • Introduction
    • Getting started
    • Post-Conversion
      • Setup PBJava Environment
      • Architecture
      • App Start
    • Glossary
    • Errors
    • Glossary
    • FAQ
      • How to create a new Control
      • How to create a new Screen
      • What is the Mobilize.WebMAP.CoreServices.All?
      • What is the DesignerAttribute?
      • What is the InterceptedAttribute?
      • What is the InterceptedAttribute?
      • What is the ObservableAttribute?
      • What is the Mobilize.Weaving.WebMAPExtensions.All?
  • General
    • FrontEnd
      • Documentation
        • Webforms Angular Components
          • Web Components
            • Base Components
              • BaseValidator Component
            • KendoUI Components
              • CompareValidator
              • CustomValidator
              • RegularExpressionValidator
              • RequiredFieldValidator
              • ValidationSummary
          • Directives
          • AJAX Web Components
            • AjaxCalendar
            • AjaxModalPopupExtender
          • Ajax Interaction Services
        • Client Core
          • WebMap's Client Core
        • Angular Client
          • Introduction
          • WebMap Service
          • WebMap Interceptor Service
        • Base Components
          • Introduction
          • Components
            • Container
            • Control
            • ControlContainer
            • FormsContainer
            • Loading
            • Stub
        • Winforms Angular Components
          • Web Components
            • Base Components
              • Control Component
              • Form Container
              • Grid Component
              • Style
            • KendoUI Components
              • AdoDataControl
              • Button
              • C1TrueDBGrid
              • CheckBox
              • CheckedListBox
              • ComboBox
              • ContextMenuStrip
              • DataGridView
              • DataGridViewFlex
              • DateTimePicker
              • FileDialog
              • GroupBox
              • Label
              • ListBox
              • ListView
              • MaskedTextBox
              • MessageBox
              • NumericUpDown
              • Panel
              • PictureBox
              • PrintDialog
              • ProgressBar
              • RadioButton
              • RichTextBox
              • StatusStrip
              • Stup
              • TabControl
              • TabPage
              • TextBox
              • Timer
              • ToolStrip
              • TreeView
              • WebBrowser
              • Window
            • JQuery Web Components
          • WebMap FrontEnd Architecture
          • Migrated Structure
          • Setup
            • Front-End setup and compilation
            • Components Manual
            • Browser Support
            • Unit Test Manual
            • Development Process
            • Setup AOT/JIT Compilation
          • Decorators
            • Server Event
          • Conventions
            • Application Structure and NgModules
            • Coding
            • Components
            • Data Service
            • Directives
            • Lifecycle hooks
            • Names
            • Services
        • PowerBuilder Kendo Components
          • Base Components
            • base-component
            • column-control
            • controlcontainer
          • Data Manager Componets
            • base-data-manager
            • data-manager-control
            • data-manager-control-base
            • dw-checkbox
            • dw-column
            • dw-complexNumericMaskComponent
            • dw-compute
            • dw-date-time-edit-mask
            • dw-dropdowndatawindow
            • dw-edit
            • dw-edit-mask
            • dw-radio-button
            • dw-simple-numeric-edit-mask
            • dw-string-edit-mask
            • dw-time-edit-mask
          • Window Components
            • basemask
            • graphics
            • w-checkbox
            • w-command-button
            • w-complex-numeric-mask
            • w-date-time-edit-mask
            • w-dropdownlistbox
            • w-group-box
            • w-line
            • w-listbox
            • w-maskedtextbox
            • w-mdiclient
            • w-menu
            • w-multiline
            • w-picture
            • w-picture
            • w-radiobutton
            • w-rectangle
            • w-simple-numeric-edit-mask
            • w-single-line-edit
            • w-statictext
            • w-string-edit-mask
            • w-time-edit-mask
            • w-toolbar
            • w-toolbaritem
            • w-user-object
            • w-window
          • Services
            • DmInteractionService
          • DataManagerEvents
          • FocusManager guide
      • Api Documentation
        • WebMap Silverlight
        • WfNetC1Components
        • WebFormsComponents
      • Guides
        • Setup NPM package registry in the workspace
        • How to Setup WebMap Applications To Run Over SubDomains or WebApplications In IIS
        • Deploy several WebMap Apps in the same Server
        • Update to Angular 16
        • Appearance
          • How to change the CSS
          • How to override the style for a component
        • Component maintenance
          • How link WebMap package to the migrated Application
          • How to resolve broken reference problems with VBUC
          • How to test a local WebMap Components package
          • How to add a new component in a migrated application
          • How to update a component
          • Dynamic Control Support
          • How to add new set of component with a different provider
          • How to test your component in the playground
          • Tools
        • WMLogger
          • How to use the WMLogger's instance
          • How to change log's level
          • How to add log tags
        • Integration test
        • Setup WebMap Applications to Run Front-End And Back-End In Separates Sites
          • Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)
        • Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development)
        • Initial Set Up
          • Software to Install
          • Necessary Repositories
      • Errors
      • Version Notes
        • Client Core
        • Angular Client
        • Web Base Components
        • Winforms Angular Components
        • PowerBuilder Kendo Components
      • Licenses
        • Client Core
        • Angular Client
        • Base Components
        • PB Kendo Components
        • WFNet Kendo Components
        • WebForms Components
        • WFNet Access Components
        • WFNet Janus Components
        • WFNet C1 Components
        • Silverlight wms-framework
        • Silverlight i-components
    • BackEnd
      • WebMAP From Scratch
      • Setup
      • DCP: Desktop Compatibly Platform
        • Overview
        • Library Bundles
          • Bundle Library
            • Create an Observable Object
          • Bundle DTO
            • DTO: Data Transfer Objects
              • Creating a DTO
            • Mappers
              • Create Mappers
            • Observable Wrappers
              • Create an Observable Wrapper
            • API/Controllers
      • Architecture
      • Weaving on WebMAP
      • Glossary
      • FAQ
        • How to create a new Control
        • How to create a new Screen
        • What is the Mobilize.WebMAP.CoreServices.All?
        • What is the DesignerAttribute?
        • What is the InterceptedAttribute?
        • What is the Mobilize.Extensions.Logging.RollingFile?
        • What is the ObservableAttribute?
        • What is the Mobilize.Weaving.WebMAPExtensions.All?
      • Licenses
        • PBNet DCP
        • WebFormsDCP
        • WFNet DCP
        • CoreServices
        • CoreServicesCommon
    • Request and Response
  • SCALABILITY
    • Introduction
    • Microservices
    • Containerizing a WebMap .Net Application with Docker
    • Vertical scalability
Powered by GitBook
On this page
  • Global styles in WinformsComponent
  • Styles in Samples
  • Aplying Classes
  • Note
  • Local styles on WinformsComponent

Was this helpful?

  1. General
  2. FrontEnd
  3. Guides
  4. Appearance

How to change the CSS

PreviousAppearanceNextHow to override the style for a component

Last updated 1 year ago

Was this helpful?

It is important to know how our web components look, control details such as fonts, layout, colors, backgrounds, margins, etc.

Using Kendo UI Angular is easy to choose a theme like :

  • Kendo UI Default theme

  • Kendo UI Bootstrap theme

  • Kendo UI Material theme

  • To start using the Default or Material theme, install it through NPM.

     npm install --save @progress/kendo-theme-default
  • For the Bootstrap theme, which depends on the Bootstrap framework, install the version of the bootstrap framework specified as a peer dependency.

  • After the theme package is installed, reference it in your project.

This steps have been taken from here you can find the kendo styling documentation.

There are some ways to take even more control over components style

Global styles in WinformsComponent

Applying global CSS to our project is easy, we just have to use a general document styling to apply CSS styles to our components.

In our angular project we are talking about the styles.scss or jQueryStyles.scss files, these files allows users to add global styles and supports CSS imports.

Those global styles and further must be added inside angular-cli.json.

"styles": [
        "./src/style/styles.css",
        "./src/style/jQueryStyles.css",
        "./node_modules/primeng/resources/themes/omega/theme.css",
        "./node_modules/font-awesome/css/font-awesome.min.css"
]

These will be loaded exactly as if you had added them in a <link> tag inside html file.

Styles in Samples

Aplying Classes

We implement a special behavior on each component using html class attribute to add classes in the internal component.

    <wm-datetimepicker [model]="model.datetimepicker1" class="datetimepicker1"></wm-datetimepicker>

With this we can take control of any component that is inside a form just using the css file generated by the migration tool like this:

.Samples_frmControls .datetimepicker1{
    width: 300px;
    height: 30px;
    position: absolute;
    top: 88px;
    left: calc(50% + 50px);
}

The special behavior is that the component declaration does not use the css class, actually, the content rendered is whom uses the css class and the class is removed from component declaration.

For example, the following component declaration has the buttonLoading css class:

<wm-button [model]="model.buttonLoading" class="buttonLoading" (Click)="loadingEvent($event)"></wm-button>

however when the component is rendered in the browser its declaration does not contain the buttonLoading class, but the content displayed inside of the declaration has applied the class successfully.

<wm-button class="" _nghost-c7="" ng-reflect-class="buttonLoading" ng-reflect-model="[object Object]">
<button _ngcontent-c7="" class="buttonLoading k-button" kendobutton="" wmcontrols="" ng-reflect-klass="k-primary" ng-reflect-ng-class="buttonLoading" dir="ltr" title="">Show Loading</button>
</wm-button>

Note

If you want to add a specific class to container element you can do it using ngClass, for example if you want to add a class in the outer definition of the component you should use ngClass="buttonSpecialClass" and this class will be applied in the component declaration.

*The class included in the ngClass must be written as string literal with single quotes ''.

<wm-button [model]="model.buttonLoading" class="buttonLoading" ngClass='buttonSpecialClass' (Click)="loadingEvent($event)"></wm-button>

And the buttonSpecialClass defined in ngClass will appear on the component declaration:

<wm-button class="buttonSpecialClass" _nghost-c7="" ng-reflect-class="buttonLoading" ng-reflect-model="[object Object]">
    <button _ngcontent-c7="" class="buttonLoading k-button" kendobutton="" wmcontrols="" ng-reflect-klass="k-primary" ng-reflect-ng-class="buttonLoading" dir="ltr" title="">Show Loading</button>
</wm-button>

Local styles on WinformsComponent

On every single component that is generated like this:

ng generate component my-new-component

a scss file will be generated, here you should be able to modify the style of any component locally.

Its important to have in mind that these properties may be affected by any global style change

kendo Styling Guide