Dokumentation der Arbeiten

Transkript

1 Dokumentation der Arbeiten für ein neues Joomla 3 Template zur Schulhomepage von Michael Gastmann 1) Ausführliche Suche eines neuen Templates zu Joomla 3 im Internet a) Problem: sehr viele aktuelle Templates arbeiten fast nur noch mit eines großen Begrüßungsgrafik und dann 3 Inhaltsblöcke: Beispiel: unter: b) Für die Homepage sollten wir aber weiterhin die Menüleiste links haben, mit - Menü - nächste Termine und Seite 1 von 76

2 - neueste Newsletter - Themen / Links: c) Deshalb auf den Anbieter zurückgegriffen, von dem ich auch das Template zu habe: i) Da es kein schön aussehendes kostenloses Template gab, Seite 2 von 76

3 unter den kostenpflichtigen nachgeschaut: ii) Es sollte ein neues Template sein, das das neue Warp 7 unterstützt iii) Das TK Gen Pro hat deutlich besser lesbare Schriften als TK Ultra Seite 3 von 76

4 iv) und bietet auch eine Modulposition Links an v) zudem sind verschieden Styles möglich, auch grün: vi) und aufgrund der gut strukturierten Programmierung können die Farben auch noch angepasst werden: z.b. in Seite 4 von 76

5 sind die jeweils verwendeten Farben sehr detailliert hinterlegt: und könnten an das Dio-grün bzw.: angepasst werden: Seite 5 von 76

6 vii) und auch für mobile Endgeräte sieht das Template gut aus und das Menü kann vernünftig genutzt werden: viii) der Preis von 8 USD entspricht 7,74 und ist bezahlbar d) Kauf und Download des Templates 2) Fortsetzung der Umstellung von Joomla 2.5 auf Joomla 3 a) Text als Nachtrag zur bisherigen Dokumentation angefügt b) bisheriges SQL-Passwort für joomla3v2.dionysianum.de bei rf-isp.com wieder eingegeben c) Pfad in der.htaccess geändert: d) Ansonsten erfolgt der Zugang mit den alten Zugangssdaten 3) Installation des Templates unter joomla3v2.dionysianum.de: Seite 6 von 76

7 a) Backup der Seite: b) Dann Installation der mit c) Kopie des Template Stils angelegt: d) und als Standard festgelegt: e) Frontsite wird ohne Fehlermeldung angezeigt: Seite 7 von 76

8 f) Im Template Style auf green gesetzt: g) Main-Menu als Modul auf Modulposition menu : Seite 8 von 76

9 h) Modul für Dio-Logo neu angelegt: i) Dio-Slogan auf Position Logo smal wird leider nicht angezeigt => später festgestellt, dass es doch in der mobilen Version verwendet wird j) Bisherige Menüs links: Seite 9 von 76

10 auf Modulposition Sidebar A gesetzt: k) Dann von Position user1 auch auf Sidebar A l) so dass mit folgenden Einstellungen: Seite 10 von 76

11 m) zunächst die Seite wie folgt aussieht: und n) es wird langsam etwas!!! 4) Zur Beurteilung fehlt insbesondere noch die Erweiterung News Show Pro GK5 (die Aktivierung der bisherige Erweiterung News Show Pro GK4 führt leider immer noch dazu, dass die Frontsite völlig weiss/leer bleibt) Seite 11 von 76

12 a) Download der Datei mod_news_pro_gk5_j!3.zip von : b) Manuelle Installation: c) Es erfolgt kein Update von GK4 auf GK5 sondern es müssen neue Module angelegt werden Seite 12 von 76

13 d) Bisher gab es u.a.: und Seite 13 von 76

14 e) Am Beispiel des Moduls NewsShowPro_DioNews_Seite_1 die bisherigen Einstellungen angeschaut: i) ii) iii) nur aktiv: Seite 14 von 76

15 iv) v) vi) Seite 15 von 76

16 vii) Seite 16 von 76

17 Seite 17 von 76

18 viii) Seite 18 von 76

19 ix) Seite 19 von 76

20 x) xi) xii) xiii) Seite 20 von 76

21 xiv) und unverändert gegenüber About f) Auf Basis der zuvor gezeigten Einstellungen für GK4 analog dazu in GK5 das neue angelegten Moduls NewsGK5_DioNews_Seite_1 eingerichtet: i) ii) Seite 21 von 76

22 nur auf iii) Unverändert: iv) v) Seite 22 von 76

23 vi) vii) viii) Seite 23 von 76

24 Seite 24 von 76

25 Seite 25 von 76

26 ix) x) Seite 26 von 76

27 xi) xii) Seite 27 von 76

28 xiii) xiv) g) Als Kopie nur mit geringen Anpassungen ebenfalls für die Presseartikel angelegt: aber die manuell von GK4 übernommenen Größenangaben für die Vorschaubilder zeigen, dass die strukturelle Breiteneinstellung der Startseite noch nicht passt: Seite 28 von 76

29 weil das Menü links = Sidebar A noch zu breit ist. h) Daher im Template i) Unter, ii) Die Breite der Sidebar-a von 25% auf 20% geändert i) Und im Modul NewsGK5_DioNews_Seite_1 geändert i) weil sonst z.b. Bilder im Hochformat nicht richtig wiedergegeben werden Seite 29 von 76

30 ii) Hier ein Beispiel danach: iii) Und analog dazu auch: iv) so dass nun auch die Zeitungsartikel passen: ggf. können sie später sogar noch etwas größer werden und der Button Weiterlesen kann hier entfallen Seite 30 von 76

31 wie bisher 5) Nun ist es an der Zeit, das Template individuell anzupassen a) Zunächst werden Informationen bei YOOtheme (als eigentlicher Ersteller des Warp Frameworks) zum Override gesucht: i) Seite 31 von 76

32 ii) iii) iv) Für diese Möglichkeit entschieden Seite 32 von 76

33 v) b) Dann grundsätzliche Informationen zum Override: i) Unter: ii) aber zunächst für o.g. Methode über die custom.css entschieden c) zunächst soll die Größe der Überschriften angepasst werden i) ii) aus der style.css zum Modul entnommen:.nspart h4.nspheader { Seite 33 von 76

34 iii) und in die } font-size: 24px; margin: 0; padding: 10px 0 15px 0; eingefügt: iv) damit sind zugleich die Grundlagen gelegt, wie das Template erfolgreich angepasst werden kann: Seite 34 von 76

35 v) Fortsetzung mit Änderung der normalen Schriftgröße (1) Bisher 12px mit 17px Zeilenabstand: (2) Da der Text in den aktuellen Beiträgen auf der Startseite zu groß (im Verhältnis zur alten Schulhomepage) angezeigt wird, geschaut, wo die Steuerung liegt: Seite 35 von 76

36 (3) diese kommt aus dem generellen Style des Templates: und betrifft z.b. auch die Schriftgröße bei der Anzeige der Nächsten Termine (4) aber führte nicht zum erhofften Ergebnis: Seite 36 von 76

37 (5) daher Anpassung nur für nsp = NewsShowPro-Artikel und auch noch den Abstand der Beitrags-Information: von: über Seite 37 von 76

38 erfolgreich angepasst: Seite 38 von 76

39 d) Farbe vom Dio-Logo soll auch für Überschriften etc. verwendet werden i) bisherige Farbe: entspricht #00634A ii) Farbe des Headers entfernen: (1) bisher: bzw.: Seite 39 von 76

40 (2) Das Background-Image von der Dio-Farbe #00634A nach #ffffff testweise geändert: (3) gefällt mir: kommt aber aus: mit den bisherigen Einstellungen: (4) Daher ebenfalls in custom.css eingegeben: iii) Analog dazu auch den Hintergrund für die Menüzeile geändert: (1) Bisher: Seite 40 von 76

41 (2) bzw.: (3) in custom.css eingegeben Seite 41 von 76

42 6) EXKURS: Farbenlehre: a) Gesucht, welche weitere Farben, die zur Dio-Logo-Farbe passen: über mit: mit Beispiel: Seite 42 von 76

43 und Farbenliste: Seite 43 von 76

44 b) oder: unterschiedliche Helligkeitsstufen der gleichen Farbe können z.b. unter gesucht werden: Seite 44 von 76

45 7) Fortsetzung der Anpassung des Templates von 5) Nun ist es an der Zeit, das Template individuell anzupassen a) auf Basis der Farbpalette: b) farbliche Anpassung des Hauptmenüs: i) aktiver Menüpunkt von bzw. und nach 0D775D ii) und Hover-Menüpunkt von bzw. und iii) beide Einstellungen sind aus der nach 238D72 Seite 45 von 76

46 iv) und die relevanten Eingaben in die custom.css übernommen: v) Das Ergebnis kann sich m.e. sehr gut sehen lassen: c) Jetzt könnte man in der style.css nach den beiden Farbwerten suchen und alle über die custom.css overriden, d) doch zunächst versuche ich, die Überschriften auf die dunkleren Farbwerte der Palette anzupassen i) Suche: mit: und Seite 46 von 76

47 (gut, dass ich diese Farbnummer nicht überall einfach ersetzt habe!) ii) Geändert in #002F24 über die custom.css: iii) Ergebnis: iv) aber noch nicht unter: mit: und: Seite 47 von 76

48 v) hier beides in der custom.css geändert: vi) Ergebnis: und vii) d.h., dass auch noch Hover auf #004B39 angepasst werden muss: viii) über die custom.css ix) Ergebnis: der leichte Farbunterschied kann erkannt werden! e) Auch das Menü links muss angepasst werden: i) Zunächst farblich: Seite 48 von 76

49 (1) Quelle: mit: (2) aus der theme.css: (3) in der custom.css Seite 49 von 76

50 (4) als Zwischenergebnis: bzw.: und: (5) Teile in der custom.css geändert: Seite 50 von 76

51 ii) Wenn wir schon dabei sind, dann auch noch den Abstand zum Rand: (1) Quelle: bzw. und bzw. und (2) in die custom.css: (3) weiteres Zwischenergebnis: Seite 51 von 76

52 iii) nun fehlt noch die Farbanpassung der Menüpunkte: (1) Quelle: mit und und Seite 52 von 76

53 (2) über: (3) Zwischenergebnis: iv) Könnte man die zweite Menüebene noch etwas nach rechts einrücken? (1) aus: Seite 53 von 76

54 bzw.: und (2) über die custom.css (3) weiteres Zwischenergebnis: Seite 54 von 76

55 v) Kann der leicht graue Rahmen im Hintergrund auf die Breite der Menüeinträge angepasst werden? (1) Suche: (2) mit testweiser Änderung: und (3) und Seite 55 von 76

56 (4) später nochmals geändert auf 10px siehe 7)e)vii)(3) vi) Zugleich aber auch den linken Rand zu verkleinern versucht: (1) Suche der relevanten Einstellung (2) und (3) aus: (4) nur einen Teil in die custom.css Seite 56 von 76

57 (5) scheint aber bei allen Abständen links zu wirken: (6) während das oben noch geht, nicht mehr auf der Startseite: Seite 57 von 76

58 (7) nochmals geschaut, wo die Steuerung lag: (8) in der custom.css angepasst auf 20px (statt der ursprünglichen 25px) (9) nun passt es wieder: Seite 58 von 76

59 vii) können wir noch einmal versuchen, den Platz innerhalb des Blockes links zu verbreitern? (1) Quelle: (2) Kommt aus: (3) also die schon unter 7)e)v)(3) geänderten Werte wie folgt abgeändert: (4) so dass: Seite 59 von 76

60 f) Fortsetzung Logo bzw. Header: i) Bisherige Darstellung: ii) Abstände: (1) Für gesamtencontainer: über: und von 12px auf 10px über custom.css Seite 60 von 76

61 (2) bzw. den Header über: auf 0px über die custom.css (3) über: (4) erreicht: iii) Farbe (1) Ziel: doch keine Hintergrundfarbe (2) Löschen in der custom.css ging nicht Seite 61 von 76

62 (3) Daher auf Farbverlauf geändert: (4) So dass: 8) Slideshow integrieren a) Über Widgetkit von Seite 62 von 76

63 b) Die Free-Version: c) Manuell installiert: Seite 63 von 76

64 d) In der Komponente Widgetkit eine Slideshow angelegt e) und alle Bilder aus: eingebunden f) Und als neues Modul: Seite 64 von 76

65 g) Das sieht schon sehr gut aus: und auch mobil: 9) Weitere Optimierung a) Suche in der Menüzeile integrieren: i) Neues Modul angelegt Seite 65 von 76

66 ii) Ergebnis: b) Menüpfad i) Vorhandenes Modul auf die Position Main Top verlegt: ii) iii) Farbe sollte noch angepasst werden Seite 66 von 76

67 (1) über: und mit: und nur für Breadcrumb die Farbe geändert in custom.css: Ergebnis: iv) später die Modulzuweisung so geändert, dass Breadcrumb nicht auf der Startseite zu sehen ist (1) über: Seite 67 von 76

68 (2) zu: c) Kleineres Logo für mobile Anzeige: i) Weil: ii) und über: iii) mit: iv) durch custom.css: Seite 68 von 76

69 v) und mit dio-logo-kl.jpg in der Größe 75 x 50 px vi) erreicht: vii) nach Deaktivierung der Module im Template: viii) erscheint Breadcrumb nicht mehr mobil: Seite 69 von 76

70 ix) doch lieber weißer Hintergrund in mobilen Modus: über: so dass d) weitere menü-optimierung: i) falsche Farbe bei hover Menüeintrag: über und mit über Eintrag in custom.css: Seite 70 von 76

71 erreicht: Fortsetzung am ) Fortsetzung der Optimierung: a) Menü für die mobile Version: i) Demo-Datei zum Template lokal in XAMPP installiert ii) Gesehen, dass das mobile Menü auf der Modulposition offcanvas steht iii) Kopie des Main-Menu zur Modulposition offcanvas angelegt: b) Slideshow anpassen i) In der Demo-Version zum Template werde in der Slideshow auf der Startseit Fotos der Größe 1600 x 700 px verwendet ii) Die Bildhöhe 700 px ist für das Dio zu hoch, weil zu wenig Inhalt angezeigt wird iii) Bisherige Slideshow-Fotos waren 1000x150 px groß iv) Foto vom Abi 2013 in der Stadthalle in 1600 x 400 getestet; sowohl in der PC-Version als auch am Handy passen die Proportionen nicht; das Bild ist zu schmal Seite 71 von 76

72 v) Original-Fotos zu den bisher verwendeten Slideshow Fotos gesucht und zum Teil gefunden; ersatzweise ähnliche verwendet und Ausschnitte auf 1600 x 500 px ausgewählt/verkleiner: c) Beide Änderungen sehen schon gut aus: Seite 72 von 76

73 d) News Show Pro GK 5 optimieren i) Leider finde ich keine Möglichkeit, wie in der bisherigen Darstellung den Text neben das erste Bild zu setzen: ii) denn die Einstellungen stimmen eigentlich: Seite 73 von 76

74 iii) mich an den ersten Entwurf von Cows-Online für die neue Schulhomepage erinnert: Kopie steht noch unter zur Verfügung. iv) => Lösungsmöglichkeit: größere Bilder! (1) Einstellungen in News Show Pro GK 5: Seite 74 von 76

75 (2) führten zu folgendem Ergebnis: (3) und auch mobil nun sehr gut lesbar: Seite 75 von 76

76 11) Damit den Template-Test beendet! Michael Gastmann / weitere Pläne: 12) Die custom.css sollte später sicherlich mit Kommentaren erweitert werden => hier nicht mehr umgesetzt, denn der erneute Angriff auf die Schulhomepage vom zwingt mich, die Schulhomepage schneller als ursprünglich geplant, auf Joomla 3 zu aktualisieren! Seite 76 von 76