‎シンプルなテーマの作成‎

定義 

‎リポジトリのすべてのマップまたはリポジトリ内の 1 つのマップに対してテーマを作成できます。‎

‎原則は次のとおりです：

‎ディレクトリ:file:media には、 themes 名のディレクトリが含まれています。‎
‎ディレクトリ themes には、リポジトリのすべてのマップのテーマ用の default ディレクトリが含まれています‎
‎ディレクトリ themes には、各プロジェクトに固有のテーマに対して、プロジェクトごとに 1 つのディレクトリが含まれている可能性があります‎

-- media
  |-- themes
    |-- default
    |-- map_project_file_name1
    |-- map_project_file_name2
    |-- etc

‎前提条件‎

‎この機能は、Lizmap インスタンスの管理者によって有効化される必要があります。‎
‎ディレクトリを media ディレクトリ。Lizmap で ‎メディア‎ フォルダーを使用する方法を読んでください。‎

‎ツールの設定 

警告

‎Web ブラウザには、いくつかのキャッシュメカニズムがあります。Ctrl+F5 を使用してキャッシュを更新し、強制することを忘れないでください。‎

‎リポジトリまたはマップのテーマの作成を簡単にするために、Lizmap では、アプリケーションからデフォルトのテーマを取得できます。‎``index.php/view/media/getDefaultTheme``。

‎この要求は、次の構造を持つデフォルトのテーマを含む zip ファイルを返します。‎

-- lizmapWebClient_default_theme.zip
  |-- default
    |-- css
      |-- main.css
      |-- map.css
      |-- media.css
      |-- img
        |-- loading.gif
        |-- etc
      |-- images
        |-- sprite_20.png
        |-- etc

‎zipファイルをダウンロードすると、次のことができます。‎

‎画像を置き換える‎
‎CSS ファイルを編集する‎

警告

‎ファイルとディレクトリは読み取り可能でなければなりません (755:644)‎

Tip

‎運用環境で展開せずに結果をプレビューするには、テーマを lizmap/www/themes に追加します。URL の最後に &theme=yourtheme を追加します (例: https://your.lizmap.instance/index.php/view/map/?repository=montpellier&project=montpellier&theme=yourtheme).

‎テーマの準備ができたら、それをコピーしてディレクトリ media に公開するだけです。‎

‎例‎

roads と呼ばれる特定のプロジェクトのロゴとナビゲーションバーの背景色(例:青) のみを変更し、Lizmap instance からデフォルトのテーマを保持したい。‎

We don't need the media/themes/default folder.
作成‎ media/themes/roads
zip file から css/ ディレクトリを抽出します。‎
‎ファイルを変更する‎ css/img/logo.png

‎これはうまくいくでしょう。しかし、あなたはまだLizmapのメインインスタンスから同じであるCSSの多くを持っています。だから私たちは私たちのスタイルを小さくすることができます:‎

‎Lizmap インスタンスと同じ画像をすべて削除する‎
Search in the css folder where logo.png is used.
すべての‎ *.css ファイルを削除する，ただし，ファイル css/main.css and css/map.css を除く。‎

#logo {
  background : url(img/logo.png) no-repeat;
  background-size:contain;
}

for css/main.css and:

#navbar button.btn {
  background-color : blue;
}

for css/map.css

‎これらの手順に従うことで、カスタムテーマはできるだけ小さく保ちます。‎

追加CSS 

menuselection:Server administration panel -> Theme`では、前のステップのようにファイルを作成することなく、いくつかのCSSを追加することが可能です。例えば、ランディングページのヘッダーから `Projects というタイトルを削除する簡単なヒントがあります。

#title h1 {
    text-indent: -9999px;
    display: block;
}

#title h1::before{
   content: 'Your new title';
    position: absolute;
    left: 9999px;
}