M# Tutorials

Learn to build .NET applications with M#. Our step-by-step tutorials will get you up-to-speed rapidly.
If you already know ASP.NET and C#, you can master M# in a week or two.

CSS and Styling

In this lesson we will take a look at styling the module in general and how CSS classes are applied in a module at different levels.

M# applies some default styles when a module is created by M#. Those styles are defined in the generated Standard.css file and it is important to have an understanding of this code.

M# generates this file in “App_Template” folder and is referenced in both default master pages. This file contains styles for common usage, control types, lists, forms, view, items, labels and values styles.

Common Styles

Below are the screenshots of common styles defined in the Standard.css. These common styles could help you designing your website in a very neat way, without having to manualy define many comonly used styles.

List / Grid Related Styles

The screenshot shown below shows all the styles which are applied by M# when a list module is created (List module is discussed in detail within a separate chapter).

“.grid” css class is applied on the parent container element of a list, which is rendered as HTML Table element. The columns of an ASP.NET grid are rendered as “th (Table Header)” element. “.alt”, css classes are applied on each alternate row to distinguish row bounders. “.button” css class is applied on the container HTML div element which holds all the buttons.

View Module Styles

The screenshot below shows all the styles which are applied by M# when a View module is created (View module is discussed in detail within a separate chapter).

“.view-body” css class is applied on the container HTML element span of view module mark-up. “.item”, css class is applied on HTML div elements, which acts as individual rows displaying data in the view module. “.label” css class is applied on the div element which contains the label related to displayed information. “.value” css class is applied on the HTML div element which contains the actual data being displayed in a view.

Form Module Styles

The screenshot below shows all the styles which are applied by M# when a View module is created (Form module is discussed in detail within a separate chapter).

“.form” css class is applied on the container element of each individual form, which contains input controls in a row format. “.item” css class is applied on HTML div element, which wraps individual input control elements with a label and acts as a single row of a form module. “.label” css class is applied on the HTML container element, which contains the label associated with an input control. “.input” css class is applied on the HTML container element, which contains the input control. “.buttons” css class is applied on HTML container element, which wraps the entire button on a form module. The rest of css classes are for individual control types e.g. textbox or select html element.

Styling Modules

M# encourages developers to use CSS styles instead of writing inline styles and provides attributes to implement CSS styles for pages and modules. You can also override css classes applied by M# by specifying your css classes on above mentioned levels i.e. root class, item class, label, value, or input class etc. Below we discuss the attributes available in M# for styling a module:

Applying Root Class on Module

This attribute is available for each module created in M# and is applied on the container / wrapper element. The screenshot below shows the root css class attribute of view module and the implementation.

The above screenshot highlights the attribute “Root css class” and the inset window allows you to write your css class name. You can supply a static or dynamic css class using “C#” or “Text” tab of the inset window.

Applied Custom CSS Classes

You can apply a custom css class to override “.item” css class applied my M# on individual item. The screenshot below shows a custom css class applied on the view module single “Item”.

Now you have your custom css class applied so you can also override the child element css classes by specifying them within your custom class.

In order to apply custom css class for “Item” in “Form Modules” you can use “Item css class”. In form modules you can also specify label and control class separately.

In List module you can specify “Grid column css” property to apply custom css classes for individual list column.