how to use the Spotless theme with Ext.NET Legacy 5x

  1. #1

    how to use the Spotless theme with Ext.NET Legacy 5x

    Hello Support,
    How can we use "Spotless theme" with Ext.NET Legacy 5x Application?
  2. #2
    Hi Hrishi. We're still working on some samples and hope to be able to share today.
    Geoffrey McGill
    Founder
  3. #3
    Hello @Hrishi, and welcome to Ext.NET Forums!

    And yes, you can use spotless theme with Ext.NET 5.

    In a nutshell, you just set the Ext.NET active theme as none and manually include the theme javascript + css in your page.

    Suppose the Spotless theme files were deployed to website project's /Content/spotless path.

    Then the following lines should be added to the <head /> block to the .aspx or .cshtml page.

    <link type="text/css" rel="stylesheet" href="/Content/spotless/theme-spotless-all.css" />
    <script type="text/javascript" src="/Content/spotless/theme-spotless.js"></script>
    Apply the theme project-wide

    The Resource Manager and the resource includes can be reused via the master page for WebForms or the layout view for MVC.

    The theme can also be set as None project-wide, without the need of any inclusion -- so even standalone pages could default to the "none" theme -- either using Web.config or setting the session variable via Global.asax (use Ext.Net.Theme session variable). So all you might need to do is include the spotless theme resources! :-)

    Hope this helps!
    Last edited by fabricio.murta; May 27, 2021 at 12:09 AM. Reason: hope it helps :)
  4. #4
    Thanks. I was able to do the steps mentioned. Seems to be working. Had one question. On switching to this theme, suddenly everything is a lot bigger than what used to be. i.e. the buttons are bigger, the tabs are bigger etc. Is there any way to reduce the size of everything across the board? i.e. if we have size "small", "medium" and large, everything before was size "small" now everything is size "large". Can we make it "small"?
  5. #5
    Hi Hrishi,

    Spotless Theme takes a much more modern approach to application styling than the old Ext JS themes. Consequently, larger fonts, increased padding, and more whitespace is used throughout Spotless.

    There is some option to change the size of some components by configuring the scale property. The Button is a component that supports the scale property.

    Globally reducing everything to a "smaller" size would require making some extensive revisions to the theme.

    In general, when upgrading old apps to Spotless, I found that increasing the BodyPadding, Width, and Height of Panel components was an easy change that significantly improved the look of the app with Spotless.

    Dropping Spotless into an existing app that was using an old Ext.NET/Ext JS theme will likely require some layout adjustments. Spotless just needs more room.
    Geoffrey McGill
    Founder
  6. #6
    Hello
    We have licence for EXT.NET. How can we download this theme?
    Thanks
  7. #7
    The Spotless Theme is bundled within Ext.NET Classic v7 and a separate download is not required.

    Spotless is not included with Ext.NET Legacy v5 and not officially supported... but Spotless should work in Ext.NET Legacy v5 apps (see instructions above)... but Spotless would need to be purchased separately from https://themes.ext.net/.

    Hope this helps answer your questions.
    Geoffrey McGill
    Founder

Similar Threads

  1. spotless theme on Ext.Net 5.3
    By muhammadantoniussony in forum 5.x Help
    Replies: 3
    Last Post: Nov 16, 2020, 4:02 PM
  2. [CLOSED] Add a custom theme Ext.js to Ext.Net
    By dlanza in forum 4.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 02, 2016, 8:08 PM
  3. 3rd party Ext.Js theme in Ext.Net
    By prost in forum 2.x Help
    Replies: 3
    Last Post: Apr 10, 2014, 10:17 AM
  4. Override Ext.net theme
    By Nhím Hổ Báo in forum 1.x Help
    Replies: 1
    Last Post: May 02, 2012, 9:31 PM

Tags for this Thread

Posting Permissions