Adding Custom Cascading Stylesheets

This topic describes how to add custom Cascading StyleSheets (CSS) to an existing custom control .

Three things are needed:

• An embedded style sheet file
• Enabling the embedded Style Sheet file as a WebResource

• Setting the ClientCSS Attribute value to point to the embedded .css resource file

This project on Github contains the sample project described in this topic. You can view the project on Github instead of writing out the code, if you prefer:
K2Documentation.Samples.Extensions.SmartForms.CustomControl

Adding a custom Cascading Stylesheet

1. Add a Stylesheet.css file to the project as an embedded file
2. Edit the new css file and use the SFC class object referencing schema to define a span definition for the displayed text, as demonstrated in the span node displayed below:
   
   Copy

   SFC class object referencing schema

   1
   2
   3
   4
   .SFC.CustomControl-StyleControl {
       background-color: green;
   }
   

3. In the custom control's server-side code file:
   
   1. Add an assembly WebResource attribute that points to the embedded CSS embedded resource file
   2. Set the ClientCSS attribute to point to the embedded resource file,
      See the code snippet below for an example:
      
      Copy

      Set the ClientCSS attribute

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Text;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      
      // SourceCode namespaces used in the control
      using SourceCode.Forms.Controls.Web.SDK;
      using SourceCode.Forms.Controls.Web.SDK.Attributes;
      
      // Point to the style resource file
      [assembly: WebResource("CustomControl.Styles.css", "text/css", PerformSubstitution = true)]
      
      namespace CustomControl
      {
          //Link to the definition file
          [ControlTypeDefinition("CustomControl.Definition.xml")]
          [ClientCss("CustomControl.Styles.css")]
          class StyleControl : BaseControl
          {
              protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
              {
                  writer.Write("Control Styled");
              }
          }
      }
      

4. Build and deploy the custom control assembly
5. Restart the IIS service and clear your browser cache
6. In the Designer refresh your View. You should see the result of the cascading style sheet as the background is changed to green