57
Views
6
Comments
Solved
Developing Web Apps (OutSystems 11) - Themes and Styling Exercise
Question

Hi all,


i have followed the step to do "Themes and Styling Exercise" from the training course - Developing Web Apps (OutSystems 11) - Themes and Advanced UI


In Create golden stars - 1)f, add the code to the bottom of the CSS - Theme Style Sheet - OSMDb.


However, I can't add the code in the Theme Style Sheet - OSMDb.

How can i solve this problem?


Thanks,

Martin


2020072902.jpg
2023-07-28 17-00-32
Marco Arede
 
MVP
Solution

Hi Martin yeung

I've found a better explanation for your case: not that you're consuming another eSpace, but you've created a Theme dependency, using the Theme Editor.

Once a new CSS is in place, using Theme Editor, you can edit your eSpace Theme (OSMdb2020) or reset the Theme Editor.

Let me give an example, using another application (Booking's):

  • 1) Open Theme Editor:


  • 2) Reset Theme Editor CSS:
  • 3) Or continue to edit in your eSpace Theme:


Hope it helps, cheers!

UserImage.jpg
Martin yeung

Marco Arede wrote:

Hi Martin yeung

I've found a better explanation for your case: not that you're consuming another eSpace, but you've created a Theme dependency, using the Theme Editor.

Once a new CSS is in place, using Theme Editor, you can edit your eSpace Theme (OSMdb2020) or reset the Theme Editor.

Let me give an example, using another application (Booking's):

  • 1) Open Theme Editor:


  • 2) Reset Theme Editor CSS:
  • 3) Or continue to edit in your eSpace Theme:


Hope it helps, cheers!

 

 Hi Marco,

Thanks for your detailed and clear explanation.

But i want to know more about the concept of it.

Why my application create the Theme Editor ? it is the default setting ?

The code in the "Bookings" will overwrite the code in the "Bookings (Theme Editor)" ?

Thanks,

Martin

2023-07-28 17-00-32
Marco Arede
 
MVP

Hi Martin yeung ,

You're probably trying to edit the Theme CSS of another eSpace module you're consuming. Try to edit your module's Theme (OSMDb2020) of your current eSpace.

Regards,

 

2025-11-19 06-14-01
Miguel Verdasca
Champion

Hi,


you can click in CSS and create a CSS class in screen (image 1), or you can improve css inline (image 2), isn't a best practice, click in widget that you want, click in style tab, and edit... in the end if you can create a css class with your change, you can... just need to click in a button.


Image 1


Image 2

2023-07-28 17-00-32
Marco Arede
 
MVP
Solution

Hi Martin yeung

I've found a better explanation for your case: not that you're consuming another eSpace, but you've created a Theme dependency, using the Theme Editor.

Once a new CSS is in place, using Theme Editor, you can edit your eSpace Theme (OSMdb2020) or reset the Theme Editor.

Let me give an example, using another application (Booking's):

  • 1) Open Theme Editor:


  • 2) Reset Theme Editor CSS:
  • 3) Or continue to edit in your eSpace Theme:


Hope it helps, cheers!

UserImage.jpg
Martin yeung

Marco Arede wrote:

Hi Martin yeung

I've found a better explanation for your case: not that you're consuming another eSpace, but you've created a Theme dependency, using the Theme Editor.

Once a new CSS is in place, using Theme Editor, you can edit your eSpace Theme (OSMdb2020) or reset the Theme Editor.

Let me give an example, using another application (Booking's):

  • 1) Open Theme Editor:


  • 2) Reset Theme Editor CSS:
  • 3) Or continue to edit in your eSpace Theme:


Hope it helps, cheers!

 

 Hi Marco,

Thanks for your detailed and clear explanation.

But i want to know more about the concept of it.

Why my application create the Theme Editor ? it is the default setting ?

The code in the "Bookings" will overwrite the code in the "Bookings (Theme Editor)" ?

Thanks,

Martin

2023-07-28 17-00-32
Marco Arede
 
MVP

Hi Martin yeung ,

You're welcome! The Theme Editor is created on user request (it's not a default setting). Probably you opened it here:


Maybe without wanting you saved it because: one can edit something in the editor, click the button to close the popup editor (that is not a cancel button), and a new Theme is applied. But in any case, it can be removed afterwards!

Yes this Theme Editor CSS will replace (some of) the CSS defined in your eSpace Theme. For more information about this Theme Editor read more in OutSystems Documentation.

Good exercise practice!

2020-07-29 19-08-40
Sanjay Kumar Sahu

Hi Martin,


In case if you still not getting CSS applied to your star, you shall define it in Block(StarDisplay) like below :

As screen complete its rendering post block, block's CSS will be overwrite by Screen's CSS, so you can also define it in Screen level. 

Rendering sequence : Block -> Module Theme-> Screen Level

And Yes, CSS defined in Bookings will overwrite CSS of Bookings(Theme Editor). I think it is intended functionality provided by OS as we can't create our own CSS class in theme editor(It contains only predefined themes to select from), so if we want to change default theme, we can write our own CSS in Bookings tab.

Hope it helps!

Thanks,

Sanjay

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.