Page 1 of 1

#1 How can I change css class?

Posted: Wed Aug 08, 2018 2:41 pm
by 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
Capture.PNG (56.54KiB)Viewed 29012 times

#2 Re: How can I change css class?

Posted: Wed Aug 08, 2018 7:17 pm
by 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.

#3 Re: How can I change css class?

Posted: Thu Aug 09, 2018 10:27 am
by 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
Capture_1.PNG (38.07KiB)Viewed 28989 times
How can I change with css file?

#4 Re: How can I change css class?

Posted: Fri Aug 10, 2018 11:10 am
by Sachin
thanhlong wrote:
Thu Aug 09, 2018 10:27 am
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.

#5 Re: How can I change css class?

Posted: Fri Aug 10, 2018 5:00 pm
by Sachin
thanhlong wrote:
Thu Aug 09, 2018 10:27 am
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

#6 Re: How can I change css class?

Posted: Tue Jan 29, 2019 12:06 pm
by 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. :)

#7 Re: How can I change css class?

Posted: Fri Aug 16, 2019 9:46 am
by Sapnapawar
I got valuable information here. Thank you for sharing! Keep up!