The Tile Customizer app lets you configure the look and feel of your content tiles without having to mess around with custom code. Some of the most common customizations we’ve implemented for customers have been baked right into the app so you can change them in seconds.
- Enable a slick roll-up feature on your tile descriptions whenever a user hovers over them
- Add rounded corners to your content tiles
- Hide the default link text at the bottom of every tile
You can configure settings for this app at both the account level and the Hub level:
- Settings at the account level will apply across all Hubs within your Uberflip account.
- Settings at the Hub level will apply to that Hub only, and will override any existing account level settings for that Hub.
For instructions on how to configure account level and Hub level settings for Uberflip Marketplace apps, see this help article.
You can configure the following settings for this app at both levels:
Enable Description Slide
Turns the animated slider effect on and off. If enabled, whenever a visitor mouses over a Tile, this effect makes the lower half of the Tile slide up and cover the Item thumbnail to show the Item's description text.
Toggle the switch on (green) if you want to enable the animated slider effect. Leave this setting off (grey) if you want to use the default behaviour (no slide).
Description Slide Speed
If you have turned on the Enable Description Slide setting, this setting specifies the duration of the slider animation. To use, enter a time in seconds that the animation should take to fully complete (i.e. from mouseover until the slider fully covers the Item's thumbnail). Enter the duration according to the format of the CSS transition-duration property, e.g. Xs, where X is the amount of time in seconds (decimals are allowed). For example, a value of 1.5s would cause the animation to take one and a half seconds. For more information on the CSS transition-duration property, see this page.
If nothing is entered, the default animation time of 0.3s will be used.
Enable Rounded Corners
Makes the corners of Item Tiles rounded, rather than right-angled.
Toggle this switch on (green) to use rounded Tile corners. Leave this setting off (grey) if you want to use the default Tile appearance (right-angled corners).
Rounded Corner Radius
If you have turned on the Enable Rounded Corners setting, this setting customizes the rounding of the Tile corners. To use, enter a corner radius according to the format of the CSS border-radius property. You can enter between one and four values:
- One value (e.g. 15px): Value is applied to all four corners
- Two values (e.g. 15px 30px): First value is applied to the top left and bottom right corners; second value is applied to the top-right and bottom-left corners
- Three values (e.g. 15px 50px 30 px): First value is applied to the top left corner; second value is applied to top right and bottom left corners; third value is applied to bottom-right corner
- Four values (e.g. 15 px 20 px 25 px 30 px): Values are applied to corners in clockwise order, starting from top left
You can enter values either as a length in pixels (e.g. 15px), a percentage (30%) or a combination of both. You can also set an additional radius to create elliptical corners: to do so, add a / after the initial one to four values, then add a further one to four values (up to eight values total). For further information and examples, see this description of the CSS border-radius property.
If nothing is entered, the default setting of 15px for all corners will be used.
Enable Tile Skew
Gives Tiles an angled or "leaning" appearance (i.e. Tile shape will be a rhombus rather than the standard rectangle).
Toggle this switch on (green) if you want Tiles to be angled/leaning. Leave this setting off (grey) if you want to use the default upright Tile appearance.
Tile Skew Angle
If you have turned on the Enable Tile Skew setting, this setting customizes the angle of the tile's sides (i.e. the amount of "lean"). To use, enter the number of degrees that the Tile's sides should be rotated from vertical. Positive values will lean the Tile to the left; negative values will lean the Tile to the right. For example, 5 will result in a 5 degree left lean; - 3 will angle Tiles 3 degrees right.
You can enter any positive or negative value from 1 to 180; values higher than 180 will wrap around, so 15 degrees is equivalent to 195 degrees (i.e. 180 + 15). We do not recommend using any value greater than 15/-15.
If nothing is entered, the default setting of -2 will be used (2 degrees of right lean).
Hide Tile Link
Hides the Tile footer which contains the Tile's content-specific link button (i.e. "Read Article", "Watch Video", etc.).
Toggle this switch on (green) if you want to hide the footer. Leave this setting off (grey) if you want the normal Tile footer link buttons to be shown.