Theme（テーマ） - opensource-workshop/connect-cms GitHub Wiki

• Theme directory（テーマ・ディレクトリ）
  public\themes\{theme name}

• CSS File rule（CSS ファイル名のルール）
  {theme name}\themes.css

• Images and other file directory（テーマの画像等のディレクトリ）
  {theme name}\images
  {theme name}\etc...

• Basic setting（基本設定）
  Site manager > Theme（サイト管理 ＞ テーマ）
  Null is System default Theme.（空の場合、システムのデフォルトです）
  Register is Site default Theme.（登録すると、サイトの基本設定として使用されます）

• Page setting（ページ設定）
  Page manager > Theme（ページ管理 ＞ テーマ）
  Settings are reflected in the lower hierarchy of this page.
  （設定は、このページの下の階層に反映されます。）

• Theme input please directory name text.Goal is selectable.
  （現在は、テーマにディレクトリ名を入力してください。目標は選択可能方式です。）

簡単なテーマの作成方法を記載します。
ここではDefaultAccessibilityを例に説明します。

※ Connect-CMS は Bootstrap 4.3.1 ※2022/05/09現在 です。
下記の方法で使っていた外部サービス Bootstrap.Build は、Bootstrap5にアップデートされたため、使えなくなりました。
代わりに Sass を使ってテーマを作成できますので、Sassページを参照してください。

1. PC上にテーマのディレクトリ "DefaultAccessibility" を作る
   1. そこに connect-cms//public/themes/Defaults/Default から下記ファイルをコピーする。
      1. themes.ini
         1. themes.iniのtheme_nameを修正する。修正例）DefaultAccessibility/themes.ini
      2. wysiwygディレクトリ
2. Bootstrap.Build を開く
   1. "Open the Builder" ボタン押下
   2. 右側の各種パラメータを修正
   3. 画面上部の "Export theme" ボタン押下
   4. PC上にテーマのディレクトリ "DefaultAccessibility" を作って置き、そこにダウンロードする
      1. ダウンロードするファイル: _variables.scss (変更内容の確認のため)
      2. bootstrap.css ⇒ themes.css にリネームする。

これで完成です。

https://github.com/opensource-workshop/connect-cms/tree/master/public/themes/Defaults/DefaultAccessibility

https://github.com/opensource-workshop/connect-cms/tree/master/public/themes/Defaults/Default