Page 1 of 5
Template Workshop?
Posted: Tue Oct 24, 2017 2:47 pm
by Simmyne
Hallo allerseits,
ich wünsche mir ein flexibles template, das so wie im Anhang aussieht, die Farben sollen alle schnell mal änderbar sein. Und es soll natürlich responsive sein bzw. smartfone-optimiert.
Die Unterseiten der Navi sollen so wie bei "Symptome" aufklappen. Ich hatte bisher Probleme mit Navis, da waren die Flächen zu kurz für die Wörter darunter, deswegen gefällt mir diese Lösung ganz gut.
Ich kann aber nicht programmieren und wollte gerne wissen, ob wir uns gemeinsam in diesem Thread dieses template, dass im Anschluss für alle frei verfügbar sein soll, Schritt für Schritt erarbeiten können. Praktisch ein Workshop zur Erstellung eines templates...
Wir würden praktisch so anfangen:
Code: Select all
<!DOCTYPE HTML>
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>><br>
<?php echo toc();?><br>
<?php echo editmenu();?><br>
<?php echo content();?><br>
<p class="font">Powered by <a href="http://www.cmsimple-xh.org/" target="_blank">CMSimple_XH</p></a>
</body>
</html>
Was haltet ihr davon? Es kann ja sein, dass ihr mich in die Wüste schickt und sagt, ich solle es programmieren lassen
LG Simm
template_naturheilpraxis2.jpg
Re: Template Workshop?
Posted: Tue Oct 24, 2017 9:17 pm
by cmb
Simmyne wrote:Die Unterseiten der Navi sollen so wie bei "Symptome" aufklappen. Ich hatte bisher Probleme mit Navis, da waren die Flächen zu kurz für die Wörter darunter, deswegen gefällt mir diese Lösung ganz gut.
Diese Lösung ist allerdings bei responsives Templates nicht ganz einfach zu realisieren – zumindest beim CMSimple_XH Adminmenü wird das derzeit auch mit einigem JS umgesetzt. Das Problem: wenn ein ziemlich weit rechts liegender Menüpunkt aufgeklappt wird, dann müsste dieser das breitere Untermenü nach links schieben, damit es nicht aus dem Viewport heraus ragt.
Simmyne wrote:Ich kann aber nicht programmieren und wollte gerne wissen, ob wir uns gemeinsam in diesem Thread dieses template, dass im Anschluss für alle frei verfügbar sein soll, Schritt für Schritt erarbeiten können. Praktisch ein Workshop zur Erstellung eines templates...
Ich weiß nicht, ob das so funktionieren wird. Hier und da einen Tipp geben würde ich schon, aber mehr ist aus Zeitgründen nicht drin.
Im Zweifel schau dir ruhig mal frei verfügbare Templates an, die ähnlich sind. Sehr hilfreich könnte auch svastis
entsprechendes Tutorial sein.
Re: Template Workshop?
Posted: Tue Oct 24, 2017 10:00 pm
by frase
Irgendwie ist mir dieser Thread durch die Lappen gegangen.
Vielleicht finden sich wirklich ein paar Leute, die dabei etwas lernen wollen/können.
Wäre nicht die schlechteste Sache.
Mit Tipps würde ich euch auch gerne unterstützen - sofern Zeit ...
Falls das Template aber bald gebraucht wird, empfehle ich einen Blick auf
Ludwigs Templates.
Die SimpleCrazyX (02) Templates gehen doch schon stark in die gewünschte Richtung - oder?
Re: Template Workshop?
Posted: Wed Oct 25, 2017 7:13 pm
by mhz
Auf der einen Seite wäre ich auch daran interessiert, andererseits ist das auch bei mir sehr zeitabhängig, ob ich etwas machen kann oder erst mal dieses Projekt (für Tage oder Wochen) ruhen lassen muss.
Ich habe vor einigen Wochen auch mit der Template-Programmierung angefangen, quasi von 0 auf ...
Besonders gute Dienste hat mir das Tutorial von
Hartmut und ergänzend dazu das von
Winfried Scharff geleistet.
Vorher habe ich mir allerdings das Buch von Elisabeth Wetsch: "Einstieg in CSS" und Peter Müller: "Little boxes (1 und 2)" besorgt und einmal komplett durchgelesen. So verstand und verstehe ich manches eher.
Trotzdem habe ich weiterhin meine Schwierigkeiten!
Ich kann natürlich hier nachfragen und bekäme auch Antworten. Aber jetzt hat mich ein wenig der Ehrgeiz gepackt, es mit Hilfe von diversen Schnipseln auch aus anderen Büchern und den einschlägigen Seiten im Web herauszufinden und bei falschen Eingaben zu sehen, was falsch läuft.
Was mir auch oft hilft, ist die Verwendung von "Element untersuchen" oder F12. So versuche ich die Programmierung zu durchschauen.
Re: Template Workshop?
Posted: Wed Oct 25, 2017 7:24 pm
by frase
Fangt doch einfach an !?
Es drängt doch niemand - oder?
Legt irgendwo eine Spielwiese an, sodass man sehen kann was ihr treibt.
Tauchen Probleme auf, wird sich schon Hilfe einstellen.
Wie lange es dauert, spielt keine Rolle.
Re: Template Workshop?
Posted: Wed Oct 25, 2017 7:44 pm
by mhz
Re: Template Workshop?
Posted: Thu Oct 26, 2017 8:08 am
by Simmyne
Hallo allerseits,
danke für die positiven Reaktionen. Ich hatte bisher noch keine Zeit gehabt, aber ich war gedanklich schon damit beschäftigt.
Der erste Schritt wäre ja oben der grüne Balken und der Header, erst einmal ohne Smartfone-Optimierung.
Mach ich da ein <div>, das 100% und grün ist und setze den Header ebenfalls in ein <div> in das andere <div>?
Praktisch so - einfach ausgedrückt, über die richtige Programmierung müsste ich mir noch Gedanken machen bzw. brauche ich ja parallel das stylesheet.css:
<div grün width=100%>
<div zentriert width=1200px>img</div>
</div>
Sorry für das Gestopsel, aber ich möchte sicher gehen, ob ich mit der Verschachtelung richtig bin oder ob ihr das ganz anders anfangen tätet...
LG Simm
P.S. Übrigens sieht das template bis jetzt so aus:
http://www.zur-sprache-kommen.de/NEUES/?Workshop
Re: Template Workshop?
Posted: Thu Oct 26, 2017 10:18 am
by SiNiTaSa
Ich würde mal so anfangen......
html:
Code: Select all
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
stylesheet:
Code: Select all
#wrapper {
}
#header {
}
#navigation {
}
#content {
}
#footer {
}
und jetzt dann erstmal die stylsheet etwas befüllen.
Re: Template Workshop?
Posted: Thu Oct 26, 2017 10:28 am
by SiNiTaSa
Code: Select all
html, body {
padding:0;
margin:0;
border: 0 none;
}
#wrapper {
width:100%;
margin: 0 auto;
}
#header {
background: #006e00;
height: 160px;
}
#navigation {
background: #00c200;
height: 40px;
}
#content {
background: #FFFFFF;
}
#footer {
background: #006e00;
height:100px;
}
Re: Template Workshop?
Posted: Thu Oct 26, 2017 10:42 am
by cmb
Simmyne wrote:Der erste Schritt wäre ja oben der grüne Balken und der Header, erst einmal ohne Smartfone-Optimierung.
Mach ich da ein <div>, das 100% und grün ist und setze den Header ebenfalls in ein <div> in das andere <div>?
Wenn das Header-Bild nur Dekoration ist (und das scheint es hier zu sein), dann bietet es sich an, dieses als background-image per CSS zu setzen, anstatt als <img>.