{"id":1007,"date":"2018-03-30T15:46:48","date_gmt":"2018-03-30T13:46:48","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1007"},"modified":"2018-04-04T12:29:28","modified_gmt":"2018-04-04T10:29:28","slug":"joomla-template-3-das-styling","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/03\/30\/joomla-template-3-das-styling\/","title":{"rendered":"Joomla-Template 3: das Styling"},"content":{"rendered":"

Wir arbeiten jetzt mit unserer formate.css, die steckt im durch die erfolgreiche Template-Installation neu angelegten Verzeichnis [joomlainstallation]->templates->evis2014 im Unterverzeichnis css.<\/p>\n

Damit das Ganze jetzt dem Vorbild TwentyFourteeen etwas \u00e4hnlicher sieht, habe ich zun\u00e4chst einmal die Schriftarten angepasst und die \u00dcberschriften h1 bis h3 auf Kapit\u00e4lchen gesetzt:<\/p>\n

body {\r\n\u00a0 margin: 0;\r\n\u00a0 padding: 0;\r\n\u00a0 font-family: Helvetica;\r\n\u00a0 font-size: 14px;\u00a0\u00a0 \u00a0\r\n\u00a0 font-weight: normal;\r\n\u00a0 line-height: 24px;\r\n\u00a0 color: #43473b;\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n\u00a0 font-family: Times;\r\n\u00a0 font-weight: normal;\r\n\u00a0 color: #43473b;;\r\n}\r\n\r\nh1 { font-size: 45px; font-variant:small-caps;}\r\nh2 { font-size: 30px; font-variant:small-caps;}\r\nh3 { font-size: 22px; font-variant:small-caps;}\r\n\r\n\r\na { color: #43473b; }\r\na:hover { color: #fc737b; \u00a0\u00a0 \u00a0}<\/pre>\n
Da ist weiter nichts dabei, das kann sich jeder selber einrichten wie er es gern h\u00e4tte. Jetzt kommen unsere Inhalts-Divs dran, damit die auch sch\u00f6n nach unserem dreispaltigen Raster ausgerichtet werden:<\/p>\n
#wrap {\r\nwidth: 1260px;\r\n}\r\n\u00a0\u00a0 \u00a0\r\n#sidebarLeft {\r\npadding: 20px;\r\nfloat: left;\r\nwidth: 200px;\r\n}\r\n\r\n#content {\r\nfloat:left;\r\nwidth:600px;\r\npadding:20px;\r\n}\r\n\r\n#sidebarRight {\r\n\r\nfloat: left;\r\nwidth: 200px;\r\npadding: 20px;\r\n}<\/pre>\n
Das float: left richtet sidebarLeft, content und sidebarRight innerhalb der wrap nebeneinander aus.<\/p>\n
Als n\u00e4chstes nehme ich mir den Seitenkopf vor, da h\u00e4tte ich gern unmittelbar unter dem Headerbild den Namen meiner Seite angezeigt. Das sieht in der index.php so aus:<\/p>\n
<div id=\"kopf\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<div id = \"seitentitel\" name =\"titel\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<?php $config = JFactory::getConfig();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo '<h1>'.$config->get( 'sitename' ).'<\/h1>';?>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/div>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<div id = \"oben\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"oben\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/div>\r\n<\/div><\/pre>\n
Ich habe das Ganze in eine eigene div namens kopf gepackt, weil es so einfacher war den farbigen Hintergrund ohne L\u00fccken zu stylen. In der div seitentitel steckt eine Joomla-Variable, die uns den Seitentitel als h1 formatiert ausgibt, das mache ich mit der Anweisung:<\/p>\n
<?php $config = JFactory::getConfig();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo '<h1>'.$config->get( 'sitename' ).'<\/h1>';?><\/pre>\n
Gestylt wird die Ausgabe des Titels einfach so:<\/p>\n
#seitentitel{\r\n\u00a0\u00a0 \u00a0display: inline-block;\r\n\u00a0\u00a0 \u00a0width: 1260px;\r\n\u00a0\u00a0 \u00a0height: auto;\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0}<\/pre>\n
In der div oben hatte ich im Modulmanager mein Main Menu positioniert. Damit es jetzt nicht mehr als Liste untereinander, sondern als horizontales Men\u00fc erscheint, musste ich etwas t\u00fcfteln. Ich habs schlie\u00dflich so hingekriegt:<\/p>\n
#oben ul li{\r\n\u00a0\u00a0 \u00a0display:inline;\r\n\u00a0\u00a0 \u00a0white-space: normal;\r\n\u00a0\u00a0 \u00a0}<\/pre>\n
Das klebte jetzt erstmal zusammen und war auch noch nicht sch\u00f6n formatiert, aber immerhin schon mal horizontal:<\/p>\n
\"nebeneinander\"
nebeneinander<\/p><\/div>\n
Das liess sich aber sch\u00f6n nachbessern, mit diesen Anweisungen:<\/p>\n
#oben ul li a\r\n{\r\nfont-family: Times;\r\nfont-style: normal;\r\nfont-variant:small-caps;\r\nfont-size: 24px;\r\ntext-decoration: none;\r\npadding: .2em 1em;\r\ncolor: #fff;\r\nbackground-color: #89a7cb;\r\nline-height: 2\r\n}<\/pre>\n
kam Abstand (padding) zwischen die einzelnen Men\u00fceintr\u00e4ge, und die Schrift wurde sch\u00f6ner formatiert.<\/p>\n
Jetzt fehlte nur noch ein einheitlicher Hintergrund:<\/p>\n
\"hintergrund_unschoen\"
hintergrund_unschoen<\/p><\/div>\n
Deswegen hatte ich ja die umh\u00fcllende div kopf:<\/p>\n
#kopf{background-color: #89a7cb}<\/pre>\n
Bingo! Fertig ist das horizontale Men\u00fc.<\/p>\n
\"horizontales_menu\"
horizontales_menu<\/p><\/div>\n
Und auch unsere dreiteilige Seite sieht gut aus:<\/p>\n
\"fertig_gestylt\"
fertig_gestylt<\/p><\/div>\n
Den Footer hab ich jetzt unterschlagen, aber den brauche ich auch nicht wirklich. Ich hab noch ein bisschen an den Feineinstellunggen geschraubt, die Autor-Info aus den Beitr\u00e4gen rausgenommen und die Print- und Email-Icons verborgen, aber das wars dann auch schon. Das cleane Layout sieht dem Vorbild TwentyFourteen f\u00fcr meine Zwecke \u00e4hnlich genug, ich lass es jetzt mal gut sein. Besonders dank des hervorragenden Tutorials von http:\/\/joomla-templates-erstellen.de<\/a> war das jetzt lang nicht so schwierig, wie es sich anfangs anliess, und hat richtig Spa\u00df gemacht.<\/p>\n
Nachtrag zum Footer<\/h2>\n
Der hat in der index.php eine eigene div gekriegt, nach den anderen Elementen und vor dem schliessenden Tag der div wrap:<\/p>\n
\u00a0\u00a0\u00a0 <div id=\"footer\">\r\n\u00a0\u00a0 \u00a0Ich bin dein Footer.\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"footer\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<!-- end #footer --><\/div>\r\n\r\n<!-- end #wrap --><\/div><\/pre>\n
Damit er jetzt wirklich unten erscheint und nicht auf der Seite klebt, erg\u00e4nzen wir die formate.css um folgenden Eintrag:<\/p>\n
#footer {\r\npadding: 10px 0;\r\nclear: both<\/span>; \r\nbackground-color:#89a7cb;\r\n\r\n}<\/pre>\n
Das clear: both<\/strong> macht den Unterschied! Damit werden die floatenden Elemente beendet, es erscheint der Footer dann auch wirklich erst unterhalb der anderen Inhalts-divs. Eine anschauliche Erkl\u00e4rung\u00a0 dazu findet man bei mediaevent.de<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Wir arbeiten jetzt mit unserer formate.css, die steckt im durch die erfolgreiche Template-Installation neu angelegten Verzeichnis [joomlainstallation]->templates->evis2014 im Unterverzeichnis css. Damit das Ganze jetzt dem Vorbild TwentyFourteeen etwas \u00e4hnlicher sieht, habe ich zun\u00e4chst einmal die Schriftarten angepasst und die \u00dcberschriften h1 bis h3 auf Kapit\u00e4lchen gesetzt: body { \u00a0 margin: 0; \u00a0 padding: 0; \u00a0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,44],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1007"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1007"}],"version-history":[{"count":4,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1007\/revisions"}],"predecessor-version":[{"id":1079,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1007\/revisions\/1079"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}