Are you enjoying the extensions? Did you like the support? Help others decide

Leave a review

Global configuration: theming

Pro

These options only apply to the contact views.

Theme The overall look of a contact card
  Original
The default look.
  Theme 1 Removed in v3.0
Floating icons show on top of the card. Field 2 and over are slightly moved to the right
Download more themes Download more themes

Theme overrides

Tweak the themes with a few additional options.

Style Social Links Add the official color to social icons (e.g. blue for Facebook...), overriding the icon color
Card
Background image Card background image (has precedence over the background color overrides)
Background color Card background color (overrides the theme’s background color)
Leave blank to keep the theme’s original color
Background color 2 2nd background color to create gradients.
Leave blank to keep the theme’s original color
Shadow Set to 'yes' to show a card shadow
Border radius The card border radius
Border width The card border width
Border color The card border color
Font The font to use for the card (standard web fonts or Google fonts)
Font size The font size of the whole card (in ems). Relative to the template font size
Font color The overall text color
Leave blank to keep the theme’s original color
Line spacing The line height for all fields
Fields
Icon font size The icon font size (in em). Relative to the font size of the card
Icon font color The color of the icon
Icon font background color The background color of the icon
Label width The width of the label. '0' will not restrict the label to any specific width
Label color The color of the label
Label background color The background color of the label
Links
Links position The position of the links on the card.
  • Above/Under picture
  • Left/Right of card
  • Top/Bottom of card
Icon font size The icon font size (in em). Relative to the font size of the card
Icon font color The color of the icon
Icon font background color The background color of the icon
Hover effect A CSS3 animation to apply to the picture on touch or click. Use the effect picker that provides a wide range of animations
Other
Additional CSS An easy way to include additional styles

Example .te_contact .fieldname { font-weight: bold; }

Related tutorials and topics

Featured Blogs