How can I change css class?

Moderator: tijimon

Post Reply
thanhlong
Posts: 7
Joined: Wed Jul 18, 2018 3:10 pm
Company Name: Komtek

#1 How can I change css class?

Post by thanhlong » Wed Aug 08, 2018 2:41 pm

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.54 KiB) Viewed 753 times

Sachin
Posts: 7
Joined: Thu Jul 12, 2018 10:25 am
Company Name: i-exceed

#2 Re: How can I change css class?

Post by Sachin » Wed Aug 08, 2018 7:17 pm

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.
Attachments
CSS.xlsx
(334.72 KiB) Downloaded 40 times
Last edited by Sachin on Fri Aug 10, 2018 9:13 am, edited 1 time in total.

thanhlong
Posts: 7
Joined: Wed Jul 18, 2018 3:10 pm
Company Name: Komtek

#3 Re: How can I change css class?

Post by thanhlong » 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.
The attachment Capture_1.PNG is no longer available
The error dialog appeared.
Capture_1.PNG
Capture_1.PNG (38.07 KiB) Viewed 730 times
How can I change with css file?

Sachin
Posts: 7
Joined: Thu Jul 12, 2018 10:25 am
Company Name: i-exceed

#4 Re: How can I change css class?

Post by Sachin » Fri Aug 10, 2018 11:10 am

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.

Sachin
Posts: 7
Joined: Thu Jul 12, 2018 10:25 am
Company Name: i-exceed

#5 Re: How can I change css class?

Post by Sachin » Fri Aug 10, 2018 5:00 pm

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

User avatar
tripathiankush
Posts: 2
Joined: Tue Jan 15, 2019 12:23 pm
Location: pune
Company Name: weepro
Contact:

#6 Re: How can I change css class?

Post by tripathiankush » Tue Jan 29, 2019 12:06 pm

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. :)

Post Reply