Mapbender3 beinhaltet bereits erzeugte Anwendungs-Vorlagen. Häufig sollen eigene Vorlage mit Ihrem eigenen Corporate Design verwendet werden. Die bereits vorhandenen Vorlagen befinden sich zu Demonstrationszwecken im Mapbender CoreBundle (application/mapbender/src/Mapbender/CoreBundle). Für eigene Vorlagen sollten Sie ein eigenes Bundle verwenden, um Probleme bei einem Upgrade zu vermeiden.
Folgende vier Schritte sind nötig:
Die twig-Dateien sind im folgenden Verzeichnis gespeichert:
Kopieren Sie eine existierende twig-Datei, speichern Sie diese unter einem neuen Namen und verändern Sie den Inhalt, z.B. die Farbe.
cd mapbender/src/Mapbender/CoreBundle/Resources/views/Template
cp base.html.twig demo.html.twig
Die css-Dateien befinden sich im Verzeichnis:
Erzeugen Sie eine eigene css-Datei und verändern Sie den Inhalt.
cd fom/src/FOM/CoreBundle/Resources/public/css/frontend
# css für den Frame (Container Position)
cp fullscreen.css demo.css
# css für Farben, Fonts, Icons
cp mapbender3_theme.css mapbender3_theme_demo.css
Um Ihre Vorlage zu registrieren, müssen Sie eine Datei erzeugen unter:
cd mapbender/src/Mapbender/CoreBundle/Template
cp Fullscreen.php Demo.php
Abschließend müssen Sie den vollständigen Classnamen der neuen Vorlage in der neu erzeugten php-Datei zu den Funktionen getAssets und render hinzufügen:
public function getAssets($type)
{
parent::getAssets($type);
$assets = array(
'css' => array('@FOMCoreBundle/Resources/public/css/frontend/mapbender3_theme_demo.css,@FOMCoreBundle/Resources/public/css/frontend/demo.css'),
'js' => array(),
);
return $assets[$type];
}
public function render($format = 'html', $html = true, $css = true,
$js = true)
{
$templating = $this->container->get('templating');
return $templating
->render('MapbenderCoreBundle:Template:demo.html.twig',
array(
'html' => $html,
'css' => $css,
'js' => $js,
'application' => $this->application));
}
Bearbeiten Sie Ihre twig-Datei und verweisen Sie auf die neuen css-Dateien:
<link rel="stylesheet" href="{{ asset('bundles/fomcore/css/frontend/mapbender3_theme.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/fomcore/css/frontend/fullscreen.css') }}">
verändern in
<link rel="stylesheet" href="{{ asset('bundles/fomcore/css/frontend/mapbender3_theme_demo.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/fomcore/css/frontend/demo.css') }}">
Jetzt kann die Vorlage in der mapbender.yml, in der die Anwendung konfiguriert wird, verwendet werden.
Sie finden die mapbender.yml unter:
"template: Mapbender\CoreBundle\Template\Demo"
Wenn Sie eine neue Anwendung mit der Mapbender3-Administration erzeugen, können Sie eine Vorlage (Template) auswählen.
Bevor Ihre neue Vorlage angezeigt wird, muss diese registriert werden:
public function getTemplates()
{
return array(
'Mapbender\CoreBundle\Template\Fullscreen',
'Mapbender\CoreBundle\Template\Demo'
);
}
Jetzt sollte die neue Vorlage in der Liste erscheinen.
Die folgenden Dateien müssen bearbeitet werden:
Hinweis: In der demo.css ist der Anfang der Datei bezogen auf den Browser. Dieser Teil darf nicht editiert werden. Den Teil, den Sie bearbeiten dürfen, beginnt bei Zeile 430.