A compact Sliding-Down Pricing Tables easy to customize with modular Css classes
This layout is a Pricing section with a compact tables design. Every table will slide down on hover and you can customize the design by toggling modular Css classes.
The zip file includes:
The layout is made of three rows (you can delete the two ones you are not interested in) plus the Code row:
– 1st Row: The entire Pricing module slide down on hover;
– 2nd Row: Single Pricing tables slide down on hover;
– 3rd Row: Central Featured Pricing tab visible and the other two sliding down on hover;
– Code Row: A Code Module in which is stored all the advanced css and jQuery to make the design properly work.
By toggling the classes below you will have good margins of customizations without having to touch the css code; however if you need to customize further you can modify the css both in the Row/Module Advanced Settings and in the last Code Module added in the section in which is stored all the advanced css.
– ‘heading_icon‘ -> Toggling this class the heading icon will be shown or not. It has been designed as a background icon so as not to be too invasive in the overall design but you can edit both the icon (we use ETModules font family for ET Icons) and the design (color, font-size etc.) in the ‘:after’ custom css of each single tab.
– ‘labelled‘ -> Toggling this class you can make visible or not the labels of each tab. You can customize the text and background color directly in the ‘:before’ custom css of each single tab (obiously if you want to show just one label you have to activate this class for the pricing module, then you will remove the ‘content’ property in the ‘:before’ of the tabs for which you don’t want to show the label).
– ‘custom_bullet‘ -> This class if active will transform the default list bullets in ET Icons (by default “\51” and “\52” but you can change these values in the Code module under ‘List Bullet Style’ section).
We offer a basic support that includes: a) fixes of any display problems; b) one minor design improvement. This can involve a specific part of the layout and in a way that the improvement doesn’t change the global design: could be for example moving a label or the heading icon, or change the icon itself or even making any changes that are not upsetting compared to the original design;
The time needed to get support may vary; any fixes will be supported in about 1/2 days while for the improvement support the time needed will be from 1 to 5 days.
NOTE: If you see display issues about the bullet list icons please check in the Code module (List Bullet Style section) that the content has one backward slash preceding the icon code (alphanumeric or numeric): in our case the list bullet icons should be respectively “\52” and “\51”!