How should I make the design on the screen stylish ?


As you can see the above image, I wiuld like you to tell me about how to change the shape of buttons.


I'm picking Lisbon Template but I cannot figure out how to make use of the Silk UI templte.

I also want to make the screen and buttons look kind of stylish with Lisbon Template.


I was wondering if you could tell me about this.

Solution

Tsubasa Yoshikawa wrote:


As you can see the above image, I wiuld like you to tell me about how to change the shape of buttons.


I'm picking Lisbon Template but I cannot figure out how to make use of the Silk UI templte.

I also want to make the screen and buttons look kind of stylish with Lisbon Template.


I was wondering if you could tell me about this.

Hi Tsubasa Yoshikawa

  Write some new css for the button change the style class for the button in properties it will affect the default button css

SyntaxEditor Code Snippet

.changeButton
{
    height:30px !important;
    width:50px !important;
}

use changeButton class name in button style class properties.

Thank you

soundarya

Solution

Hello Tsubasa, 

Don't know if you already finish the online training, but you should revisit this training video about themes & styles: https://www.outsystems.com/learn/lesson/1756/themes-and-styling/?LearningPathId=2

You have also a master class on CSS in OutSystems (many videos), that I strongly recommend: https://www.outsystems.com/learn/courses/21/master-class-on-css-in-outsystems/?LearningPathId=2

As Web applications run in browser, a good understanding on CSS (and Javascript) is very important and you may want to study about it using other resources (books, online resources, etc.). 

Regarding styling visual elements of SilkUI temates, don't know if there is documentation on the classes used, but you can always inspect the screen in the browser and find what classes and selectors are being used in order to overwritten them. 

For exame, Buttons already have a set of classes and selectors being applied that you may want to overwrite in the application theme Stylesheet instead of applying more classes over it. 

Cheers