How can i create Screen using Html and Css?

Please Explain How to do?

Thanks in Advance....

Hi Vel,


I would suggest please go through the below links to make understading in OS

www.outsystems.com/learn/paths/2/becoming-a-traditional-web-developer/

Vel Raja Balasubramanian wrote:

How can i create Screen using Html and Css?

Please Explain How to do?

Thanks in Advance....

Hi Vel Raja,

OutSystems as its own Design framework OutSystems UI. You can use for creating UI. Instead of using HTML tags you can use OutSystems components like Container. You also have option to use HTML elements where needed.

You can write your CSS in Theme (you can find that in interface tab)

You can go through this guided path for understanding more about OutSystems UI designing

https://www.outsystems.com/learn/paths/7/designing-user-delightful-ux-ui/

How can i create Screen using Custom Html and Css?

I have already Html and Css  code , How i use this code to our Outsystems... That's my question.

Please Explain How to do?

Thanks in Advance....

Vel Raja Balasubramanian wrote:

How can i create Screen using Custom Html and Css?

I have already Html and Css  code , How i use this code to our Outsystems... That's my question.

Please Explain How to do?

Thanks in Advance....

Hi,

1.First you need to create a module for theme in which you need to update your custom CSS and update your html code in the Layout webblock.

2.You need to create some screen that will use the layout of your created layout.


still not able to do that so can refer any outsystems default created web site you can get an idea how you can do that.

Hi Vel Raja Balasubramanian,

If you want to embed any custom HTML and CSS code within a screen, you can use Expression widget by setting  the Escape Content property to No.

Check this: Sample Screen

SyntaxEditor Code Snippet

"<h1 style='color:red'> This is heading1 tag </h1>
<h2> This is heading2 tag </h2>
<h3> This is heading3 tag </h3>
<h4> This is heading4 tag </h4>
<h5> This is heading5 tag </h5>
<h6> This is heading6 tag </h6>
<h7> This is heading7 tag </h7>

<br/>
<p> This is a paragraph tag </p>
"


Hope this helps you!

Regards,

Benjith Sam

Vel Raja Balasubramanian wrote:

How can i create Screen using Custom Html and Css?

I have already Html and Css  code , How i use this code to our Outsystems... That's my question.

Please Explain How to do?

Thanks in Advance....

You have to translate your HTML to outsystems widgets and to reuse your HTML you can use Html element widget on some place but I don't think using html widget for complete screen is feasible. 

CSS you can use directly as explained by me and salman in previous comments.

There is no direct option to use HTML for designing complete screen and even if you are able to do that anyhow then you might face issues later.