Revision as of 15:40, 15 August 2018

Other languages:

はじめに

このページでは、以下の方法について学習します。

LimeSurvey 3.0の新しいテーマシステムの使用
継承による独自テーマの管理
テーマへの画像追加
アンケートとアンケートグループのテーマオプション管理

LimeSurvey 3では、Twig 1.29、Bootstrapに基づいた完全な新しいテンプレートエンジンシステムを導入し、テンプレートの継承とテンプレートオプションが利用可能になりました。これにより、古い置換キーワードシステムが完全にいらなくなり、フロントエンドHTMLの100％をカスタマイズすることができます。たとえば、古いテンプレートシステムでは、実行時に評価用HTMLに置き換えられるキーワード{ASSESSMENTS}がありました。テンプレートデザイナーは、JavaScriptを使用する以外にこのHTMLをカスタマイズする方法がありませんでした。今では、このHTMLを生成するためのロジック（Twigで書かれています）を含むassessmentments.twigというファイルがあります。こらのページでは、この新しいテンプレートエンジンの使用方法について説明します。

ここでは、Twigの仕組みは詳しく説明しません。これは非常に単純化されたPHPのようなもので、“サンドボックス”と呼ばれるシステムにより高度なセキュリティが提供されます（Theme Engine Coreコードの部分で詳しく説明します）。すでにPHPを知っていれば、習得するのは非常に簡単です。PHPを知らないとしても、習得するのはかなり簡単なはずです。Twig 1.Xのドキュメントをご覧ください。https://twig.symfony.com/

管理インタフェースを使用した編集

テンプレートリスト

管理ダッシュボードに、テンプレートリストにアクセスするためのボックスが追加されました。

リストは5つの列に分かれています。

テンプレートのプレビュー: テンプレートのルートにある“preview.png”という画像ファイルです。
マニフェストで指定されているテンプレートの“タイトル”（テンプレートのルートにあるconfig.xml）
テンプレートの説明: マニフェストに設定された文字列
テンプレートのタイプ: コアテンプレート（LimeSurvey提供）、ユーザーテンプレート（アップロードディレクトリに追加）、XMLテンプレート（データベースに読み込まれない）
拡張: テンプレートが別のテンプレートを拡張する場合は、その名前がここに表示されます。
アクションボタン:
- インストール: テンプレートのマニフェストを読み込んでデータベースに追加し、アンケートレベルで選択できるようにします。
- アンインストール：データベース内のテンプレートの設定エントリーを削除します。
- テンプレートエディター: テンプレートエディターにリダイレクトされます。
- テンプレートオプション：テンプレートオプションのグローバル設定を行います。

テンプレートエディター

このドキュメントは、以前のバージョンのLSでテンプレートエディタを使用する方法をすでに知っていることを前提としています。

テンプレートエディターは元のものにできるだけ近づけて維持されています。コアテンプレートを開いても編集できません。“コピー”ボタンではなく、“拡張ボタン”があります。

テンプレート継承の考え方について

LS3では、テンプレートは別のテンプレートから継承できるようになり、別のテンプレートを“拡張”することができます。これは、テンプレートディレクトリーは最初は空で、元のものと異なるファイル（ビュー、スタイルシート、スクリプト、リソースなど）のみが保存されます。そうすることで、多くのテンプレートを維持することなく、多くのユーザー向けのテンプレートを簡単に作成できます。たとえば、独自の自家製テンプレートを持つとともに、ある会社向けのバージョン（ロゴ、そのスタイル、フッターなどに配置するWebサイトへのリンクなど）、さらに別の会社向けのバージョンを持つことができます。カスタムテンプレートのCSSまたはグローバルレイアウトを更新すると、それを継承するすべてのテンプレートが自動的に更新されます。テンプレートは他のテンプレートを拡張するテンプレートを拡張することができる、といった具合に、継承は再帰的になります。

LimeSurveyの主要なテンプレートを拡張すると、そのアップデートからのメリットを受けられるということでもあります。

ユーザーインターフェイスの新規性

LimeSurveyのMonochromeテンプレートを拡張するには、Templateリストに移動して、Monochromeテンプレートの“テンプレートエディター”ボタンをクリックします。次に、“拡張”をクリックして、新しい名前が“extends_monochrome”となっていることを確認します。

ファイル/ftpクライアントを使用してアップロードディレクトリに移動すると、新しいディレクトリupload/templates/extends_monochromeが作成されていることがわかります。これにはXMLファイルとディレクトリが含まれていますが、ほとんどのディレクトリは空です。ビューもCSSもJSもありません。しかし、このテンプレートはアンケートから正常なテンプレートとして選択することができ、monochromeテンプレートとまったく同じように見えます。

*作成直後のテンプレートツリー（ディレクトリーとファイル）です。最初は空です。*

元のテンプレートのリソース（jpg、pngなど）は、テンプレートを拡張するときにコピーされます。これは、CSSファイルを元のテンプレートからローカルにコピーし、そのファイルを背景画像ステートメントなどで参照する場合、現在のテンプレートパスからそれらの画像にたどり着く必要があるからです。

extend_monochromeテンプレートのテンプレートエディタは次のようになります。

古いテンプレートエディターと大きな違いはありません。主なものを挙げます。

ファイルリストにある継承というキーワード。これは、ファイルがテンプレートディレクトリーに存在せず、元のテンプレートのファイルが使用されることを意味します。

メインエディター（ACE editor ）には、選択したファイルの内容が表示されます。ファイルには、HTML、CSS、またはJSだけでなく、Twigステートメントも含まれています。これらのTwigステートメントは、以前はコアの深いところに位置していたテンプレートビューにいくつかのロジックをプッシュできるようになり、カスタマイズすることができます。

このため、トップメニューのドロップダウンセレクタで、より多くの画面タイプを利用できるようになりました。以前には利用もカスタマイズもできなかった‘アンケートリスト’、‘読み込み’、‘保存’、‘エラー’、‘登録’、‘評価’、‘回答の印刷’などのページがあります。

ファイルリストの一番下にある‘tip’リンクは、HTMLに画像をTwigで追加する方法を表示します。

‘変更を保存’ボタンはローカルのテンプレートにコピーし、変更を保存するボタンになっています。

簡単な例: 画像の追加

ローカテンプレートにコピーして変更を保存するボタンは、ファイル内の何かを編集してそのボタンをクリックすると、ファイルを編集中のテンプレートにコピーして変更を保存します。
たとえば、layout_global.twigというファイルをクリックし、ブロックコンテンツ（{% block content %}）の直前にテキスト “TEST”を追加し、ボタンをクリックします。ファイルのラベルが “継承”から “ローカル”に変更され、ボタンが単純な変更を保存するボタンになっていることがわかります。

ファイルエクスプローラーを開いてupload/templates/extend_monochrome/views/ディレクトリーに移動すると、layout_global.twigというファイルが1つだけあり、その中に文字列“TEST”がそこにあることがわかります。

今、ランダムなテキストを追加する代わりに画像を追加します。TIPリンクをクリックすると、次のように表示されます。
.twigファイルで画像を使用するには、次のようにします。 {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Twigのドキュメントを読むと（この時点ですでに読んでいるべきですが）、{{ function( ) }}によって関数の結果がスクリーンに表示されます。ここでは、その関数とはimaga()です。

詳しく知りたい場合は、ここからコード（RC3バージョン）を見ることができます。 RC3におけるimage()関数

コードを理解できない場合でも心配する必要はありません。どのように動作するのか知っている必要はありませんが、使う理由と使い方を理解していればいいのです。

次の2つの理由から、image()関数を使用する必要があります。

image関数はテンプレートを検索して画像を見つけます。作業中のテンプレートが別のテンプレートに拡張されていて、画像をローカルに挿入した場所にファイルをコピーしたものの、その画像がローカルテーマにコピーされていない場合であっても、テンプレート継承ツリーを検索して、その画像がどこにあるかを見つけます。
アセットマネージャーを使用するので、テンプレートのパフォーマンスを向上させます。詳細については、Yii Asset Managerのマニュアルを参照してください。http://www.yiiframework.com/wiki/148/understanding-assets/

テーマに画像を追加するには、

右側のファイルアップローダーを使っていつものようにアップロードし、twigファイルの必要な場所に追加してください。

{{ image('./files/myfile.png') }}

画像の代替テキスト（スクリーンリーダーやHTML検証向け）を追加する場合は、次のようにします。

クラス属性を追加し、そのクラスにidを追加する場合は、次のようにします。

{{ image('./files/myfile.png'), ‘これが代替テキスト’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

開発検討中の事項

エディター自体からカスタムプレビューファイルをアップロードできるようにする
ローカルファイルを削除し継承されたステートメントに戻るボタンを追加する
CSSファイルで使用されている画像のみをコピーする（コピーすべきファイルとしてマニフェストに記載します）
現在のテンプレートを拡張したものがどのテンプレートかをわかるようにする（もしあれば）

テンプレートオプション

LS3のもう一つの目新しい点は、テンプレートのオプションページです。後で説明するように、テンプレート作成者は独自のオプションや独自の管理オプションページを作成することもできます。ここでは、コアテンプレートのオプションページの仕組みを簡単に見ていきます。グローバルレベルでテンプレートオプションにアクセスするには、テンプレートリストの“テーマオプション”をクリックします。

詳細オプション

Other languages:

テーマオプションタブを開くと、 簡単なオプションか高度なオプションのどちらかを使って編集するか選ぶことができます。“高度なオプション”は、データベースからメインのテーマ設定欄に直接アクセスできるフォームです。動作原理を理解するため、XMLファイルやスクラッチでテーマを作成することも理解しなければなりません。したがって、非常に複雑で上級者向けです。

それでも高度な設定の編集をしたければ、高度なオプションタブをクリックします。

Files css: テンプレートに含めるCSSファイル
Files js: テンプレートに含めるJSファイル
Files Print Css: テンプレートを印刷するときに読み込むCSSファイル
Options: テンプレートビューに必要なオプション（とその設定値）
CssFramework Name: 読み込むCSSフレームワークの名前。現時点では、Bootstrapか何も指定しないかとどちらかです。
Cssframework Css: コアのbootstrap.cssを、カスタマイズしたものに置き換えます。
Cssframework Js: コアのbootstrap.jsを、カスタマイズしたものに置き換えます。
Packages To Load: この設定により、LimeSurveyからコアのアセットパッケージを読み込ませることができます。

画面上部から、テーマのディレクトリーにファイルをアップロードすることができます。これらのパラメーターは、テーマの全体的な外観を変えるために使用します。

注意! : 意味がわからない値には手を出さないでください!

簡単オプション

簡単オプションページは、テンプレート自体から生成されます。これは、template/optionsディレクトリーにあるtwigファイルとjavascriptで作成されています。https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options

このページはテーマごとに完全に異なるため、テンプレート提供者は独自のルック＆フィールを作成することを強く推奨します。

簡単オプションページは、詳細オプションの設定フォーム入力を単に入力するだけです。簡単ページの設定をオンまたはオフにして、それに応じて詳細フォームの関連部分がどのように変更されるかを確認できます。たとえば、既定のテンプレートの簡単オプションでは、Bootswatchのテーマを“Darkly”に変更してから詳細オプションのタブをクリックすると（保存せずとも）、“Cssframework Css”の値が、

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
から、次のモノに変わります。
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
コアテーマのさまざまな簡単オプションを次に示します。

Ajaxモード: 次のページをajax（高速）またはページリロード（デバッグ目的に適しています）経由でロードするかどうかを指定します。
背景画像: 「Yes」に設定すると、pattern.pngという画像がロードされます（マスターのファイルセレクタに置き換えられます）
ボックスコンテナ: 「No」に設定すると、質問がボックスに含まれなくなります（スクリーンの幅よりも大きい大きな配列を使用することができます）
Brandlogo: 「no」に設定すると、アンケートの名前がトップバーに表示されます。「Yes」の場合は、ファイルディレクトリ内の画像の1つをロゴ画像として使用することができます。
本体のアニメーション: 「yes」に設定すると、アンケートの本文がロードされたときに適用するアニメーションの1つを選択できます
質問のアニメーション: 質問について同様
警告のアニメーション: 警告について同様
Bootstrapテーマ: ここでは、ロードするブートストラップテーマを選択できます。Bootswatchは、次のサイトから来ています。https://bootswatch.com/3/

アニメーションに使用されるライブラリはanimate.cssです。https://daneden.github.io/animate.css/ もちろん、テンプレート提供者は独自のアニメーションライブラリを追加することもできますし、アニメーションライブラリをまったく追加しないこともできます。

monochromeのテンプレートは、管理ユーザーインターフェイスと同じブートストラップカラーテーマを使用します。これらはCSSフレームワークの置換システムを使用せず、CSSファイルを追加するだけです。つまり、テンプレート提供者がカスタムテーマを扱う別の方法を示しています。

継承システム

これまで、テンプレートを別のテンプレートに拡張できることがわかりました。テンプレート設定についても、別のテンプレート設定から継承することができます。つまり、個々のテンプレートについて以下のレベルで設定することができます。

グローバルレベル（テンプレートリストからアクセスできるもの）
アンケートグループレベル
アンケートレベル

各レベルのそれぞれのパラメータは、上位レベルから継承することができます。まず、アンケートグループレベルを見てみましょう。

アンケートグループレベル

LS3の重要な新規性の1つとして、アンケートグループシステムが挙げられます。さまざまなグループを作成してアンケートを整理できるようになりました。アクセスするには、アンケートリストに行き、アンケートグループタブをクリックします。

このリストには、2つの操作ボタンがあります。グループが空の場合は、削除できます。空でない場合は、編集することができます。編集ボタンをクリックすると、アンケートグループ設定ページが表示されます。

このページの3番目のタブは、“このアンケートグループのテンプレートオプション”と呼ばれています。ここをクリックすると、テンプレートリストと同じテンプレートのリストが表示されますが、ここではオプションボタンのみが表示されます（テンプレートエディターにはメインリストからのみアクセスできます）。
既定のテンプレートのオプションをクリックすると、次のように表示されます。

Inherit everything（すべて継承）ということは、すべての設定がグローバル設定レベルから継承されることを意味します。
高度なオプションページに行くと、すべてのフィールドが継承されて設定されていることがわかります。
簡単オプションの"Inherit everything"で"いいえ"を選択すると、グローバルオプションページと非常によく似たページが再び表示されます。唯一の違いは、フィールドごとにはい、いいえ、または継承（inherit）に設定できることです。各セレクタに継承があります。

アンケートグループは、別のグループの子になることができます。この場合、親から継承します。

アンケートレベル

アンケートを編集するときは、左のバーメニューに“テンプレートオプション”という新しいエントリーが表示されます。現在のアンケート用に選択されたテンプレートのオプションページに移動します。アンケートグループと同じ継承システムがありますが、この場合の継承は、アンケートが属するアンケートグループから設定値が継承されることを意味します。

ユースケースの例

たとえば、異なる企業（AとB）に1つのテンプレートを使用しているとします。お気に入りのオプションは、グローバルレベルで設定します（例：ajaxはon、本体のアニメーションはスライドイン、警告はパルス）。次に、各会社のアンケートグループを作成します。会社Aのアンケートグループは、この会社のすべてのアンケートをホストし、会社Bのアンケートグループは、会社Bのすべてのアンケートをホストします。このレベルでは、ロゴと背景のみを設定し、他のオプションは継承させます。これにより、グループAのすべてのアンケートでは、会社Aのロゴを使用し、グループBのすべてのアンケートは、会社Bのロゴを使用します。会社Aのあるアンケートで、トピックと関連して異なる背景を使用できます。アンケートレベルでオプションの背景を変更するだけです。B社の誰かが、パルスで表示される警告があまりにも目立ち、フェードインのようなスムーズなものを好む場合は、アンケートグループBレベルで警告のアニメーションを変更するだけで、このグループのすべてのアンケートでこのアニメーションが使用されるようになります。会社Aがロゴを変更した場合は、アンケートグループAのレベルで変更することができ、このグループのすべてのアンケートで新しいロゴが使用されます。

この例は、コアテーマの現在のオプションに基づいています。ただし、あなたがテンプレート提供者で、またtwigで少しスクリプトを作成できる場合は、独自のオプションを追加することももちろん可能です。たとえば、会社のウェブサイトや電話番号のようなデータを追加するためのオプション "info footer"を追加することができます。次に、A社に個別の電話番号を持つ部門がある場合、アンケートグループAに各部門ごとに1つのサブグループを作成できます。各サブグループは、このオプションで独自の電話番号を持つことができます。

テーマのカスタマイズに関するFAQ

You'll find here some answers to questions that have been asked in the forum and that could help you to customize your theme.

Customizing CSS/JS: deal with the asset manager ("why are my changes not applied?")

If you're trying to update the CSS/JS of a theme by directly editing the code with your favorite editor, you could be surprised that your changes are not applied.

Since 2.50, LS use the Yii asset manager: Yii Documentation about Assets

It moves the CSS/JS files of a theme to a tmp/ sub-directory with a random string (eg: "tmp/1ef64ml/"). So if you make any change to a css/js file, and tell it to the asset manager, the files are copied to a new sub-directory with a new name so the user browser's cache is updated and they see the new css/js. Else, they would have to clean their browser cache.

Here the CSS links in header when asset manager is on:

As you can see they all refer to the tmp/ subfolders.

Here the CSS links in header when asset manager is off:

As you can see they point to the real files of the theme.

Of course, if the Asset Manager doesn't know you changed the file, the old file from the old tmp/directory remain unchanged, and your changes will never be applied..

So, when you're editing CSS/JS of a theme you have various possibilities:

You can use the the LS Theme Editor: it deals with the asset manager and you don't have to worry about anything
You can turn debug mode on: it will turn asset manager off, so the real css/js files of your themes are called (but then, you have to refresh your browser cache at each load)
You can refresh the assets cache: from Global Settings -> General -> Clear asset cache

Using the theme editor to edit the custom CSS is by far the best solution.

Using the theme editor will help you to understand the architecture of the new theme engine. Also, if your customizing fruity, be careful with CSS specifity: most of the definitions use the selector ".fruity" (one of the class of the body element)

Adding custom fonts to my theme

The easy way: using Google Font CDN

Bootswatch Survey Theme uses Google Font CDN. Let's have a look to how it works: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Then the Lato font is used via CSS rules: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

You can use any google font that way in your custom theme. Of course, you should remove the font selector from the options of your theme. Delete those lines in options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Using local font

Of course, you can also download the font files and use them from local server rather than from Google CDN (better for privacy). To have an example of how to it, here our local version of noto font: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

You can use a very similar definition in your theme css file, and then by copying the file NotoSans-Regular.ttf in your theme css/font-src/ folder.

Then, apply that font to your body (or any other element) like above, and remove the default option font selector.

Creating your own font selector in options

For now, you can't easily use the core font selector to add your own font in options. We need first to give the possibility to end user to upload custom packages (see next paragraph: A look into the Fruity Font Selector )
Here how to proceed:

Add two fonts (my_custom_font and my_custom_other_font) into your theme, using CDN or local server
Then, in your css file, add two new classes:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

In the XML file of your theme, add a font option (default one will be my_custom_font) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

in option.twig, add you font picker adding those lines (untested for now, so come complain to the forum if it doesn't work):

            
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Now your users should be able to choose between those two fonts.

A look into the Fruity Font Selector

In the future, we'll give the possibility to final user to upload their own asset packages, including font packages. It will make very easy any customization of fonts.
To understand Yii Packages:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey packages are defined in different files. Fonts packages are defined here: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
For example, the Noto font package is defined here: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

The noto.css file it contains is here: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Notice the definition of the css class ".font-noto" at the end of it:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

Then, in Vanilla Theme, noto font is used by adding the noto package and defining the font option to noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

Then, the body class font is defined using this value: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

Of course, the XML file only contains the default values for your template configuration. But indeed, those values are defined and read inside the database (table "template_configuration") as json strings. The option.js file just use the value of the font selector of the simple option to change the value inside the advanced tab form: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

So when the "upload asset package" functionality will be available, it will be easy to add a script that scan all the existing font packages to add them in the selector.

Adding theme options to control positioning and display of survey elements

This tutorial will show how to add options to an extended theme to display survey elements in various locations. In this case, we will create theme options to show the survey title in two different locations.

For the sake of simplicity, we will base the tutorial on an extension of the "bootswatch" theme in LimeSurvey version 3.4.3.

Create a custom theme

Extend the "bootswatch" theme as described above.
Copy custom.css to the local template as described above.

Create new template options

Copy the contents of /themes/survey/bootswatch/options/ to /upload/themes/survey/yourThemeName/options/.

Open /upload/themes/survey/yourThemeName/options/options.twig in an editor and find "{# Bootstrap Bootswatch theme #}". Directly before its parent <div class='row'> element, add this:

		{# Custom survey name in navbar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

Open /upload/themes/survey/yourThemeName/config.xml and add two items to the "options" block so it looks like this:

    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

This should give you two new options in the Theme Options screen like this:

Modifed view for Survey Title in the navbar

Create a new directory /upload/themes/survey/yourThemeName/views/subviews/header/.
Copy /themes/survey/vanilla/views/subviews/header/nav_bar.twig to that new directory.

Open /themes/survey/vanilla/views/subviews/header/nav_bar.twig and find "{# Logo option #}". Under that, modify the IF statement for the logo/survey-name, so it looks like this:

		{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

Add something like this to /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}

Toggle the "Survey name in navbar" theme option to "Yes"
You should see this:

Modifed view for Survey Title under progress bar

Create a new directory /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Copy /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig to that new directory.

Open /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig and add an <h1> element for the survey name. So it looks like this:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in aGroup.aQuestions %}
         {{ include('./subviews/survey/question_container.twig') }}
    {% endfor %}
 
    <!-- Hidden inputs -->
    {% if aGroup.show_last_group == true %}
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
 
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div>

Add something like this to /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}

Toggle the "Survey name below progress bar" theme option to "Yes"
You should see this:

Downloads

Sample extended theme: Media:Test_survey_names.zip

Creating a template from scratch

Documentation coming soon...

NOTE: if you edit the XML file of a theme, you must uninstall and reinstall the theme so it's taken into account.

NOTE: to avoid that, you can force the use to the XML rather than DB. In config.php turn debug mode on and uncommment:

'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)

Becareful: everything will be loaded from the XML (included options, etc)

NOTE: if you manually edit the CSS/JS files (without using the Theme Editor), and if debug mode is off, you can now force the asset to be flushed. In "Global Settings", "General tab", click the button "Clear assets cache".

@@ Line 194: / Line 194: @@
 <div class="simplebox">この例は、コアテーマの現在のオプションに基づいています。ただし、あなたがテンプレート提供者で、またtwigで少しスクリプトを作成できる場合は、独自のオプションを追加することももちろん可能です。たとえば、会社のウェブサイトや電話番号のようなデータを追加するためのオプション "info footer"を追加することができます。次に、A社に個別の電話番号を持つ部門がある場合、アンケートグループAに各部門ごとに1つのサブグループを作成できます。各サブグループは、このオプションで独自の電話番号を持つことができます。</div>
-= FAQ about theme customization =
+= テーマのカスタマイズに関するFAQ =
 You'll find here some answers to questions that have been asked in the forum and that could help you to customize your theme.

New Template System in LS3.x/ja: Difference between revisions

From LimeSurvey Manual

Revision as of 15:40, 15 August 2018

Contents

はじめに

管理インタフェースを使用した編集

テンプレートリスト

テンプレートエディター

テンプレート継承の考え方について

ユーザーインターフェイスの新規性

簡単な例: 画像の追加

開発検討中の事項

テンプレートオプション

詳細オプション

簡単オプション

継承システム

アンケートグループレベル

アンケートレベル

ユースケースの例

テーマのカスタマイズに関するFAQ

Customizing CSS/JS: deal with the asset manager ("why are my changes not applied?")

Adding custom fonts to my theme

The easy way: using Google Font CDN

Using local font

Creating your own font selector in options

A look into the Fruity Font Selector

Adding theme options to control positioning and display of survey elements

Create a custom theme

Create new template options

Modifed view for Survey Title in the navbar

Modifed view for Survey Title under progress bar

Downloads

Creating a template from scratch