Template Styling Information

This document is aimed at helping point out the classes, IDs and html markup used in various Reactor templates so that you can further customize the CSS through you Reactor App Design panel.

Default template

  • Overall wrapper:
    • div 
      • class of "padding"
  • Post title:
    • div wrapping an h4
      • class of "post-title" on div
  • Post Category:
    • div wrapping a span
      • class of "post-category" on div
  • Featured image:
    • img tag
      • class of "full-image"
  • Post content:
    • div
      • class of "post-content"


************

Card template

  • Overall wrapper:
    • div
      • class of "card-view"
  • Inner wrapper:
    • div
      • classes of "list" and "card"
  • Top wrapper:
    • div
      • class of "item"
  • Top Wrapper title:
    • h2 tag
  • Top Wrapper date:
    • p tag
  • Bottom wrapper:
    • div
      • classes of "item" and "item-body"
  • Bottom wrapper image:
    • img tag
      • class of "full-image"
  • Bottom wrapper content:
    • p tag


*************

Comments template:

  • Overall wrapper:
    • div
      •  id of "comments"
  • Individual Comment item:
    • classes of "item" and "item-avatar"
  • Comment item image:
    • img tag
  • Comment item Name:
    • h3 tag
  • Comment item content:
    • p tag

************* 

Media template:

  • Overall wrapper:
    • div
      •  class of "list"
  • Post item:
    • div
      • classes of "list-item item-thumbnail-left item item-complex"
  • Post link:
    • a
      • class of "item-content"
  • Post image:
    • img
      • class of "post-featured"
  • Post title
    • h2
      • class of "post-title ng-binding"
  • Post Category
    • div
      • class of "post-category"
  • Post excerpt
    • p
      • class of "post-excerpt ng-binding"

************* 

Pin List template:

  • Overall wrapper:
    • div
      • class of "scroll"
  • Posts wrapper:
    • div
      • id of "wrapper"
  • Post list:
    • div
      • class of "pin-list" and id of "columns"
  • Single post:
    • div
      • class of "pin"
  • Single post header:
    • div - container
      • class of "pin-header"
    • img - featured image
      • class of "pin-image"
    • h2 - title
      • classes of "pin-title ng-binding"
  • Sing post body:
    • div - container
      • class of "pin-body"
    • p - date
      • classes of "pin-date ng-binding"
    • p - excerpt
      • classes of "pin-excerpt ng-binding"
  • Single post footer:
    • div - container
      • class of "pin-footer"
    • img - author image
      • class of "pin-author-img"
    • div - author name
      • class of "pin-author ng-binding"
    • div - category
      • class of "pin-category"