How can I change css class?

[thanhlong]

How can I set css for element on Designer window?
Ex: I want to change blue background for login button. How can I setting on Designer's properties.

Capture.PNG (56.54KiB)Viewed 48021 times

[Sachin]

Appzillon provides the following options
1) The look and feel of the button can be changed using the Appearance property of the button. There are 4 properties primary, secondary, tertiary and transparent.
2) You can also make use of the Semantics property also to change the button colour, where there are four options like info, success, warning and error.
3) If the default Appearance and Semantics combinations do not give you the desired look and feel, you can modify the corresponding css classes. Below are the class that gets added to the button widget based on the selection made.

• Class: .ett-bttn

• Appearance: primary (.pri), secondary (.sec) , tertiary (.ter), transparent (].tsp)

• Semantics: Info (.inf), success (.suc), warning (.war), Error (.err)

Please refer to the attached xls for the css classes of other widgets.
4) You can also add custom css class for the button styling in the css file and include the class name to the CSS class property. This approach is not recommended as custom css classes require additional creation and mapping effort.

[thanhlong]

4) You can also add custom css class for the button styling in the css file and include the class name to the CSS class property. This approach is not recommended as custom css classes require additional creation and mapping effort.

I'm facing a problem after edit CSS Class.

The attachment Capture_1.PNG is no longer available

The error dialog appeared.

Capture_1.PNG (38.07KiB)Viewed 47998 times

How can I change with css file?

[Sachin]

4) You can also add custom css class for the button styling in the css file and include the class name to the CSS class property. This approach is not recommended as custom css classes require additional creation and mapping effort.

I'm facing a problem after edit CSS Class.
Capture_1.PNG

The error dialog appeared.

Capture.PNG
How can I change with css file?

The css file can be seen in the IDE under View > Theme Manager
A tree structure will be visible in the left , go to Themes > appzillon > stylesheet - appzillon. Open the appzillon css

You can find the class for the button from the browser inspect window. The same class name or the line number where the css rule is written can be searched in the appzillon css and modified.

[Sachin]

4) You can also add custom css class for the button styling in the css file and include the class name to the CSS class property. This approach is not recommended as custom css classes require additional creation and mapping effort.

I'm facing a problem after edit CSS Class.
Capture_1.PNG

The error dialog appeared.

Capture.PNG
How can I change with css file?

For example

For doing modification to the button following classes can be used.

.ett-bttn.pri { //CSS Property goes here }
.ett-bttn.pri:hover { //CSS Property goes here }
.ett-bttn.pri:focus { // CSS Property goes here }
.ett-bttn.pri:active { //CSS Property goes here }

Below are the class names for the respective appearance:
primary (.pri), secondary (.sec) , tertiary (.ter), transparent (.tsp)

You can add more class to the button by selecting the Variations in the property which will add variation class
For example if you select Variation1 then var1 class will be added to the button

[tripathiankush]

Thank you for taking the time to write about this much needed subject. I felt that your remarks on this technology is helpful and were especially timely.

[Sapnapawar]

I got valuable information here. Thank you for sharing! Keep up!