CSS changes reflected in Service Studio but not on publish.

CSS changes reflected in Service Studio but not on publish.

  

Hi,

I need to display some text in a popup. I applied font size, color and weight for the text in the stylesheet and used the class name. I could see the changes being reflected for the text in the Service Studio. But upon publish the changes are not reflected in the browser. Kindly guide me on this. 

Regards,

Keerthana

Hi! 

Well, what is happening is that you have the previous version of that style in Cache :)

Try to refresh the brower using CTRL + F5

Cheers

Hi Keerthan, 

where did you add the styles? In the pop up styleseheet?

The problem can be about the css priority:

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)#Editing_CSS

Not all styles have the same priority and the order Service Studio imports the style sheets will affect how browsers will apply your styles. The last style to be applied has the highest priority.

  1. System style sheet for Container widgets in the Grid
  2. Web Blocks style sheet
  3. Theme style sheet, which also includes a base theme (if specified)
  4. Web Screens or Emails style sheet
  5. Theme extra style sheet, with the Grid settings defined in the Theme properties


César Miguel Cação wrote:

Hi Keerthan, 

where did you add the styles? In the pop up styleseheet?

The problem can be about the css priority:

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)#Editing_CSS

Not all styles have the same priority and the order Service Studio imports the style sheets will affect how browsers will apply your styles. The last style to be applied has the highest priority.

  1. System style sheet for Container widgets in the Grid
  2. Web Blocks style sheet
  3. Theme style sheet, which also includes a base theme (if specified)
  4. Web Screens or Emails style sheet
  5. Theme extra style sheet, with the Grid settings defined in the Theme properties


Would he be able to see the changes reflected in Service Studio, if it was the style being crushed by priority?


Hi Keerthan,

I agree with César Miguel Cação explanation. I implemented the same scenario in my personal environment and its working fine. If you didn't sorted it out could you please elaborate how did you assigned the css to the text (with screenshot).




Kind Regards,

Benjith Sam

Keerthana Hemachandran wrote:

Hi,

I need to display some text in a popup. I applied font size, color and weight for the text in the stylesheet and used the class name. I could see the changes being reflected for the text in the Service Studio. But upon publish the changes are not reflected in the browser. Kindly guide me on this. 

Regards,

Keerthana

If this is the case just try to open the application in the guest window it always works for me if there is a cache issue.


Regards,

Pankaj pant


César Miguel Cação wrote:

Hi Keerthan, 

where did you add the styles? In the pop up styleseheet?

The problem can be about the css priority:

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)#Editing_CSS

Not all styles have the same priority and the order Service Studio imports the style sheets will affect how browsers will apply your styles. The last style to be applied has the highest priority.

  1. System style sheet for Container widgets in the Grid
  2. Web Blocks style sheet
  3. Theme style sheet, which also includes a base theme (if specified)
  4. Web Screens or Emails style sheet
  5. Theme extra style sheet, with the Grid settings defined in the Theme properties


Hi Cesar,

Style has been applied to the extended property of the container which holds the text.

Thanks

Keerthana

Benjith Sam wrote:

Hi Keerthan,

I agree with César Miguel Cação explanation. I implemented the same scenario in my personal environment and its working fine. If you didn't sorted it out could you please elaborate how did you assigned the css to the text (with screenshot).




Kind Regards,

Benjith Sam

Hi Benjith,

Upon applying the CSS styles the following is observed in service studio.

After Publishing the following is obtained in browser

And below is the CSS applied for session title and the inner text

SyntaxEditor Code Snippet

.SessionText {
    color: #262626;
    font-size: 16px;
    font-family: 'Gotham', Arial, sans-serif;
   
    }
.SessionTitle {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}
  

Hi Keerthana Hemachandran,

As per your reply, I applied the CSS script to the container Style property (i.e. assigned CSS class) in popup screen and it's working fine for me.

Just give it a try:

- Inspect the popup in the web browser and remove the assigned class (if its present) to the parent div under which the text widget is relying and see the changes. 

- Do some changes related to CSS and assigned classes in the hierarchical div's in web browser inspect section which will help you to understand the CSS effects and will help you to figure out the solution.

- Assign the class to the text widget Style Classes property instead of the container Style Classes property. 

Hope it helps!


Kind Regards,

Benjith Sam