Documentation

For a complete demo of all the features of this theme, watch the 12 minute Jacket demo video.  

What's Included

Block Templates

Autonav

  • header_nav 
  • side_nav

Guestbook

  • jacket_comments

Image 

  • frame
  • centered image 

Page List 

  • blog_entry_list
  • expand_collapse
  • latest_posts
  • related_posts

Content

  • centered_content

Package Blocks

  • concrete5 Sign In
  • concrete5 Social Icons (utilizes Social Icon Manager single page interface). 
  • concrete5 Social Share 

Package Single Pages

  • Social Icon Manager (/dashboard/system/social_icon_manager/manage_icons) 

Page Types

  • Full
  • Default (Detail page)
  • Blog Entry 
  • Home

Content Block - Content Styles 

  • blue-emphasis
  • logo-text
  • logo-text-dark
  • red-link-emphasis
  • j-blockquote
  • j-gray-blockquote
  • credit

How Everything Works

Autonav Templates 

Header Nav - The Header Nav template is for use in the “Sitewide Site Navigation” global area at the top of the theme. It should be set to show all sub pages and set to display 2 sub page levels. This template will also display page descriptions beneath the page name for top level pages in the navigation. As the viewport width decreases, the page descriptions will be hidden, followed by the nav being swapped out for the mobile slide down menu. 

Side Nav - The Side Nav template is used exclusively in the “Detail Sidebar” area, and those page types with that area. It supports up to 4 sub page levels and should be set to display relevant sub pages. 

 

Guestbook Templates

Jacket Comments - The Jacket Comments Guestbook template is for use in the “Bottom Content” area of page types with that area. 

Image Templates

Frame - The Frame Image template creates a white frame with a gray border around any image. It also displays any text entered for the caption / alt text in a caption beneath the image. 

Centered Image - Template centers image in the block it is applied to. 

 

Page List Templates

Blog Entry List - The Blog Entry List is used to create a paginated index of your site’s blog posts. This will most likely live on the front page of your blog, allowing your users to traverse your blog entries. The template will look for the blog entry author’s first name and last name as user attributes with handles of first_name and last_name. If it does not find those, it will use the username by default. 

Expand Collapse - This Page List template will take the page title and create an expand/collapse block. Once the user clicks the plus sign next to the page title, the page description and a “Read More” link will become visible, and be able to be toggled open and closed using the “+ -” button. 

Latest Posts - Looking for a file / image page attribute with a handle of “thumbnail,” this Page List template will display the title, description, and associated thumbnail of each of the pages displayed. If no thumbnail is provided, a default thumbnail graphic is shown. 

Related Posts - This Page List is used primarily in the “Detail Sidebar” area of the site. It is a long, narrow profiled list that displays page titles and their descriptions, if provided. 

 

Content Block Templates 

Centered Content - centers all content in the block. 

Package Blocks

concrete5 Sign In - This block allows users to sign in or out. If public registration is enabled, it also provides guest users with a “register” link. 

concrete5 Social Share - This block can be added anywhere on a page to create a floating “share” button that triggers a share overlay, allowing the user to share to any combination of Facebook, Google+, Twitter, and Tumblr, while also providing them with a  permalink to the page. This block can easily be added to page type defaults anywhere on the page to provide all pages of that type with this functionality. 

concrete5 Social Icons - This block allows users to place clickable icons for any of their defined social media. This block has a template to allow users to align the icons to the left, where right alignment is the default. Social Icons are enabled and defined by visiting the Social Icon Manager single page under “System” in the dashboard. 

 

Single Pages 

Social Icon Manager - The Social Icon Manager single page allows users to define URL’s for their individual social media pages. Adding a URL for a given social media service will make that icon available to be displayed using the concrete5 Social Icons block. 

 

Page Types 

Full - This page type is the widest profile, with no sidebar area available. 

Default (Detail Page) - The default page type has the sidebar area and a bottom area for comments. 

Blog Entry - Pages of the “Blog Entry” type automatically receive a header and a byline and the date directly underneath. This page type is good for using in conjunction with Composer to create blog entries underneath your blog’s main page, on which you can place a page list with the Blog Entry List template applied and have it filter pages by the “Blog Entry” page type. 

Home - Home Page Type, typically used for the home page of the site. Contains a home marquee area for a ribbon image. The main area is a good place to put some h1 text for your home page’s tagline. The two framed content areas below will only display if one or both of them have content within them. All other areas should be fairly straightforward. 

 

Content Styles 

- blue-emphasis:

 Bold, uppercase, blue text (#00a0b0).

- logo-text: 

 Text Style for Logo, white text with a hard 1px drop shadow and increased letter spacings in the ‘Share’ font style. Generally for use in the theme header “Sitewide Site Logo” area. 

- logo-text-dark 

Similar to logo text except no shadow and off-black text color. Usually used in the “Sitewide Bottom Logo” area. 

- red-link-emphasis

Italicized red text (#cc333f) in the Istok Web font.

- j-blockquote

Creates large, gray (#999999) centered italic text at 60% width of its parent container. 

- j-gray-blockquote

Creates a gray padded background around medium-sized off-black (#333333) text and centers text within it. 

- credit

Makes target text blue in the Istok Web font family. Generally used within j-gray-blockquote following the quote. *Note - use shift+enter or shift+return to create line breaks within the current blockquote.