concrete5 version5.7 . It is caution when create the theme.

Block color sentence is English.gray color sentence is japanese.

create the theme  from the static site  is about 10 lines add to template file.

concrete5の静的サイトからのテーマ作成は、テンプレートファイルに10行くらいコードを足せば作れるのですが

but it is caution when read of external css files

外部cssファイルの読込に関しては注意が必要です。

When Read to external css files of template file is change as in the under.

concrete5 5.7系で静的サイトからテーマを作るときに、テンプレートファイルの外部CSSファイルの読込みは下記のように変更します。

static site

静的サイト

concrete5

add to  <?php echo $view->getThemePath()?>/

It is No change to external css files read override and change themes directory name

これで、オーバーライドしたり、テーマのフォルダ名を変更しても、変更なくCSSを読み込むことが出来ます。

However,There is it only affects the css of concrete5’s default dashboard and menu of screen left side . Severe cases can not edit mode.

しかし、それだけでは、conrete5の元々用意されている画面左側のメニューのブロックの追加画面や、ページ設定の画面のCSSとかぶってしまって、管理用の画面の表示が崩れてしまうことがあります。ひどいときには、編集が出来なくなることもあります。

It write under body tag  In order to prevent this

これを防ぐためにconcrete5 5.7系では、body タグ直下に

というコードを書きます。

It explain of this code. The code was change to below class.

まずは、このコードの解説をします。このコードは最終的には下記のクラスが吐き出されます。

before after, “page-template-home” is current page template handle name.

example use template name is if is “blog” well be “page-template-blog”.

前後しますが、classの後ろの部分 page-template-home は 現在使用しているページテンプレートハンドル名です。たとえば、blogというページテンプレートを使っていれば、page-template-blog となります。

So, main theme is “ccm-page”.

では、本題のccm-pageです。

It is meaning CSS of the inner webpage when it create the theme.

Please take unpleasant ifccm-page” is to wear the dashboard of CSS.

実はこれ、テーマを作るときにページ内のCSSですよというのを明確化するためにあります。つまり、管理画面のcssとかぶるのが嫌ならcssにccm-pageクラスをつけてください。という意味になりますw

But CSS is big size. No be doing!!

ただ、「膨大なCSSにすべてにccm-page付けろっていうんかい!!」となりますよねw

If it know SCSS and LESS ,  It is understand to compale after nest.It also describes how you can easily by those who can not provide a compiler.

SassやLESSをご存知の方であれば、ネストしてコンパイルすればいいとわかると思いますが、コンパイル環境を作れる方ばかりではないと思いますので、比較的簡単な方法を説明したいと思います。下記の方法で、管理画面のcssとかぶらないテーマが作成できます。

Figure 1 Before file organization

図1.現在のファイル構成

Figure 2 After File organization

図2.書き換えた後のファイル構成

Working process

作業手順

1.main.css of figure 1 is change name to “stryle.less” and move “build directory”.

①.図1のmain.css を style.less にリネームして、buildディレクトリに移動します。

2. There create file  “css/main.less” and write following code.

②.図2のcss/main.lessは新しく作成し、そのファイルに下記のコードを記述ください。

css/main.less

The content of css file has been nested  “ccm-page” when class The code writed.

この記述をすることで、従来のcssファイルの中身がccm-pageクラスでネストされます。

3.edit theme files.

③.テーマ側のファイルを修正します。

The above part is edit to following code.

上記部分を下記のとおり修正します。

css/main.less is read to automataly.

この記述で、自動的にcss/main.lessを読み込まれます。

main.less even without preparing the compiler of LESS on yourself, compile by concrete5.page view speed slow a little. But will be speed up when use the cache.

main.lessは自分でlessのコンパイラを用意しなくても、concrete5側でコンパイルしてくれます。lessのコンパイルを表示前にやるのでページの表示が遅くなることも考えられますが、キャッシュをうまく利用することで軽減可能です。

Add CSS is edit style.less. LESS is use grammer of CSS.

また、cssを追加したい場合はstyle.lessに追加してください。lessファイルは従来のcssの書き方が出来ますので、lessよく分からないという方も、抵抗なく記述できます。

The CSS  nested by “ccm-page” is created. showed dashboard menu  is  no problem .

以上で、クラス名”ccm-page”でネストされたCSSが作成され、メニューも問題なく表示されます。

コメントを残す