fg-grey-wbce: mein erstes Template

bastie · 30.11.2017 21:30:22

Auf Basis von:

https://forum.wbce.org/viewtopic.php?id=1770

hab ich jetzt, wie schon angedroht, mein allererstes WBCE-Template erstellt. Den PHP-Code hab' ich einfach bei Florians Lesefaken geklaut (danke für die Kommentare im Template).

Zu besichtigen:

http://lrd.bplaced.net/

Jetzt meine Bitte als Amateur, schaut Euch das mal an und sucht nach Fehlern oder Verbesserungen. Konstruktive Kritik, besonders von den Profis - ich bitte drum.

PS: die editor.css fehlt noch, eins nach dem anderen. Ich wollte erst einmal einmal ein funktionierendes Template bauen. Feinheiten kommen später.

Last edited by bastie (01.12.2017 09:33:28)

florian, screamindan, byteworker, midland

florian · 01.12.2017 09:18:50

Download funktioniert leider nicht (404)

colinax · 01.12.2017 09:28:28

Hi, so über den Quelltext habe ich zwei Probleme festgestellt.

einmal im Body tag und dann meldet die Div Verschachtelung ein Problem.

Wie es aussieht verwendest Du auch kein simplepagehead

Mehr kann ich zz. leider nicht sagen, da der Download nicht geht.

bastie · 01.12.2017 09:37:42

Tut mir leid, ich war einfach zu schnell mit meinem Post. Mir sind selber schon ein paar Fehler aufgefallen. Muß noch mal gründlich überarbeitet werden.

bastie · 01.12.2017 21:01:45

Ok, neuer Versuch:

zu besichtigen:

fg-grey

Template-Download:

fg-grey

Wie geschrieben, mein erstes WBCE-Template als Nicht-Profi.

Was mir schon als grober Fehler aufgefallen ist, bei Mini-Hero klappt's mit dem Parallax-Efekt nicht - da paßt was nicht.

Da ich lernen möchte - bitte Kritik (naja, ein Lob wäre auch motivierend)

bernd · 01.12.2017 22:20:03

Nicht schlecht für ein "Erstlingswerk" wink

Zum dem Mini-Hero kann ich wegen "noch nie damit zu tun gehabt" nichts sagen.

Der Validator nölt ein Attribute " not allowed on element a at this point. an, aber das scheint mir von Teaser her zu kommen, kann also dein Template nichts dafür. In den generierten Links taucht einfach ein einsames " zu viel auf.

Und zur Motivation: Lob lol

florian · 02.12.2017 09:29:58

Auch von mir schon mal vielen Dank, das Template ist schon sehr gut.

Folgende Kleinigkeiten sind noch zu korrigieren:

1) Im Head steht aktuell

if(function_exists('simplepagehead')) {
		simplepagehead('/', 1, 0, 0); 
	} else { ?>
		<title><?php page_title(); ?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
		<meta name="description" content="<?php page_description(); ?>" />
		<meta name="keywords" content="<?php page_keywords(); ?>" />
	<?php  } ?>
	<meta name="robots" content="index,follow">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="initial-scale = 1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="shortcut icon" type="image/x-icon" href="<?php echo TEMPLATE_DIR; ?>/images/icons/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="<?php echo TEMPLATE_DIR; ?>/images/icons/phone.jpg">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo TEMPLATE_DIR; ?>/images/icons/tablet.jpg">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo TEMPLATE_DIR; ?>/images/icons/retina.jpg">

Simplepagehead würde auch Favicon und die Touchicons laden, sofern vorhanden (müssen im Template-Verzeichnis liegen und apple-touch-icon-57x57.png usw. heißen). Der erneute Aufruf etwas weiter unten wäre in dem Falle redundant. Hinzu kommt, dass auch im jetzigen Template die Touchicons nicht vorhanden sind.
Abhilfe: Zeilen

    <link rel="shortcut icon" type="image/x-icon" href="<?php echo TEMPLATE_DIR; ?>/images/icons/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="<?php echo TEMPLATE_DIR; ?>/images/icons/phone.jpg">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo TEMPLATE_DIR; ?>/images/icons/tablet.jpg">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo TEMPLATE_DIR; ?>/images/icons/retina.jpg">

ausschneiden und zwischen

<meta name="keywords" content="<?php page_keywords(); ?>" />

und

	<?php  } ?>

einfügen.

2) Es wird FontAwesome mit ausgeliefert, das ist aber ab WBCE 1.2 nicht mehr unbedingt nötig, da bei WBCE von Haus aus dabei. Die Zeile

 <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/fonts/fontawesome/css/font-awesome.min.css" />

ändern zu

 <link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/font-awesome/css/font-awesome.min.css" />

und das Verzeichnis /fonts aus dem Package entfernen.

3) Es wird 2x jQuery geladen, einmal über die Funktion register_frontend_modfiles und einmal extern von CDN - daher die Zeile

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

entfernen.

4) Das Script equal-height.js wird nicht gefunden, hier fehlt der korrekte Pfad zur JS-Datei. Die Zeile

<script src="js/equal-height.js"></script>

ändern zu

<script src="<?php echo TEMPLATE_DIR; ?>/js/equal-height.js"></script>

5) Das Menü hebt den aktuell ausgewählten Menüpunkt nicht hervor, hier könnte man noch überlegen, in der menu.css eine Formatierung für .menu-current a:link und .menu-parent a:link einzufügen.

Allerdings würde bei diesem Aufruf die target-Anweisung im a-Tag fehlen, sodass die Einstellung, einen Link in einer neuen Seite zu öffnen, nichts bewirken würde. Um dies zu verhindern, den Menüaufruf

 $aItemOpen      = '[li][a][menu_title]</a>',

ändern zu

 $aItemOpen      = '[li]<a href="[url]" target="[target]">[menu_title]</a>',

Daran habe ich selbst aber auch nicht gedacht, d.h. das ist schon in bei Lesefaken falsch.

6) Die Ausgabe des PAGE_TITLE ist auskommentiert - Absicht?

7) Am Fuß der Seite, also vor dem </body> noch einfügen :

<?php register_frontend_modfiles_body();?>

Das vergesse ich selbst auch meistens, aber einige Module brauchen das (z.B. Leaflet Maps).

Last but not least: Templatedateien bitte in UTF-8 speichern, zumindest Notepad++ behauptet (ob das stimmt, ist aber nicht so ganz sicher), die Datei sei ANSI-codiert.

Davon abgesehen ein schönes Template, das auch sehr gut als Grundlage für eigene Kreationen dienen kann. thumb_up

bastie · 03.12.2017 20:50:15

Allerherzlichsten Dank für die Blumen!

UTF 8: Notepad++ sagt mir UFT8 ohne Bom, was soweit ich weiß, ja auch richtig ist. Ich hab noch mal alle Dateien nach UFT8 und wieder zurück nach UFT8 ohne Bom konverteiert. Notepad++ sagt immer noch UFT8 ohne BOM. Mit Umlauten und Sonderzeichen gibt es anscheinend kein Problem. Komisch.

Ansonsten, bitte noch mal sehr kritisch begutachten, ich hab die Vorschläge umgesetzt - aber irgendwann sieht man ja den Code vor lauter Zeichen nicht mehr. Irgendwo hab' ich bestimmt was vergessen.

Problem Mini-Hero gelöst: Lag daran, dass ich Block 10 (headerbild) in ein Div mit Hintergrund gepackt habe - nachlesen bei WBCE.at hat geholfen. Jetzt klappt's auch mit dem Parallax-Effekt.

Was mich noch etwas irritiert, ist die Sache mit der editor.css. Was gehört da rein und was nicht, was schmeißt man in template.css raus und was beißt sich. In manchen Templates ist da so manches drin, was ich da nie vermutet hätte und manche sind einfach nur rudimentär.

Anderes Thema: template.js
Kann ich da eigentlich alle im Template vorkommenden Javascripts zusammenfassen. was ja seine Vorteile hätte, oder gibt es da irgendwo Konflikte?

Noch zu erledigen: editor.css, Breadcrumbs, Meta- bzw. Top-Menu.

Last edited by bastie (03.12.2017 20:55:18)

screamindan · 03.12.2017 21:29:41

Sehr schönes Template! thumb_up Mir hat es nur auf der Topics Seite hochkant am Handy nen zu breiten Rand. Da sind manchmal nur 2 Worte nebeneinander. Aber Hut ab; great job!

EDIT: Auch Handy hochkant. Beim Formular auf der Topics Seite werden Worte abgeschnitten.

Last edited by screamindan (03.12.2017 21:32:43)

grindmobil · 03.12.2017 22:24:21

Ja, der Seitenrand am Handy ist etwas üppig. Sieht zwar gut aus, macht aber Ärger.
Ich schaue es mir morgen genauer an.

grindbatzn · 04.12.2017 20:00:19

editor.css
Ich mach das immer so: In der editor.css kommt alles rein an Schrift(größen), Farben usw - eben alles, was man im Editor schon sehen soll.
Auch das ganze responsive Zeugs (pic2left usw), das man im Editor schon sieht.

In der template.css dann eben der ganze Rest: Blöcke, Menü usw.

Die ganzen JS-Schnippsel kannst du ruhig in eine template.js zusammenkopieren.

Ein Problem gibt es mit dem #cssmenu und dem z-index: 9999;
Es sieht nicht gut aus, wenn das Menü zb über einem Gallery-Overlay liegt. z-index:1000; sollte eigentlich reichen.

florian · 04.12.2017 20:38:43

Es gibt zwei "Schulen" für die Handhabung der editor.css.
Die eine ist die von grindbatzn beschriebene, die dann auch voraussetzt, dass die editor.css im Frontendtemplate aufgerufen wird. Was nicht so superoptimal ist, da eigentlich gilt, dass so wenig Dateien wie möglich eingebunden werden sollen (SEO, Requests, Kampf um jede Milisekunde blablub).
Die andere ist: In die editor.css gehört nur der Kram rein, der für die Darstellung im Backend relevant ist, und im Frontend hat die editor.css nichts zu suchen. Vorteil: weniger Dateien, die im Frontendtemplate geladen werden, übersichtliche editor.css mit nur einer Hand voll Styles. Nachteil: Wenn an der Frontend-CSS was geändert wird, muss das manuell fürs Backend nachgezogen werden.
Salomonische Lösung: (Fast) Alle Styles für das Frontend stehen in einer styles.css, und die editor.css besteht nur aus einem simplen @import url-Aufruf.

bastie · 09.12.2017 00:45:35

Hi zusammen,

ich hab' weiter dran rumgeschraubt, editor.css ist da, Breadcrumbs auch. Jetzt hab ich da ein Problem: die Seiten Kontakt, Impressum sind im Meta-Menü. Da werden aber die Breadcrumbs nicht angezeigt. Klar hat das was mit show-menu zu tun. Wie bekomme ich es hin, das die Breadcrumbs nicht nur für das Hauptmenü, sondern auch für das Metamenü gelten? Die Show-Menü-Doku ist da nicht so sehr hilfreich. Kann ich im Breadcrumb-Aufruf sowohl das eine, als auch das andere Menü angeben?

Die Links sind immer noch die gleichen:
http://lrd.bplaced.net/

www.lrd.bplaced.net/downloads/fg-grey.zip

Ansonsten, Kritik ist von mir weiter erwünscht.

Last edited by bastie (09.12.2017 00:49:24)

petero

bernd · 09.12.2017 00:55:09

Hallo bastie,
ohne es jetzt ausprobiert zu haben:

SM2-Readme wrote:

$aMenu
Nummer des Menüs. Diese ist nützlich um mehrere Menüs auf einer Seite zu
verwenden.
Menü Nummer 0 ist das Vorgabemenü der aktuellen Seite, SM2_ALLMENU gibt alle
im System verwendeten Menüs zurück.

$aMenu ist der erste Parameter.

bastie · 10.12.2017 12:43:07

bernd wrote:

Hallo bastie,
ohne es jetzt ausprobiert zu haben:
SM2-Readme wrote:
$aMenu
Nummer des Menüs. Diese ist nützlich um mehrere Menüs auf einer Seite zu
verwenden.
Menü Nummer 0 ist das Vorgabemenü der aktuellen Seite, SM2_ALLMENU gibt alle
im System verwendeten Menüs zurück.
$aMenu ist der erste Parameter.

Danke für den Zaunpfahl, das war es. Einfach die Menünummer durch SM2_ALLMENU ersetzen.

WBCE CMS Forum

#1 30.11.2017 21:30:22

fg-grey-wbce: mein erstes Template

#2 01.12.2017 09:18:50

Re: fg-grey-wbce: mein erstes Template

#3 01.12.2017 09:28:28

Re: fg-grey-wbce: mein erstes Template

#4 01.12.2017 09:37:42

Re: fg-grey-wbce: mein erstes Template

#5 01.12.2017 21:01:45

Re: fg-grey-wbce: mein erstes Template

#6 01.12.2017 22:20:03

Re: fg-grey-wbce: mein erstes Template

#7 02.12.2017 09:29:58

Re: fg-grey-wbce: mein erstes Template

#8 03.12.2017 20:50:15

Re: fg-grey-wbce: mein erstes Template

#9 03.12.2017 21:29:41

Re: fg-grey-wbce: mein erstes Template

#10 03.12.2017 22:24:21

Re: fg-grey-wbce: mein erstes Template

#11 04.12.2017 20:00:19

Re: fg-grey-wbce: mein erstes Template

#12 04.12.2017 20:38:43

Re: fg-grey-wbce: mein erstes Template

#13 09.12.2017 00:45:35

Re: fg-grey-wbce: mein erstes Template

#14 09.12.2017 00:55:09

Re: fg-grey-wbce: mein erstes Template

#15 10.12.2017 12:43:07

Re: fg-grey-wbce: mein erstes Template

Board footer