0
votes

DNN 9.3.2 / 2sxc 10.25.2

I have a DNN theme that I use for a certain type of subportal - I will have 8 subportals ultimately. Each subportal has the same layout, but they will have different colours in their respective theme. So I will have to create a stylesheet with the CSS rules and the colours for each theme. I know there is a couple of relatively simple ways I can do this:

  1. Modifying the portal.css of each portal to override the theme or (simple but might be hard to maintain updates)
  2. Building a custom theme for each portal (overkill)
  3. Using SCSS to create a template with 8 different variable files (works fine but doesn't allow modifications by the Content Editors)

So, I'm curious if there's a more clever way through 2sxc that makes it easy for not only me to maintain, but also my portal's Content Editors.

I want to create 2sxc Content module with a few different fields for colour pickers that will allow me (and my content editors) to simply open up the 2sxc edit modal (on the homepage), fill out all the colour fields, and then a razor template will output the CSS template with the colours to override the theme styles on the DNN skin. I know I can do this with inline CSS but that would mean the module would have to appear on every page, and I'd also prefer to avoid inline CSS.

So my idea is that it would work like this:

  1. Have a 2sxc Content module on a single page on each portal
  2. Edit modal > the fields would be something like: primary colour (rgba), secondary colour (rgba), grey colour (rgba), etc
  3. Once save is clicked, the template modifies a portal-level theme.css file which is loaded by the skin
  4. Any changes to the module would result in a rewrite of the CSS file.
  5. I could update the c# razor template to add, remove, or modify rules or transform the values of the input.

Is this possible or is it too complicated? Is there a better way of going about this?

1
I'm looking forward to seeing other answers. Basically, you want to have a prototype file, a content type that supplies custom "token" values, and then do taken replacement into the file prototype, and then save it as Portal.css. You could actually save it to any file anywhere is you have a field the specifies the output file. I wish I had some time to think about this some more ...Joe Craig

1 Answers

1
votes

So I've been away for a long time, I hope my answer will still help...

We have a very simple solution :). If you check out bootstrap instant template you'll see that we add various classes to the <body> tag.

https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/controls/body-css-classes.ascx#L86-L91

That way we can just use normal CSS of the theme with rules based on portal-27 etc. to vary by portal.