Template Workshop?

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Template Workshop?

Post by Simmyne » Tue Oct 24, 2017 2:47 pm

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 :oops:

LG Simm
template_naturheilpraxis2.jpg
You do not have the required permissions to view the files attached to this post.

cmb
Posts: 13299
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Template Workshop?

Post by cmb » Tue Oct 24, 2017 9:17 pm

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.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 3313
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template Workshop?

Post by frase » Tue Oct 24, 2017 10:00 pm

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?

mhz
Posts: 603
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Template Workshop?

Post by mhz » Wed Oct 25, 2017 7:13 pm

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.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

frase
Posts: 3313
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template Workshop?

Post by frase » Wed Oct 25, 2017 7:24 pm

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.

mhz
Posts: 603
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Template Workshop?

Post by mhz » Wed Oct 25, 2017 7:44 pm

Meine Spielwiese ist http://xh.michael-zajusch.de/.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Re: Template Workshop?

Post by Simmyne » Thu Oct 26, 2017 8:08 am

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

SiNiTaSa
Posts: 106
Joined: Tue Jan 03, 2017 10:33 am
Location: BW|GERMANY

Re: Template Workshop?

Post by SiNiTaSa » Thu Oct 26, 2017 10:18 am

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.
Last edited by SiNiTaSa on Thu Oct 26, 2017 11:41 am, edited 1 time in total.
aka smaxle | plugin_XH 1.7

SiNiTaSa
Posts: 106
Joined: Tue Jan 03, 2017 10:33 am
Location: BW|GERMANY

Re: Template Workshop?

Post by SiNiTaSa » Thu Oct 26, 2017 10:28 am

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;
  
}
Last edited by SiNiTaSa on Thu Oct 26, 2017 12:01 pm, edited 1 time in total.
aka smaxle | plugin_XH 1.7

cmb
Posts: 13299
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Template Workshop?

Post by cmb » Thu Oct 26, 2017 10:42 am

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>.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply