Styling in Outsystems

Styling in Outsystems

  

Hi all,

This is my first time using Outsystems platform.I have few questions to ask here

1.In Visual Studio, i could easily change the font color,font size of a label and text.I learn that in Outsystems it can be only achieved via CSS.But then i has no idea on how should write the css for it to take effects.Can anyone advise?

2.How could space between 2 buttons can be done.In Visual Studio, i can achieved it via table, or space tab.How could i apply space between two button in OutSystems.Leaning that it can be done via CSS below

SyntaxEditor Code Snippet

input[type="submit"] + a {
margin-left: 20px;
}

Is this the only way?How about the space between 2 labels?

3.Is there any online resources that i can go through for Css styling in Outsystems?

4.Is there any online resource available for teaching how to draw a line chart?I got no idea how to do it for the final project.


Can anyone advise here? 

Css in outsystems is the normal css so to speak.

I suggest you simply google your questions and find your answers there. I.e. https://css-tricks.com

Normally spacing between elements is done by margins. Example

<div>

<a></a>

<a></a>

<a></a>

</div>


Div a { margin-left: 20px}

Div a:first-child {margin-left:0}

This is out of my head, but you can check it easily.



Solution

Johnson Lim wrote:

Hi all,

This is my first time using Outsystems platform.I have few questions to ask here

1.In Visual Studio, i could easily change the font color,font size of a label and text.I learn that in Outsystems it can be only achieved via CSS.But then i has no idea on how should write the css for it to take effects.Can anyone advise?

You can use the CSS button on the toolbar to open the CSS editor:

You can then assign specific classes to your elements, using the Style Classes property. You can also write dynamic (or just element specific) CSS by using the Extended Properties of any widget.

In the example screenshot you can see how to statically apply the Italic class to the Expression by using the Style Classes property (this is what you get when you click on the Italic button on the toolbar). You can also see how to apply widget-only styling by using the style Extended Property (this will be embedded directly on the HTML element). Finally we can also dynamically decide what CSS classes to apply based on some condition, by using the class Extended Property:

2.How could space between 2 buttons can be done.In Visual Studio, i can achieved it via table, or space tab.How could i apply space between two button in OutSystems.Leaning that it can be done via CSS below

SyntaxEditor Code Snippet

input[type="submit"] + a {
margin-left: 20px;
}

Is this the only way?How about the space between 2 labels?

The platform actually does this for you automatically, just by using the Grid, but you can override any default behaviour by changing the Margin Left property:

3.Is there any online resources that i can go through for Css styling in Outsystems?

Basic CSS styling is covered in the standard training materials for OutSystems, have you done the Developing OutSystems Web Applications course yet? If you haven't, you probably should, as it covers all the basics of developing with the platform.

If you want to know a bit more about CSS and OutSystems, you have a Master Class on CSS in OutSystems.

4.Is there any online resource available for teaching how to draw a line chart?I got no idea how to do it for the final project.

You may want to check these links:

You can also go to the HighCharts documentation for more info on customising the Charts component.

Hope this helps!

Solution

Thanks Jorge