Pre-release

@hissy hissy released this Feb 14, 2015

Assets 2
  1. Create css/fonts/defaults.less as Preset Fonts File.
  2. Define the Preset Fonts File in the preset file.
  3. Load the Preset Fonts File from the main LESS file.
  4. Add other customization.
  5. Now you will have the default preset.
  6. Let's add a new preset.

Related Documents

ステップ9: スタイルプリセットを作成

  1. ウェブフォント指定ファイル css/fonts/defaults.less を作成します。header.php にあるGoogle Fontファイルへのリンクを削除し、作成した LESS ファイルで同じフォントへのリンクを記述します。
  2. デフォルトプリセットファイル css/presets/defaults.less@preset-fonts-file: "fonts/defaults.less"; を追加し、作成したフォントファイルを変数として指定します。
  3. LESS ファイルに @import ~"@{preset-fonts-file}"; を追加し、フォントファイルを読み込むようにしましょう。
  4. その他、画像や余白、タイポグラフィの指定もプリセットに追加しましょう。
  5. ここまでの手順で、css/presets/defaults.lesscss/fonts/defaults.less を2つのファイルからなるデフォルトプリセットが完成です!
  6. デフォルトプリセットのファイルを複製し、新しいプリセットを作成してみましょう。サンプルデータでは、 "Jelly Fish" プリセットを作成しました。プリセットが追加できたら、デザインカスタマイザーから切り替えを試してみましょう!

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 3 commits to master since this release

Assets 2
  1. Let's enable Style Customization. First, convert the CSS file to the LESS file.
  2. Create css/presets/defaults.less file as a default preset.
  3. Create a variable into default preset, and make the CSS Value powered by a the variable.
  4. Load preset file from the LESS file.
  5. Create css/styles.xml file as a config file of style customization.
  6. Wrap all styles with .ccm-page { }.

Related Documents

ステップ8: スタイルカスタマイザーに対応する

  1. テーマカスタマイザーに対応するために、まず CSS ファイルを LESS ファイルに変更します。header.php からCSSを読み込む方法を <?php echo $this->getThemePath()?>/css/business-casual.css から <?php echo $view->getStylesheet('business-casual.less'); ?> に変更します。
  2. カスタマイズできる値の初期値を指定するためのデフォルトプリセットとして、css/presets/defaults.less ファイルを作成し、名前とアイコンを指定します。
  3. css/presets/defaults.less ファイルに、@box-background-color という変数を作成し、元の CSS ファイル中の該当の指定を、変数に置き換えましょう。
  4. ベースの LESS ファイルの先頭に @import "presets/defaults.less"; を追加し、プリセットファイルを読み込むようにします。
  5. テーマカスタマイザーのための設定ファイルとして、css/styles.xml ファイルを作成し、プリセット中の変数 @box-background-color に対応するように style 要素を追加します。
  6. このステップで元のスタイルシートの記述が concrete5 の UI と干渉することに気付きましたので、CSS 全体の記述を .ccm-page { } で囲みました。

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 6 commits to master since this release

Assets 2
  1. Overriding Core Bootstrap JavaScript and CSS assets
  2. Requiring Core jQuery
  3. Add custom CSS classes to Content block

Related Documents

ステップ7: 高度なテーマ設定

  1. PageTheme クラスの registerAssets() メソッドで、テーマに含まれている Bootstrap の CSS と JS を、concrete5 が重複して読み込まないように指示しました。
  2. 同じく PageTheme クラスの registerAssets() メソッドで、テーマの動作に必要な jquery を読み込むよう、concrete5 に指示しました。
  3. getThemeBlockClasses() メソッドで、記事ブロックのデザインオプションから、text-center クラスを選べるように指定しました。
  4. getThemeEditorClasses() メソッドで、記事ブロックのエディターで、brand-name, intro-text のクラスを選べるように指定しました。

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 8 commits to master since this release

Assets 2
  1. Add a page_theme.php and define Bootstrap 3 as Theme Grid Framework. You need to re-install the theme.
  2. Make "Main" area griddable.
  3. We need some CSS fixes due to some irregular markup of the original template.

Related Documents

ステップ6: グリッドサポートを有効にする

  1. グリッドフレームワークに Bootstrap 3 を指定した page_theme.php を作成しましょう。この変更を反映させるには、テーマの再インストールが必要です。
  2. "Main" エリアにグリッドフレームワークをサポートするオプションを追加しましょう。
  3. HTMLテンプレートが Bootstrap 3 の標準のマークアップと異なっていたので、このステップで若干CSSを調整しています。

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 10 commits to master since this release

Assets 2
  1. So let's separate the part of the page that's the same on every page template into a reusable PHP element. Copy the header and footer to the elements/ directory, then include these from default.php.

Related Documents

ステップ5: 共通要素の再利用

  1. ヘッダーとフッターを elements/ ディレクトリに移し、テンプレートから読み込むようにしましょう。この時点では1カラムの defaults.php しかありませんが、今後別のレイアウトのページテンプレートを追加する際に、ヘッダーやフッターといった共通パーツを再利用することができます。

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 11 commits to master since this release

Assets 2
  1. Find content that you want to make editable, then replace it with Area.

Related Documents

ステップ4: 編集可能なエリアを作成

  1. HTMLの中で、編集可能にしたい領域を、エリアのコードに差し替えます。

エリア

<?php
$a = new Area('Main');
$a->display($c);
?>

グローバルエリア

<?php
$a = new GlobalArea('Header Site Title');
$a->display();
?>

編集できないエリアにするコード

<?php
$a = new GlobalArea('Header Site Title');
$a->disableControls();
$a->display();
?>

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 12 commits to master since this release

Assets 2
  1. Add the required PHP codes to default.php.
  2. Prefix all our CSS and JS calls.
  3. Add <div class="<?php echo $c->getPageWrapperClass()?>"> around the content of the page.

Related Documents

ステップ3: HTMLテンプレートをconcrete5化

  1. default.php に、テーマに必要な下記のコードを追加します。
    1. <?php defined('C5_EXECUTE') or die("Access Denied."); ?>
      concrete5のテンプレートとしてではなく、このPHPファイルのURLに直接アクセスされた際に、意図せずプログラムが実行されないようにするための決まり文句です。
    2. <?php echo Localization::activeLanguage()?>
      現在の言語を出力するためのコードです。html タグの lang 属性に挿入します。
    3. <?php Loader::element('header_required');?>
      このコードを挿入した箇所に、concrete5が title タグやSEO用の meta タグを出力し、jqueryなど必要なJavascriptファイルなどを読み込みます。通常、head の開始タグの直後くらいに追加します。元のHTMLからそれらの記述は削除します。
    4. <?php Loader::element('footer_required'); ?>
      このコードを挿入した箇所に、concrete5が必要なJavascriptや編集モードのUI、Google Analyticsのコードなどを読み込みます。通常、body の閉じタグの直前くらいに追加します。
  2. <?php echo $this->getThemePath()?>/ を使って、CSSやJSなどのリンク切れを解消します。
  3. ページのコンテンツ全体を <div class="<?php echo $c->getPageWrapperClass()?>"></div> で囲みます。このタグを追加しないと、編集モードのパネルの開閉が正しく動きません。

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 16 commits to master since this release

Assets 2
  1. Copy the index.html from the HTML template to the theme's directory.
  2. Rename it to default.php
  3. Now you can install this theme. Content shows up but none of the assets are loading.

Related Documents

ステップ2: default.php を作成

  1. HTMLテンプレートの index.html をコピーして、テーマのディレクトリに移します。
  2. ファイル名を default.php に変更します。
  3. この時点で、すでにテーマのインストールが可能です。管理画面から作成したテーマ「Business Casual」をインストールしてみましょう。インストールしてテーマを有効にしたら、サイトに戻って表示を確認してみましょう。スタイルシートの当たっていないHTMLが表示されます。そして、まだ編集もできません。

このステップのドキュメント

Pre-release

@hissy hissy released this Feb 14, 2015 · 17 commits to master since this release

Assets 2
  1. Create a directory for your theme, then copy your theme's assets into the directory.
  2. Create a new description.txt file with the title and description of the theme.
  3. Turn off all caching in the Dashboard before next step.

Related Documents

ステップ1: テーマディレクトリにアセットをコピー&description.txtを作成

  1. テーマ用のディレクトリを作成し、HTMLテンプレート内のCSS、JS、画像ファイルを移します。
  2. description.txt を作成し、テーマの名前と説明を記入します。
  3. 今後のテーマ作成作業の前に、管理画面からキャッシュをクリアしておきましょう。

このステップのドキュメント