I have split the CSS Tags into Field and Font Formats, you simply input a string of tags, as per the following example which is the second one from the above visual:
border-style: none; background: transparent !important; color: #cccccc !important; font-size: 11px;
There are of course several more tags available, but I’ve only included the more obvious ones I have had cause to use at some time over the last 10 years or so. Do NOTE that since Affino 5, you need to set button background as transparent for background image to show through. Otherwise, it’s all pretty straightforward. If you require further guidance, I recommend you access the ’W3 Schools CSS Reference’ for the full CSS tag library.
Field Formatting Tags:
- Background Colour = background-color: #ffffff; | (NOTE - use - background-color: #ffffff !important;)
- Border Colour = border-color: #cccccc; (NOTE - use - border-color: #cccccc !important;)
- Border Style = border-style: none; | solid;
- Border Width = e.g. border-width: 1;
- Height = height: 24px;
- Transparency = background: transparent; | (NOTE - use - background: transparent !important;)
- Width = width: 80px;
Font Formatting Tags:
- Alignment = text-align: left; | right; | centre; | justify;
- Colour = color: #000000; | (NOTE - use - color: #000000 !important;
- Font = font: verdana; | arial; | helvetica; | etc.
- Font Family = font-family: verdana; | sans-serif; | etc.
- Indent = text-indent: 5px;
- Size = font-size: 11px; | small; | medium; | large; | etc.
- Style = font-style: normal; | italic; | Oblique;
- Transform = text-transform: none; | capitalize; | uppercase; | lowercase;
- Vertical Alignment = vertical-align: baseline; | bottom; | middle; | sub; | super; | text-top; | text-bottom; | bottom;
- Weight = font-weight: normal; | bold; | bolder; | Lighter;
Image formatting
- Background Image = background-image: url(name.gif); (NOTE - you can usually just make cell have transparent background so it shows through Affino Cell selected background image)
- Repeat = background-repeat: no-repeat; | repeat;
NOTES
As Form Style is set to override settings for:
Background Colour, Border Colour, (Text) Colour and Transparency - your manual field settings need to be appended with !important - in order to override the overrides!
