Log in to start a topic

Styles CSS 2010v1 to 2025v2 399 in ASP.NET WebForms

Posted by: enrique.pv-ext on 30 July 2026, 10:41 am EST

  • enrique.pv-ext

    Posted 30 July 2026, 10:41 am EST - Updated 30 July 2026, 11:01 am EST

    Hi,

    Migrate from 2010v1 to 2025v2 399 in ASP.NET WebForms NET Framework 4.8.1.

    Using Controls from C1.Web.Wijmo.Controls.48.dll

    LEGACY

    875×927 73.6 KB
    2101×779 135 KB
    1444×912 95.4 KB
    960×978 83.4 KB
    1279×883 85.6 KB
    1054×858 71.3 KB

    new Wijmo

    932×849 70.3 KB
    1009×620 45.2 KB
    1639×877 139 KB

    974×797 62.2 KB
    928×830 65 KB
    952×837 69.5 KB

    any suggestions or approach to use LEGACY css / styles to apply new controls ??

    classes changed…

  • uttkarsh.matiyal

    Posted 31 July 2026, 3:03 am EST

    Hello Enrique,

    Apologies for the inconvenience. Unfortunately, the legacy Themes/CSS cannot be used with the latest version because the client-side HTML structure, CSS class names, and overall architecture have changed significantly between the versions.

    The recommended approach is to use the themes and styling provided with the latest version, as they are designed to work with the updated HTML and CSS structure.

    see: Theming | Getting Started with ASP.NET Web Forms

    Regards,

    Uttkarsh.

  • enrique.pv-ext

    Posted 3 August 2026, 10:39 am EST

    give me more ideas or samples about it ?

    change CSS for legacy to new ?

    Control 2010 to Control 2025

    CSS legacy → CSS new

    Matrix mapping legacy vs new CSS, maybe get html + css render in old pages (Playwright, Selenium,

    Screenshot automation…)

    Create legacy-look.css ??

  • uttkarsh.matiyal

    Posted 3 August 2026, 11:31 pm EST

    Hello Enrique,

    I understand the migration effort involved, and I wish I had a simpler answer. However, we’re not able to provide a complete legacy-to-new CSS/class mapping or a ready-made ‘legacy-look.css’ for a few reasons:

    1. C1 WebForms is now a legacy product in maintenance mode, with no active feature development. We continue to address bugs and critical issues, but we’re not adding new features or enhancements. As a result, creating and maintaining a separate legacy-look theme is not something we’re able to provide.
    2. The HTML structure has changed, not just the class names. The new Wijmo-based controls use different DOM structures and CSS architecture, so a class-to-class mapping wouldn’t reliably reproduce the legacy look.
    3. The rendering varies by control and state (hover, selected, disabled, etc.), making a single mapping incomplete and potentially misleading.

    Instead, I’d recommend using the built-in themes in the current version as the baseline (as shared in my earlier reply).

    If there are specific visual differences that affect usability or functionality, please share the control and some screenshots. We can then help identify the closest CSS classes/variables available in the new version.

    I understand this may not be the complete solution you were hoping for, but we’re happy to help with specific control-by-control questions during the migration.

    Regards,

    Uttkarsh.

  • enrique.pv-ext

    Posted 7 August 2026, 7:55 am EST

    thanks for all explains.

    I have now (legacy)…

    StylesheetTheme=“Sep” Theme=“Sep”

    <%@ Page Language="C#" AutoEventWireup="True" CodeBehind="Default.aspx.cs" Inherits="WebApp.Login.Default" 
StylesheetTheme="Sep" Theme="Sep"
MasterPageFile="~/MasterPage.master"  EnableEventValidation="true" %>

<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="ContentHead"> 
    <link href="~/VisualStyles/CustomVisualStyle2/C1Window/styles.css" type="text/css" />
</asp:Content>

    StylesheetTheme=“Content” Theme=“Content”

    <%@ Page Language="C#" AutoEventWireup="True"  CodeBehind="Default.aspx.cs" Inherits="WebApp.Default" 
    StylesheetTheme="Content" Theme="Content" MasterPageFile="~/ContentMasterPage.master" %>

    :clipboard: Resumen Ejecutivo

    El proyecto utiliza un sistema de estilos multi-capa basado en dos arquitecturas diferentes:

    1. ASP.NET Themes (App_Themes) - Sistema clásico de WebForms
    2. ComponentOne VisualStyles - Estilos específicos para controles C1
    3. Ext.NET - Framework de interfaz moderna con su propio sistema de temas

    :card_index_dividers: Estructura de Carpetas

    PROJECT/
├── App_Themes/                    [11 archivos CSS]
│   ├── Content/
│   │   ├── ContentStyle.css       ⭐ PRINCIPAL (130 KB)
│   │   └── Imagenes/              (recursos)
│   ├── Sep/
│   │   ├── estiloSEP.css          ⭐ ESTILO LOGIN/BASE (25 KB)
│   │   ├── estiloSEP.TransitsReports.css
│   │   └── Imagenes/
│   ├── Menu/
│   │   ├── Vista/C1Menu/styles.css
│   │   ├── Office2007Blue/C1Menu/styles.css
│   │   ├── Office2007Silver/C1Menu/styles.css
│   │   ├── Office2007Black/C1Menu/styles.css
│   │   ├── ArticFox/C1Menu/styles.css
│   │   └── VistaBlack/C1Menu/styles.css
│   └── SepExtNet.css              ⭐ ESTILOS EXT.NET (principal)
│
├── VisualStyles/                  [28 archivos CSS]
│   ├── CustomVisualStyle/         (estilo corporativo SEP)
│   │   ├── C1Window/styles.css
│   │   ├── C1Menu/styles.css
│   │   ├── C1ComboBox/styles.css
│   │   └── C1Input/styles.css
│   ├── CustomVisualStyle2/        ⭐ (variante corporativa)
│   │   └── C1Window/styles.css    (21 KB)
│   └── Vista/                     (estilo por defecto C1)
│       ├── C1Window/styles.css
│       ├── C1Menu/styles.css
│       ├── C1GridView/styles.css
│       ├── C1Input/styles.css
│       ├── C1ComboBox/styles.css
│       ├── C1TabControl/styles.css
│       ├── C1Calendar/styles.css
│       ├── C1TreeView/styles.css
│       ├── C1ToolBar/styles.css
│       ├── C1Upload/styles.css
│       ├── C1Splitter/styles.css
│       ├── C1ProgressBar/styles.css
│       ├── C1NavPanel/styles.css
│       ├── C1Schedule/styles.css
│       ├── C1HeaderContentControl/styles.css
│       ├── C1MultiPage/styles.css
│       ├── C1TabStrip/styles.css
│       ├── C1ToolTip/styles.css
│       ├── C1Slider/styles.css
│       ├── C1Accordion/styles.css
│       ├── C1FormDecorator/styles.css
│       ├── C1Editor/styles.css
│       └── C1Expander/styles.css
│
└── js/jquery/skins/               [2 archivos CSS]
    ├── tango/skin.css
    └── amg/skin.css

    :art: Sistema de Temas (Themes)

    1. App_Themes - ASP.NET WebForms Themes

    Cómo se Aplican los Temas

    A nivel de Página (.aspx):

    <%@ Page ... StylesheetTheme="Content" Theme="Content" %>

    Diferencia entre StylesheetTheme y Theme:

    • StylesheetTheme="Content"
      → Se aplica ANTES de los estilos inline (menor prioridad)
    • Theme="Content"
      → Se aplica DESPUÉS de los estilos inline (mayor prioridad)

    Uso en el proyecto:

    • 110 páginas ASPX usan 
      StylesheetTheme="Content"
      (mayoría)
    • 1 página (Login) usa 
      StylesheetTheme="Sep"

    Temas Disponibles

    a) Theme “Content” (Principal - WebForms clásico)

    Archivo: 

    App_Themes/Content/ContentStyle.css
    (130 KB)

    Características:

    • Fondo: 
      #e6e6e6
      con imagen 
      fondo_contenido_up.png
    • Tipografía: 
      Tahoma, Geneva, sans-serif; 11px
    • Color texto: 
      #006
      (azul oscuro)
    • Sistema de layout con cabecera, barra de menú, contenido, botonera y footer
    • Layout fijo con posiciones absolutas y fixed

  • enrique.pv-ext

    Posted 7 August 2026, 8:08 am EST

    Web.config - Configuración relevante para CSS

    • Línea 75: ChartImageHandler apunta a App_Themes/Content/Imagenes/

    • Líneas 102-110: con acceso anónimo :warning: Crítico

    • Línea 277: viewStateEncryptionMode=“Always” (puede impactar rendimiento)

    • Línea 642: Ext.NET theme=“Triton”

    • Handlers para recursos .axd (ScriptResource, WijmoControlsResource)

    Hallazgos clave para migración:

    • Los temas se aplican mediante StylesheetTheme=“Content” en directivas @Page

    • Requiere acceso anónimo a App_Themes o los estilos no cargan antes del login

    • Paleta corporativa definida (#006, #e6e6e6 , #ffd82f , #0BB5FF )

    • 3 sistemas de estilos coexistiendo (WebForms native, ComponentOne, Ext.NET)

  • uttkarsh.matiyal

    Posted 10 August 2026, 1:50 am EST

    Hello Enrique,

    Thank you for sharing the detailed breakdown of your theming structure. That provides helpful context.

    Since the new Wijmo-based controls use a different styling approach, there is no direct one-to-one alternative to the existing combination of App_Themes, C1 VisualStyles, and Ext.NET. Instead, the recommended approach would be to create a new styling theme for the Wijmo controls that aligns with your existing corporate look and feel.

    One tool you can use to help create and customize this theme is jQuery ThemeRoller, which allows you to customize colors, fonts, and other visual properties:

    https://help.grapecity.com/wijmo/3/webframe.html#ThemeRoller.html

    This could help you achieve a closer match to your corporate color palette (‘#006’, ‘#e6e6e6’, ‘#ffd82f’, and ‘#0BB5FF’) when developing the new theme, rather than trying to maintain a separate CSS file that maps directly to the legacy styling.

    If you can point us to 2–3 specific controls or screens where the visual differences are most critical, we can look into the control-specific CSS classes and determine how they can be customized to better match your existing styling.

    Regards,

    Uttkarsh

  • enrique.pv-ext

    Posted 10 August 2026, 6:12 am EST

    create a new styling theme for the Wijmo controls ??

    PROYECTO/
├── App_Themes/
│   ├── Wijmo/

    and DELETE legacy themes ??

    Theme Menu/

    App_Themes/Menu/ Vista/
App_Themes/Menu/ Office2007Blue/...

VisualStyles/CustomVisualStyle/ 
VisualStyles/ CustomVisualStyle2/  
VisualStyles/Vista/

    :card_index_dividers: App_Themes Folders

    PROYECTO/
├── App_Themes/
│   ├── Menu/
│   │   ├── Vista/C1Menu/styles.css
│   │   ├── Office2007Blue/C1Menu/styles.css ...
│
├── VisualStyles/
│   ├── CustomVisualStyle/        
│   │   ├── C1Window/styles.css
│   │   ├── C1Menu/styles.css ...
│   ├── CustomVisualStyle2/        ⭐ (variante corporativa)
│   │   └── C1Window/styles.css    (21 KB)
│   └── Vista/                    
│       ├── C1Window/styles.css
│       ├── C1Menu/styles.css
│       ├── C1GridView/styles.css ...
│       └── C1Expander/styles.css

    LEGACY C1 ASPX:

    <cc1:C1GridView 
    runat="server"
    VisualStylePath="~/VisualStyles" 
    UseEmbeddedVisualStyles="false"
    VisualStyle="Vista"
    ...>
</cc1:C1GridView>

    legacy properties:

    • VisualStylePath
    • UseEmbeddedVisualStyles
    • VisualStyle

    any suggestions?

  • enrique.pv-ext

    Posted 10 August 2026, 6:17 am EST - Updated 10 August 2026, 6:35 am EST

    Menu 2010

    1570×837 80.2 KB

    1495×777 76.9 KB

    1119×426 87.5 KB

    Menu 2025v2

    1114×616 108 KB

    1560×870 112 KB

    certain, change all CSS + HTML for Menu :cry:

    please, any help will be VERY appreciate, thanks in advanced

  • kartik.dua

    Posted 11 August 2026, 4:49 am EST

    Hello Enrique,

    Thanks for the detailed breakdown - this helps clarify the scope.

    → On removing the legacy theme folders:

    Since the new Wijmo-based controls use a completely different CSS/DOM architecture, folders like App_Themes/Menu/Vista/, App_Themes/Menu/Office2007Blue/, VisualStyles/CustomVisualStyle/, VisualStyles/CustomVisualStyle2/, and VisualStyles/Vista/ will no longer be referenced once you’ve migrated the controls on a given page. That said, we’d recommend keeping them in source control (not deleting outright) until the migration is fully validated across all pages — some pages may still be on the legacy controls, and removing the folders early could break those.

    → On the legacy properties:

    You’re right that VisualStylePath, UseEmbeddedVisualStyles, and VisualStyle are specific to the legacy C1 controls’ custom-visual-style mechanism and are no longer supported on the new Wijmo-based controls. Any markup using these properties will need to be removed when you swap in the new control — styling is now handled entirely via CSS.

    → On the Menu control specifically:

    This has actually already been addressed in detail in your other thread here:

    https://developer.mescius.com/forums/webforms-edition/styles-c1menu-from-2010v1-to-2025v2-399

    To summarize the key points from that thread: the new C1Menu emits a minimal ul structure that’s transformed at runtime by the jQuery c1menu widget, so CSS must target the new elements (e.g., .wijmo-wijmenu-item, .wijmo-wijmenu-link) rather than the legacy ones. For the width/alignment issues you’re seeing, the recommended fixes are:

    • Set menu width via the Width property or by overriding .wijmo-wijmenu
    • Replace float-based layout with display: flex on .wijmo-wijmenu-link to fix icon/arrow alignment
    • Double-check CSS selectors are correct (a common typo is .wijmo-mijmenu-item instead of .wijmo-wijmenu-item)

    We have implemented a sample for your reference: Menu_Sample_Mod.zip

    Please update the attached sample with your legacy implementation and share a screenshot showing the expected appearance. We’ll then try to reproduce the same visual behavior in the sample.

    Regards,

    Kartik

  • enrique.pv-ext

    Posted 11 August 2026, 7:37 am EST - Updated 11 August 2026, 7:42 am EST

    I’ll try update the sample with legacy implementation

    925×502 48.1 KB

  • enrique.pv-ext

    Posted 11 August 2026, 8:37 am EST - Updated 11 August 2026, 8:42 am EST

    Comparing C1GridView Control v2010 vs v2025v2

    v2010

    1408×682 108 KB
    1401×756 73.6 KB

    v2025

    1714×634 77.4 KB
    1492×868 112 KB

  • uttkarsh.matiyal

    Posted 12 August 2026, 1:30 am EST

    Hello Enrique,

    Sure, please take your time updating the project.

    Regarding the styling changes in C1GridView, please check the available Wijmo and jQuery UI themes and select the one that most closely matches your requirements. If the available themes do not meet your expectations, you can click “Create new theme…” in the designer to create a custom theme.

    Please use Visual Studio 2019 to access the WebForms designer, as later versions of Visual Studio do not support the designer for these legacy controls.

    See how to create a new custom theme: https://developer.mescius.com/componentone/docs/webforms/online-gettingstarted/rolling-a-theme.html

    Regards,

    Uttkarsh.

  • enrique.pv-ext

    Posted 12 August 2026, 9:25 am EST

    thanks!

    I cannot install Visual Studio 2019 :cry:

    can you attach any sample a custom theme , please mister ??

    ~/Content/themes/…

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.