Skip to content

Installation & customization

Yuji Takayama edited this page Aug 14, 2013 · 1 revision

Table of Contents

Installation Procedure

  1. Create a system user custom field.
  2. Apply a theme.
  3. Set the App ID in the Facebook App ID widget contents.
  4. In each of the following template footers, set the necessary URL and title in the social button module.
    • Main Index
    • Entry
    • Page
    • Entry Listing
    • Search Results
  5. Rebuild.

Templates

Index Template

  • RSD
  • Sitemap
  • Stylesheet
  • Stylesheet for IE - includes a fall back style for IE8 and older
  • Main Index
  • Feed - Recent Entries

Archive Template

  • Page - includes the About Page
  • Entry
  • Entry Listing - for user, categories, monthly archive

Template Module

  • Google Analytics - includes the script code for Google Analytics
  • HTML Head
  • Zenback - includes the Zenback script code
  • Social Button - these buttons are displayed at the end of every blog entry as well as in the main page footer
  • Navigation - main navigation at the top of the page
  • Banner Footer
  • Banner Header
  • JavaScript Footer - contains a group of scripts that read the page
  • Entry Summary
  • Userpic - a template module that displays an overview of the poster, profile and user images
  • Pagination
  • Author Profile - provides the block view for the user profile

System Template

  • Dynamic Error - preliminary
  • Popup Image
  • Search Results

Widget Sets

  • Footer Content 01 - sets a block display to the right hand side of the footer when the screen is wider, places the content on top when the screen is narrow
  • Footer Content 02 - sets a block display to the left hand side of the footer when the screen is wider, places the content on the bottom when the screen is narrow
  • Related Content - displays contents in the side bar when the screen is wider

Widgets

  • Category Archives
  • Sample Widget 01
  • Sample Widget 02
  • Blog Members
  • Monthly Archives
  • Monthly Archives (Dropdown)
  • Search

Custom Field

User (System)

Name Class Basename Template tag Required
Self introduction Multi-Line Text cf_author_profile_text mt:CFAuthorProfileText Required
Twitter Account Single-Line Text cf_author_twitter_account mt:CFAuthorTwitterAccount
Facebook Account Single-Line Text cf_author_facebook_account mt:CFAuthorFacebookAccount
Google+ Account Single-Line Text cf_author_google_account mt:CFAuthorGoogleAccount

Entry (Blog)

This custom field is created when a new theme is applied.

Name Class Basename Template tag Required
OGP Image Image cf_entry_thumbnail mt:CFEntryThumbnail

User Profile

Specifies the author information shown with entries and in the user archive. Non-required fields are only shown if information is entered for that field.

Item Field Notes
Name Display name Required
Profile Image Userpic Default icon is used if no image is specified
Self-introduction Custom Field Required
Blog Website URL
Twitter Account Custom field Enter user name
Facebook Account Custom field https://www.facebook.com/XXXXXX
Google+ Account Custom field https://plus.google.com/XXXXXXX?rel=author

Functional Specifications

Blog Entry Overview Module

Allows the user to select whether or not a profile image is displayed.

 <$mt:Include module="<__trans phrase="Entry Summary">" hide_userpic="1"$>

og:image Settings

The og:image can be replaced by using the item function. Uploaded images must be at least 320 px and are defined as the og:image with the use of the @SITE_ICON tag. As the most recently updated image is the one used, there is no need to delete tags when replacing one image with another. If no og:image is set, a default image will be used.

ICON (og:image, microdata image) Settings

  1. Upload an image to your blog (recommended size - at least 320 px)
  2. Open the uploaded image editor.
  3. Type @SITE_ICON in the tag field.
  4. Save and rebuild.

Blog Entry Archive

It is possible to set og:images for every entry in the blog entry archive with the use of custom fields. Uploaded images must be at least 320 px. All images will be automatically cropped to 320 x 320 px.

Social Buttons

When importing a module, it is possible to set a target URL and title for each button.

 <$mt:Include module="<__trans phrase="Social Button">" url="http://blog.sixapart.jp/" title="Six Apart Blog"$>

Web page

About Page

Once the about page is published, it can be directly linked from the blog’s navigation menu.

  1. From your blog, create a web page or open the editor for a pre-existing web page.
  2. Type @ABOUT_PAGE into the tag field.
  3. Save and rebuild.

Widget

Widgets can be installed in the following locations:

  • Sidebar
    • Related contents
  • Footer
    • Footer contents 1
    • Footer contents 2

Favicon Settings

  1. Upload a favicon file (.ico or .png) to your blog.
  2. Open the uploaded image editor.
  3. Type @SITE_FAVICON into the tag field.
  4. Save and rebuild.

Copyright Text

  1. Open the banner footer template module editor.
  2. Edit the text as you wish.
  3. Save and rebuild.

Zenback Widget

  1. Open the Zenback template module editor.
  2. Delete the comments on the first and last lines.
  3. Erase the line that says [Copy] and replace it with your Zenback script code.
  4. Save and rebuild.

Developers

Sass File

_basics.scss
Defines the style rule for each element, imports _normalize.scss
_component.scss
A partial file that collects extends that use mixin and phrase holder selectors.
_debug.scss
A file that adds an outline to an element. Can be used to check layout structure. This file is generally not read.
_design.scss
A partial file that contains various design information for themes as well as style rules.
_function.scss
A partial file that summarizes various processes necessary for other files.
_grid.scss
A partial file necessary for outputting layout grids.
_icons.scss
A partial file that defines how social icons and related images are displayed.
_layout.scss
A partial file that defines layout rules.
_normalize.scss
Converts normalize.css into scss. Imports _basic.scss.
_variable.scss
Various variable settings.
ie.scss
Used for IE style output.
styles.scss
Used to read and output styles.css

Compile

Execute from THEME_DIR/build/themes/auyantepui/ (with watch option)

 $ scss --watch scss:../../../themes/auyantepui/static/css