Customizing Umbraco Forms Themes - CSS & JS from Default theme

Questions
,
1

Hiya :waving_hand:
I am working on a project where the frontend development team want full control and I know luckily we can achieve that with Umbraco Forms Themes feature.

Partial View - Default Theme Files

I found the Views/Partials from the docs page which goes here :slight_smile:

Question

Can the CSS and any JS for the default theme available to be download as a zip like the partial views, so the frontend team can then modify these files, as they may prefer to tweak the CSS or JS slightly as opposed to rework the DOM from the partial views.

Cheers,
Warren :slight_smile:

2

OK I found a way to get these files..
However it might be nice if these were available in a nice to use zip like the views are.

Solution

From the project using/consuming Umbraco.Forms Nuget package, do a dotnet publish from the same folder in your terminal, or use Visual Studio, Rider etc to do a publish.

# Navigate to Umbraco project folder
cd MyUmbracoProject

# Publish files and put into a folder named 'output' in the same directory level
dotnet publish --output ./output

The files can then be found at output/wwwroot/App_Plugins/UmbracoForms/assets/themes/default

Other files that are used by Umbraco Forms that may be of interest are found at output/wwwroot/App_Plugins/UmbracoForms/assets

1 Like
3

As you’d raised this.. the separation of package and theme zip, has caused no end of problems for us over recent times.
Especially trying to work out what zip matches to what nuget release (as there isn’t always a companion one) - case in point there is a 16.0 and a 16.2 zip.. but no 16.1?

Also as soon as versions go out of support the theme files just disappear into git history, though I guess there are still there to try and track down, though it’s only since v13 they exist in the repo <13 and they are still only available on fileDownloads on the old our.umbraco.com
(I know we should update.. but clients have other ideas)

It’s great that RCL exists and we have this nice mechanism to override csthml files, and create a theme… but it does seems that when it comes to theming and a starter set of files that they should somehow be usefully distributed (beyond the embedded resource) with the nuget pacakge in a mutually tied relationship? :person_shrugging:

Perhaps the github issue tracker could be extended to include these static assets and theme files, with a companion releases for each Forms version release?

Although might be moot point with the changing subscription landscape… :face_with_peeking_eye:

Ps it’s not just UForms.. it’s any rcl where cshtml are intended to be overridden, and having that here is the default starting point, without having to provide a separate store…

4

Heya
Yep totally agree RCLs can be neat for us package devs, but for us consuming packages in a project and wanting to see the files to know what can and can’t be overridden is a bit of a pain.

I think the best approach for now, is to lean on dotnet publish that way we see the files on disk and know what is there.

In an ideal world, it would be nice to push a button in Umbraco Forms that would generate/copy the files from the RCL to disk for me if I pushed it in the backoffice, but not sure how do-able that is or not.

5

yeah at least dotnet publish gets you the static files, but still reliant on an external process/person to publish the cshtml theme starter files :frowning:

Also only the csthml override.. the static files don’t, at least not without some middle ware request hyjacking..

And presume it will all still work in .net10 with the tinkering to filewatchers/and compiled views…

6

Please add your voices here so the Forms team will see them and they don’t get lost in forum posts:

To be fair, adding that link above, it will immediately link from GitHub back to here, so you don’t need to write it all again :slight_smile:

7

Also maybe quicker than a publish… there’s the nuget cache for us devs on disc…

.nuget\packages\umbraco.forms.staticassets\13.1.2\staticwebassets\Assets\themes\default

and you could extract from the nuget package.. after downloading… (Is that the nice to use zip you mentioned above :winking_face_with_tongue: )

image
image699Ă—798 42.9 KB

8

Yep that’s another way to grab it for sure and Seb, I will add a note that its a little frustrating to find them.

1 Like
9

Am I misunderstanding something? The cshtml views are not in that package :sweat_smile:

10

Two things in play.. the staticwebassets (js, css, html) which Warren was after, and the RCL (cshtml) -theme.zip

And they actually are.. just compiled into that Umbraco.Forms.StaticAssets.dll… :face_with_peeking_eye:

// Umbraco.Forms.StaticAssets, Version=12.2.4.0, Culture=neutral, PublicKeyToken=null
// AspNetCoreGeneratedDocument.Views_Partials_Forms_Themes_default_Fieldtypes_FieldType_CheckBox
internal sealed class Views_Partials_Forms_Themes_default_Fieldtypes_FieldType_CheckBox : RazorPage<FieldViewModel>
11

I was misunderstanding something then haha! upon actually reading the opening post, that’s exactly what he needed.

Ps you can do this directly on NuGet as well if you didn’t want to download the package: https://nuget.info/packages/Umbraco.Forms.StaticAssets/17.0.0-rc4

1 Like
12

Hence I preferred the dotnet publish approach - bit easier to see the files and folder structure from Umbraco Forms.

13

Now I’m getting confused…

You were after the staticwebassets.. they aren’t compiled.. they are there just in the nuget when you unzip :slight_smile:

We’re also talking about the cshtml files that are provided externally by umbraco forms as a separate zip file.. they are the ones that are compiled into the dll.

So dotnet publish gets you the same files as simply unzipping the nuget package, but you can’t get the compiled chstml files out of the dll, hence the need for the separate theme zip of them :slight_smile: