Branding and Design
      Back to home
      1. Rock Content Knowledge Base
      2. Ion
      3. Branding and Design

      Micro-Theme Categories

      Branded Micro-Themes

      The below micro-theme categories include options that were coded into your branded theme and are tailored to your brand standards. Additional branded micro-themes can be added to each of the below categories as needed over time.
       

      Accordion

      This category includes alternative style options that can be applied to any accordion component published into your page.

      Backgrounds

      Can be applied to any container, column, row or grid. When utilized, these micro-themes will change the color in the background of the element it is applied to.

      Bullet List

      These micro-themes can be applied to text and are used to alter the type of bullets used within a bulleted list.

      Buttons

      Button micro-themes can be applied to text links in order to turn them into buttons. Button micro-themes come in different shapes, sizes and colors and also include different click cues for each button type.

      Color

      These micro-themes can be applied to text and control the color of the text they are applied to.

      Fonts

      Font micro-themes can be applied to text and change the font used by that text.

      Link

      These micro-themes can be used to control the style of any text link published into your page.

      Logo

      Logo micro-themes can be applied to any container to display one of the logos coded into your theme within that container.

      Pods

      Pods contain CSS that affects the styling of multiple elements at once. By default, they will add padding to all sides, change the background color, the text color, the link color, and the button colors.

      Regions

      Regions are similar to pods; they will control top and bottom padding, background color, text colors, link colors, and button colors. 

      NOTE: Regions are meant to be applied to entire sections of a page, whereas Pods can be applied to containers/columns within a region to override the Region styling.

      Tabs

      This category includes alternative style options that can be applied to any tabbed content component published into your page.

      System Micro-Themes

      The below micro-theme categories include options that are available in all consoles and are not specific to specific brand standards.

      Alignment

      Includes left, right and center alignment options. These micro-themes can be applied directly to text or to an entire container. When applied to a container, everything within the container will align to the left, right or center.

      Drop Down

      Includes different style options that can be applied to drop down menus within a freestyle form.

      Choice Group

      Includes different style options that can be applied to a choice group within a freestyle form.

      Choice

      Includes different style options that can be applied to an individual choice within a freestyle form.

      Flow

      Flow micro-themes can be used to adjust the navigation style and color, the alignment of the Flow navigation as well as the transition effect used when going from one Flow Step to another.

      Form

      The micro-themes in this category can be used to control the style of your form fields, what happens within the form when validating form fields, the placement of your form labels, the alignment of the submit button and the style of your required fields. You may apply more multiple form micro-themes to any freestyle form you publish within an ion page.

      Form Field

      The micro-themes within this category can be applied to a form field container and can be used to change the style of the field.

      Full-Page Slider

      These micro-themes can be used to adjust the style/color of the navigation used within a Full-Page Slider component.

      Grid Layout

      The Grid Layout category includes micro-themes that can be used to make adjustments to columns and rows within a given grid. These micro-themes can be applied to the entire grid or specifically to a column or row. The options in this category include:
       

      • Nested responsive grid - makes the responsive grid expand or contract to fill the space available within a given container.
      • Gutterless columns - removes the gutters between columns so there is no longer any padding between them.
      • Row padding - adds various amounts of padding to the top and bottom of a given row.

      Images

      This category contains options that can be applied to an image to align it to the left, right or center of a given container.

      Reveal

      These micro-themes can be used to apply transition effects and to adjust the overlay style.

      Slider

      Includes different style options that can be applied to a slider within a freestyle form.

      Styling

      This category includes predefined styles that can be applied to virtually any piece of content. These options included a circle/oval option (which frames your content inside of a circle/oval), a light drop shadow, a flat drop shadow, rounded corners and a dark gray border.

      Text

      This category contains micro-themes that can be used to style text like a caption or fine print. Caption text would normally be used below a photo as a short description and fine print would normally be used for a disclaimer.

      Textbox

      Includes different style options that can be applied to a textbox within a freestyle form.

      Utilities

      This category includes micro-themes that are used make functional adjustments to content. The micro-themes in this category can be applied to most content published into your page and include:
       

      • Animation Wrapper - can be added to a container housing a Reveal component to correct an issue with CSS transforms in the Safari browser that negatively impacts the Reveal component’s ability to use the “flip card” micro-theme.
      • Direction: Right to Left - changes the direction of text to go from right to left.
      • Dynamic Visibility - when applied to an element, will not show that element on the live page but will be shown when editing; usually paired with custom code to toggle content on and off.
      • Hide in IE8 and Lower - hides content in Internet Explorer 8 and earlier versions.
      • Hide when Printing - can be applied to any element to hide that element when the respondent attempts to print the page.
      • Insert Page Break when Printing - can be applied to any content to set a breaking point above that element when printing so that everything below that break point renders on a new page.
      • Show only in IE8 and Lower - shows content in Internet Explorer 8 and earlier versions.
      • Show Only when Printing - can be applied to any element to only show that element when the respondent attempts to print the page.
      • Scroll Awareness (once) - can be applied to an element to trigger a custom animation the first time someone scrolls to that element.
      • Scroll Awareness (always) - can be applied to an element to trigger a custom animation every time someone scrolls to that element.
      • Top Most Layer - moves content to the top of the layer it is published into; used to move content to the front of other elements published in a  given container.

      If you have any questions, please contact us on help@rockcontent.com. 😀