Renaming a Reactive Theme breaks the generation of CSS file (theme-name).extra.css

Back to Forums

Tiago Bernardo

Champion

Discussion

Reactive

CSS

Front-end

OutSystems 11

Hi there!

I have noticed that in a Reactive application if the Theme is renamed this breaks the generation of CSS file

"<theme.name>.extra.css".

This problem does not occur in Traditional Web.

Using Service Studio 11.10.16, Platform Server 11.11.0 (Build 26942).

Because the file is not generated by the platform, so it does not exist, you will start getting errors like this:

Before, working correctly, this would be the situation.

I am assuming this is bug of the platform and will report this to OutSystems.

This is easy to reproduce:

1) Create a new Reactive application with one module and publish the module. (No need to even create any screen).

2) Rename the theme of the application and publish the module.

You will start getting the error mentioned above.

The workaround that I have found to this is to just cut/paste the theme.

This will cause Service Studio to generate a new theme element with a different internal ID from the previous theme element, and this will trigger the platform to generate the new CSS file "<theme-name>.extra.css".

--Tiago Bernardo

07 Apr 2021

Kilian Hekhuis

MVP

Hi Tiago,

Thanks for looking into this. I'll also put it to the attention of OutSystems.

09 Apr 2021

Pravi Gupta

Hi Tiago,
I have also faced the similar scenario.
As a work around I have copy-pasted the theme and changed its name and deleted the old one.

Thanks @Kilian Hekhuis for reporting it to Outsystems.

09 Apr 2021

Kilian Hekhuis

MVP

As an additional note, please do report this to OutSystems via a Support Case if you haven't already. It'll be easier to get this fixed, also for OS themselves.

09 Apr 2021

Carlos Escórcio

Still having this issue, i have made the workaround changed the name into the old name and it worked.

11 Nov 2021

Joris Albeda

Issue is still there. Thanks for the workaround!

21 Mar 2022

Bruno Paulo

Yes i also had the same problem here, but changed into the old name , fixed the problem.

24 Aug 2022

Erwin van Rijsewijk

Champion

Issue is still here

30 Nov 2022

Jeroen Vormer

Issue still here !!

16 Feb 2023

Jeroen Vormer

Sopport ticket created which resulted in this RPM:
https://www.outsystems.com/SPP_Ticket_UI/Problem_Detail?CaseId=2786580&ProblemId=RPM-3686

27 Mar 2023

1 reply

21 Dec 2023

Show thread

Hide thread

Ben Puckett

Working with the On-Premise version of OutSystems 11, and we are still experience this issue as of 12/2023, and I can't seem to find the relevant RPM: RPM-3686.Does another RPM need to be created?

21 Dec 2023

Naveen N

Hey everyone , i am facing the same issue, is there any solution to fix this , to make the extra css file to be added somehow? kindly assist me

06 Nov 2024

Naveen N

hey everyone , i took the old extra stylesheet and appended to my current renamed theme. will that be fine or is there any way to add the extra stylesheet kindly advise.

/My old theme name which created a extra stylesheet /

.ThemeGrid_Container {

max-width: 1280px;

padding-left: 5%;

padding-right: 5%;

}

.ListRecords {

display: block;

}

div.ThemeGrid_Width1,

div.ThemeGrid_Width2,

div.ThemeGrid_Width3,

div.ThemeGrid_Width4,

div.ThemeGrid_Width5,

div.ThemeGrid_Width6,

div.ThemeGrid_Width7,

div.ThemeGrid_Width8,

div.ThemeGrid_Width9,

div.ThemeGrid_Width10,

div.ThemeGrid_Width11,

div.ThemeGrid_Width12 {

vertical-align: top;

}

.ThemeGrid_Width1,

.ThemeGrid_Width2,

.ThemeGrid_Width3,

.ThemeGrid_Width4,

.ThemeGrid_Width5,

.ThemeGrid_Width6,

.ThemeGrid_Width7,

.ThemeGrid_Width8,

.ThemeGrid_Width9,

.ThemeGrid_Width10,

.ThemeGrid_Width11,

.ThemeGrid_Width12 {

display: inline-block;

box-sizing: border-box;

}

table.ThemeGrid_Width1,

table.ThemeGrid_Width2,

table.ThemeGrid_Width3,

table.ThemeGrid_Width4,

table.ThemeGrid_Width5,

table.ThemeGrid_Width6,

table.ThemeGrid_Width7,

table.ThemeGrid_Width8,

table.ThemeGrid_Width9,

table.ThemeGrid_Width10,

table.ThemeGrid_Width11,

table.ThemeGrid_Width12 {

display: inline-table;

vertical-align: top;

}

.ThemeGrid_Width1 {

width: 6.443298969072165%;

}

.ThemeGrid_Width2 {

width: 14.948453608247423%;

}

.ThemeGrid_Width3 {

width: 23.45360824742268%;

}

.ThemeGrid_Width4 {

width: 31.95876288659794%;

}

.ThemeGrid_Width5 {

width: 40.4639175257732%;

}

.ThemeGrid_Width6 {

width: 48.96907216494845%;

}

.ThemeGrid_Width7 {

width: 57.47422680412372%;

}

.ThemeGrid_Width8 {

width: 65.97938144329898%;

}

.ThemeGrid_Width9 {

width: 74.48453608247424%;

}

.ThemeGrid_Width10 {

width: 82.9896907216495%;

}

.ThemeGrid_Width11 {

width: 91.49484536082474%;

}

.ThemeGrid_Width12 {

width: 100%;

}

th.ThemeGrid_Width1,

td.ThemeGrid_Width1 {

width: 8.505154639175258%;

display: table-cell;