PDA

View Full Version : how to use the Spotless theme with Ext.NET Legacy 5x



Hrishi
May 26, 2021, 1:11 PM
Hello Support,
How can we use "Spotless theme" with Ext.NET Legacy 5x Application?

geoffrey.mcgill
May 26, 2021, 9:50 PM
Hi Hrishi. We're still working on some samples and hope to be able to share today.

fabricio.murta
May 27, 2021, 12:09 AM
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 (https://forums.ext.net/showthread.php?31781-CLOSED-Viewport-and-Master-page&p=143061&viewfull=1#post143061) or the layout view for MVC (https://github.com/extnet/mvc.ext.net/blob/master/src/Views/Shared/_BaseLayout.cshtml).

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 (https://examples5.ext.net/#/Getting_Started/Release_Documents/README/) or setting the session variable via Global.asax (https://github.com/extnet/mvc.ext.net/blob/master/src/Global.asax.cs#L89-L103) (use Ext.Net.Theme session variable). So all you might need to do is include the spotless theme resources! :-)

Hope this helps!

Hrishi
May 27, 2021, 12:54 AM
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"?

geoffrey.mcgill
May 27, 2021, 7:33 AM
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.

desarrollodiapli
Jun 04, 2021, 11:21 AM
Hello
We have licence for EXT.NET. How can we download this theme?
Thanks

geoffrey.mcgill
Jun 04, 2021, 4:16 PM
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.