テーマ「Stucco」のカスタマイズについて

2016年4月12日 at 17:29

お世話になります。
今回、テーマ「Stucco」を用い、サイトを制作しようと思います。
インストールが完了し、色柄を編集しようと思いましたが、どのCSSを編集すればいいのかわかりませんでした。
例えば、グローバルメニューやフッターの背景色やロゴのサイズ変更、ヘッダーメニューのアイコン変更など具体的にどのCSSファイルを編集すればいいのでしょうか。
ご教示ください。
よろしくお願いいたします。

タグ:

Re: テーマ「Stucco」のカスタマイズについて

2016年4月30日 at 4:40
モモ様

 以下で編集ができます。
 お試しください。

カスタマイズには、カスタマイズしたいテーマファイル一式を
(5.7のインストールされているドキュメントルート)
\packages\themes_stucco\themes\stucco ディレクトリを丸々コピーします。
一旦ローカルへダウンロードして、カスタマイズできる状態にします。
ご承知のとおり、5.7系は、名前空間をキチンと設定しないと、読み込み等を行ってくれませんので、
ダウンロードした、stuccoフォルダ内のpage_theme.php
を開き、以下の要に編集します。(コメント等余計な記述はしないでください)
namespace Concrete\Package\ThemeStucco\Theme\Stucco; (windowsなら\は¥ね)

namespace Application\Theme\Stucco;(windowsなら\は¥ね)

変更ができたら、カスタマイズ用ディレクトリへアップロードします。
\application\themes\stucco

これで、ひとまず、カスタマイズする準備ができました。

0)知っておく事として、CSSを編集するのは、拡張子がcssでなく、lessファイルです。
concrete5(5.7系)は、(標準では)bootstrapが、コンパイル(cssファイルを作成)してくれます。
なので、カスタマイズは、lessファイルを編集、アップロード、ページ更新する作業です。

※ただし、concrete5 5.7系のキャッシュシステムをキャッシュしないように変更しておく必要がございます。(表示速度が多少かかります

concrete5『管理画面』の「システムと設定」→キャッシュとスピード設定で、すべて無効にしてください。
でないと、カスタマイズ結果が反映されません。 次に、「キャッシュをクリア」で、ボタンを押して、キャッシュをクリアします。
できれば、2回押しておくのがポイントです。(詳しくは割愛しますが、一度で消えないことがあるからです)

(エラーがあったときわかるように)「サーバー設定一覧」→「エラーを表示」チェック、「エラー詳細」も出力にしておきます。
※警告の通り、公開される時は元に戻してください。

1)カスタマイズ前知識
\application\themes\stucco\以下css内に、
build   (ここが、カスタマイズするファイル群です)
presets (テーマのベースカラーのファイル)
main.less
があります。

2)背景、リンクの変更(赤とか、青)は、presets 内のファイルの読み込みをmain.lessで指定します。
main.less の @import ”presets/defaults.less” を好きなベースカラーに変更してください。
赤系なら、 akane.less 
そして、presets\akane.less ファイルで、大元の文字サイズや色が設定してあります。
lessでは、変数や、//(行コメント)とかが使えます(詳しくは調べてください)。

3)通常のcssの書き方で追加修正すればいいです。
試しに、css\build\header.less とかで、適当なクラスか、IDに、
background-color: #f00;
とかを追加してみて、色が変わるのをみてください。
それができれは、適宜カスタマイズします。

※ファイル名でおおよそ、察しがつくと思います。
 なお、コンパイルされた、cssは、キャッシュフォルダに作成されますが、ブラウザの開発ツール等では、
 ファイルが、main.cssのコンパイル後の行とかを指すので、クラスやID設定等から、該当ファイルを
 推測してください。タイトルロゴは、header.lessファイル内でしょうかね。

4)背景にファイルセットからの画像を使う場合は、
http://concrete5-japan.org/community/forums/beginner/post-3202/
を参照ください。

以上、ご不明なところあれば、ご連絡ください。
 

Re: テーマ「Stucco」のカスタマイズについて

2016年4月30日 at 16:24
 僕も「テーマのカスタマイズ」が UIで簡単にできることに気が付かず始めてからおよそ2か月はプリセット内のlessファイルを直接編集していました。

 手順としては左上の歯車ボタンから「デザイン」「テーマ」下のカスタマイズから簡単に色が変更できます。ここで決めた色を元に preset内の気に入った lessファイルを複写し

一行目と二行目を自分で決めたプリセットの名前とアイコンの色を定義します
@preset-name: "Sunrise";
@preset-icon: concrete-icon(#75ca2a, #fff, #0099ff);

その後カスタマイズで控えておいた色を変更していきます。
@header-background-color: #fff; → #ff0に変更するなど

 その後カスタマイズの下部にある「カスタマイズのリセット」を実行し lessファイルで変更した内容で画面の色が変わることが確認できます。

 できればインストールの方法に続けてこういった UIだけでできるところも一番最初に案内があると、これから使ってみようとする人たち初心者のハードルが下がると思います。

 僕が最初に使いだした理由は「ドラッグドロップでページデザインが変更できる」所だったのでブロックのカスタマイズやらオーバーライドができないとちょっとしたことで急にハードルが上がってしまってそこから進まないということになっています。

 トップページだけほかのページとデザインを変えたいと思っていたことも、ここでテーマを切り替えれば1ページごとにテーマが変更できるので重宝しています。
添付: 2016-04-30.jpg