Skip to Content (Press Enter)
2022-09-04 15-01-10
JayPea
149Views
3Comments
Solved
CSS Override Stylesheet
Question
Reactive
CSS
Application Type
Reactive

Hi All,

I have an application which I am building in a CW module.  The idea is that this can be plugged in to other applications as and when needed.

The issue I am facing is that I have had to build a couple of blocks which are styled almost identically with a couple of lines of CSS being different.

I have added the CSS in the blocks so the changes are reflected in the editor. So each block within the editor appears with the correct styling.

The issue, however, is I'm using the same classes and styling within different blocks and duplicating CSS. If I were developing in VS code, for example, I would add a local style sheet and load it in after all the other style sheets (i.e. load it last) so that override styles would be applied last.

Can I do the same in OS? I have tried adding a local theme but it doesn't seem to work.

Initially I thought I would just take all the code out of the individual blocks and place it in the consolidated block.  Whilst this does work when the app is displayed in the browser, I think it is confusing for anyone who may look at the app in outsystems in the future, if the underlying blocks appear to have no formatting.

I think it would be better to have a local theme which will still allow the blocks to appear correctly styled where I can remove any duplicate style classes.

Question 1 - Is this possible?

Question 2 - How would I set this up? I have added a local theme and pasted all of my CSS within it, however, when I comment out the block CSS the styles within the block are lost.

Thanks


0
0
28 Jun 2023
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Just to give a preliminary reply without knowing the exact details : 

when I want to reuse styling in several (public) blocks from for example a CW module, I make an extra small non-public block that only holds styling, and put that in each (public) block that needs that styling => reuse

you are talking about small differences, your actual blocks can then still add to or override this styling in their own css

The theme option you are trying doesn't work, that theme plays no role in consuming modules of your blocks a.f.a.i.k.

Dorine

See solution in context
1
0
28 Jun 2023
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @JayPea ,

can you give a bit more concrete information, 

  • do those blocks have their own css classes, or are you styling outsystems ui classes?
  • what do you want to happen once you start using blocks of your CW module in other modules, do you want them to retain their own styling, or do you want them to adapt to the consumer's styling?
  • what do you mean by "consolidated block" ?
  • what do you mean by "local theme" ?
  • are you familiar with the precedence rules of Outsystems (e.g. screen trumps block) ?

it would be nice if you could share an example oml demonstrating what you currently have, and what parts you are not happy with.

Dorine

0
0
28 Jun 2023
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Just to give a preliminary reply without knowing the exact details : 

when I want to reuse styling in several (public) blocks from for example a CW module, I make an extra small non-public block that only holds styling, and put that in each (public) block that needs that styling => reuse

you are talking about small differences, your actual blocks can then still add to or override this styling in their own css

The theme option you are trying doesn't work, that theme plays no role in consuming modules of your blocks a.f.a.i.k.

Dorine

1
0
28 Jun 2023
Copy Link
2022-09-04 15-01-10
JayPea

Replying to Dorine Boudry's comment on 28 Jun 2023 10:43:21

This seems I like a good approach! I would never have thought to do that.  This way the CSS wont be duplicated and each block and it will appear, as it should, in the editor.  Thanks

0
0
28 Jun 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.