7.2 Enhance the Page Style using CSS

7.2 Enhance the Page Style using CSS

  
Hi,
I get a html string, how can make them showing in the page in a web format, I mean not the string.
My Style Sheet Editor doesn't show the "Customer Support" tab so I can't globally define the styles
Hi Ricardo,

Can you share your module so that I can have a look? Export it using ctrl+s. Thanks!
Hi,
How do I know the element name for use the definition of style?
Where is the element name ?
In this case , it was used .IssueContainer, where I find out this element name?

Tks
Hi karla,

This is not an element name. This is a css class that we apply to the container in the Style property.
André Vieira wrote:
Hi karla,

This is not an element name. This is a css class that we apply to the container in the Style property.
 Hi André,

I understood what do you explained.
But what I want say, where I find the element name, this case is customer, for the example below:

<body>
<div name="customer">This is a Heading</h1>
</body>
 
In the video, where is write .IssueContainer ? Because, they not write in the Html code direct. 

As I know the element name to change - it on the dashboard ?

Tks;

karla,

Since OutSystems Platform generates the html pages based on the model you define visually in Service Studio, the identifiers of the html elements is also generated. There's a runtime property Id that allows you to refer to this Id in the application logic but you can't use it for CSS, because CSS is static. Therefore the way to use CSS in OutSystems is to use rules based on classes or html tags and not specific elements. Additionally you can use the extended properties to apply styles to the element. These would be applied in the style attribute of the element.
André Vieira wrote:
karla,

Since OutSystems Platform generates the html pages based on the model you define visually in Service Studio, the identifiers of the html elements is also generated. There's a runtime property Id that allows you to refer to this Id in the application logic but you can't use it for CSS, because CSS is static. Therefore the way to use CSS in OutSystems is to use rules based on classes or html tags and not specific elements. Additionally you can use the extended properties to apply styles to the element. These would be applied in the style attribute of the element.
 I Understood now.

Thanks.
 

same as Ricardo CostaRank: #3320Posted on 2015-10-10:


My Style Sheet Editor doesn't show the "Customer Support" tab so I can't globally define the styles

Hello Dale,


Please check what is the value of the Default Theme property of your module. It should be CustomerSupport theme like in the screenshot below.


Paulo Ribeiro wrote:

Hello Dale,


Please check what is the value of the Default Theme property of your module. It should be CustomerSupport theme like in the screenshot below.



Hi Paul,


The default them property was (and is) CustomerSupport, but the Style Sheet Editor doesn't show the "Customer Support" tab.


Any other suggestions?

Dale, let's try one more thing.


Can you find the theme CustomerSupport under the Themes folder (tab Interface)? If it's there, what happens when you double-click it?


Here's what happens in my application:


Paulo,

My screen matches yours when I do that.



Paulo Ribeiro wrote:

Dale, let's try one more thing.


Can you find the theme CustomerSupport under the Themes folder (tab Interface)? If it's there, what happens when you double-click it?


Here's what happens in my application:




One last try: please check what is the Theme defined for the MainFlow. It should be (eSpace Default Theme) or CustomerService.



If this still does not solve the issue, you can edit the CSS by double-clicking the CustomerSupport theme under the folder Themes. You can also send me your .oml file (save it with Ctrl+S) so that I can have a look and try to find out what's wrong.

Paulo,


Thanks for hanging in there with me.  The MainFlow Theme was incorrect (it was set to Chicago), almost certainly as a result of something I did.

Once this was corrected to eSpace Default Theme, the CSS Style Sheet began to act as expected.

Thanks for your help.

Dale

Glad to know we eventually figured out what was wrong! :)