Eigenes Theme für Drupal umschreiben
Eingetragen von Mystery (63)am 01.12.2014 - 11:55 Uhr in
Hallo Zusammen,
bin neu in Sachen Drupal unterwegs... aktuell arbeite ich mit Version 7.34.
Ich habe gerade von GHrund auf ein Design für eine Webseite erstellt. Die soll später noch ein Forum und einen kleinen Wiki bereich bekommen.
Nun möchte ich das ganze in ein Drupal Theme umwandeln, allerdings sind alle Versuche mit einer Fehlermeldung geblockt wurden. Mein Theme wäre nicht für Version 7.x geeignet.
Meine Frage ist, sind die CSS und DIV elemente bei Drupal fest vorgeschrieben?
Habt ihr Tipps, und eine Deutsche anleitung (ausser das Handbuch) wie ich meinen Code passend für Drupal umschreiben kann?
Hier mal mein CSS Code, damit ihr einen Einblick habt:
* {
margin:0; border:0; padding:0;
}
html {
background:#000
}
/*---------------- klassen ----------------*/
.login_font {
color: #999;
font: bold 12px/25px Arial, Helvetica;
}
.no_liststyle {
list-style:none;
}
.noopacity {
opacity:1;
}
.opacity {
background:#000;
opacity:0.5;
}
.float {
float: left;
}
/*---------------- Body ----------------*/
body {
font:62,5%/1,8em Helvetica, verdana, arial, sens-serif;
color:#FFF;
width:100%;
background:url(BG_full.jpg) top center no-repeat;
margin:0 auto;
}
/*---------------- Header ----------------*/
#header {
height:165px;
background:url(header_repeat.png) repeat-x;
}
#header_img {
height:165px;
background:url(Header%20Banner_2.png) no-repeat center;
}
#header_center {
margin:0 auto;
width:980px;
height:140px;
}
/*---------------- Content ----------------*/
#wrapper_content {
width:1200px;
height:100%;
margin:0 auto;
}
#main_content {
width:1000px;
height:1500px;
background:rgba(000,000,000,0.5);
margin:0;
margin-top:5px;
border:solid #F00 1px;
border-radius:10px;
}
/*---------------- Sidebars ----------------*/
#sidbar_left {
width:160px;
height:500px;
padding-left:15px;
border-bottom-right-radius:60px;
border-top-left-radius:10px;
border-top-right-radius:10px;
background:rgba(000,000,000,0.5);
float:right;
border:solid #F00 1px;
}
/*---------------- Main Menü ----------------*/
#menu {
width: 80%;
margin: 0 auto;
padding: 140px 0 0 0;
list-style: none;
}
#menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
background-color: #0186ba;
background-image: linear-gradient(#ff0400, #b80503);
}
#menu li:first-child a { /* Hover Hauptmenü Radius */
border-radius: 10px 0 0 0;
}
#menu li:last-child a { /* Hover Hauptmenü Radius */
border-radius: 0 10px 0 0;
}
*html #menu li a:hover { /* IE6 */
color: #fafafa;
}
#menu li:hover > ul {
display: block;
}
/*---------------- Sub-menu ----------------*/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
-moz-border-radius: 5px;
border-radius: 5px;
background:rgba(000,000,000,0.8);
border:solid #F00 1px;
}
#menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a { /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a { /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover { /* Hover Submenü Farbe */
background-color: #0186ba;
background-image: linear-gradient(#ff0400, #b80503);
}
#menu ul li:first-child a {
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #F00; /* Submenü Farbe pfeil */
}
#menu ul li:first-child a:hover:after { /* Hover Submenü Farbe */
border-bottom-color: #ff0400;
}
#menu ul li:last-child a {
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
#footer_container {
height:60px;
background:url(footer_repeat.png) repeat-x;
clear:both;
margin-top:5px;
}
#footer_center {
width:960px;
height:60px;
margin:0 auto;
}
.paddingfooter{
padding-top:15px;
}
#footer_left{
height:60px;
width:340px;
float:left;
padding-left:10px;
text-align:left;
font-size:10px;
}
#footer_right{
height:60px;
width:340px;
float:right;
}
#footer_middle{
height:60px;
width:280px;
margin:0 auto;
text-align:center;
font-size:8px;
}Und hier noch der HTML Code für mein Grundgerüst:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link href="style_navi.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="header">
<div id="header_img">
<div id="header_center">
<ul id="menu">
</ul>
</div>
</div>
</div>
</header>
<div id="wrapper_content"><!-- wrapper content -->
<div id="sidbar_left"><!-- Sidbar -->
<div class="login_font"><!-- login block -->
</div><!-- login block end -->
</div><!-- Sidbar end -->
<div id="main_content">
</div>
</div><!-- wrapper content end-->
<footer id="footer_container">
<div id="footer_center">
<div id="footer_left" class="paddingfooter">
</div>
<div id="footer_right" class="paddingfooter">
</div>
<div id="footer_middle" class="paddingfooter">
</div>
</div>
</footer>
</body>
</html>Ich hoffe Ihr habt ein paar Taktische ansätze für mich. Falls Ihr weitere details braucht, oder Fragen zum Code sind, dann einfach Raus damit.
LG Ronny
- Anmelden oder Registrieren um Kommentare zu schreiben
kennst du diese Links?
am 01.12.2014 - 12:07 Uhr
Ist zwar für Drupal 6 geschrieben, aber das Grundsätzliche Vorgehen hat sich nicht verändert:
http://forward-media.de/tutorial/eigenes-drupal-theme-erstellen-drupal-t...
Hier findest du noch einiges mehr:
http://www.drupaltutorials.de/
Wenn du das grundsätzliche verstanden hast, kannst du dir ein gut dokumentiertes Theme holen, in dem du nachsehen kannst, wie es funktioniert, und das du als Basis-Theme verwenden kannst.
Meist ist es nicht sinnvoll ein komplettes Theme neu zu schreiben, sondern erheblich schneller und effektiver, ein bestehendes Theme abzuwandeln (subthemen).
Dabei überschreibst du nur das, was du wirklich verändern willst.
Drupal prüft doch nicht Deine
am 01.12.2014 - 12:25 Uhr
Drupal prüft doch nicht Deine div-Container oder CSS, Drupal prüft, ob das Template in PHP richtig aufgebaut ist. Du musst Dich schon damit beschäftigen, wie Drupal-Templates aufgebaut sind. Dein Quellcode zeigt kein Drupal-Template, sondern reines HTML.
Danke schon mal für die
am 01.12.2014 - 12:29 Uhr
Danke schon mal für die Links.
Ist ein gut dokumentiertes Theme zu empfehlen?
Habe mit das Standart Batrik theme angeschaut und... Naja ist mir zu unübersichtlich...
@ tobi-berlin
Ja das weis ich, das es reines HTML ist.. Es geht ja auch darum, das ganze jetzt umzuschreiben. Ich habe mich schon damit auseinander gesetzt was die page template angeht. Allerdings bin ich auch auf html template datein gestoßen....
Wenn Du eine Frage zum
am 01.12.2014 - 12:39 Uhr
Wenn Du eine Frage zum Drupal-Template stellst, sollten doch auch die Infos zum Template hier gepostet werden, der HTML-Quellcode hat damit gar nichts zu tun.
Ansonsten: https://www.drupal.org/documentation/theme
Ok hab da mal
am 01.12.2014 - 14:02 Uhr
Ok hab da mal reingeschaut.
Wenn ich das richtig verstanden habe, dann kann ich da die Standart page template kopieren und meine CSS dann an diese anpassen?
Als Beispiel....
<div id="page">
<div id="header">
<div id="header_img">
hier kommt dann das LOGO also mein Banner rein mit der php logo abfrage?
<div id="header_center">
hier sitzt dann meine Navigation......
</div>
</div>
</div> <!-- /header -->
Habe ich das so richtig Interpretiert?
ließ dich in Theming ein wenig ein
am 01.12.2014 - 14:30 Uhr
und lade dir ZEN runter.
ZEN ist ein Grundtemplate, das hervorragend dokumentiert ist.
Mache dich mit dem Thema "subtheming" vertraut.
Das alles hier zu beschreiben, würde den Rahmen des Forums sprengen.
Theming ist NICHT mit einer Datei zu erledigen.
Danke Ronald. Das ist mir
am 01.12.2014 - 16:24 Uhr
Danke Ronald.
Das ist mir schon bewusst, das es nicht an einer datei getan ist.. Lese mich gerade wenn auch leider englisch in das thema genauer ein.
Eine frage aber gleich noch, muss ich wenn ich im Header noch andere DIV elemente habe diese als region bzw block in der info datei mit einschreiben? Oder reicht es, wenn ich den Header deklariere und dann die jewailigen php scripte in den DIV lege.
Danke für den Tipp mit dem ZEN Theme...
Also ich würde eher damit
am 01.12.2014 - 16:35 Uhr
Also ich würde eher damit anfangen, dass du Bartik einfach als ein Subtheme aufbaust und damit dann loslegst. Zen wird für die meisten zu kompliziert sein, weil es ja wieder ein ganz anderes Theme ist.
Im Grunde musst Du nur verstehen, wie sich Inhalte in einem Drupaltheme ausgeben. Es gibt Templates die für unterschiedliche Funktionen eines Themes zuständig sind. Im Grunde mit dem Basiswissen kann so ziemlich jedes HTML Theme in Drupal wandeln. Ich habe schon diverse HTML5 Themes in Drupal gewandelt.
Im Grunde läuft das meist so ab, dass Du es zerschnibbelst in Teilbereiche. Bereiche die Du nutzt für Content Ausgabe. Ideal ist natürlich sowas wie ein reset CSS Skript oder einfach per Template alles CSS Sheets deaktivieren. CSS Code musst Du abgleichen mit dem was Drupal nutzt.
Zen ist ganz nett um überhaupt zu sehen was es heisst ein ganz eigenes Theme zu erstellen, also mal unter den Motor schauen, denke aber um ein einfaches Theme zu wandeln, würde ich was leichtes als Basis bzw. subtheme nehmen und daran erstmal was üben. Ich zumindest war am Anfang mit Zen überfordert bis man den Aufbau davon verstanden hat. Da war es anfangs einfach eine abwandlung von Bartik zu machen.
Aktuell konvertiere ich mit so grundtemplates, die man sich so mit der Zeit plus guten Code angesammelt hat vieles Templates recht schnell und unkompliziert in ein funktionierendes Drupal Theme.
Wo liegt denn genau der vor
am 01.12.2014 - 16:48 Uhr
Wo liegt denn genau der vor und nachteil von subthemes? Ist es denn emphelenswert, für mein vorhaben so ein sutheme zu nutzen?
Noch mal eine Übersicht, wie der Umfang meiner seite werden soll.
Bergrüßungsseite
News Seite
Forum
Aktivitäten
Live-stream
Events
Wiki
Downloads
Interner bereich nur für Member
seperates forum (insofern man im Forum keine geschlossenen bereiche deklarieren kann)
Memberliste
Was empfiehlt sich denn da?
Der Vorteil von Subtheme ist
am 01.12.2014 - 16:57 Uhr
Der Vorteil von Subtheme ist die Möglichkeit nicht alles zu ändern, sondern nur das was man braucht und wenn man etwas falsch macht immerhin mit löschen der betreffenden Zeilen/Dateien, wieder eine funktionierende Seite zu haben.
Ansonsten ist ein Subtheme insgesamt langsamer, weil es halt auf einem anderen Theme aufbaut. Wer eine schnelle Seite aufbauen will, sollte nach Möglichkeit einfach ein Theme Clonen mit anderen namen(also auch funktionen usw. passend machen in den Template und info datei) und dann loslegen.
Dein Projekt klingt schon mal fürn ersten Wurf herausfordernd.
Ich persönlich finde Boostrap als Theme besser als zen, aber das ist nur ne persönliche Meinung. Bootstrap ist nämlich im Internet auf der Herstellerseite sehr gut erläutert und auch sehr frisch gehalten.
Die Frage ist immer, muss es responsive sein, full responsive oder limitiert auf 920p Grid. Ich würde aufjedenfall in die Theorie etwas reinstecken an Zeit, denn so click clack fertig ist Drupal vielleicht die falsche Wahl und Du wärst bei Wordpress eventuell besser aufgehoben. Alternativ viellecht Themes abklappern hier welches dein Konzept am besten abbildet.
Ob drupal oder WordPress ist
am 01.12.2014 - 17:35 Uhr
Ob drupal oder WordPress ist natürlich eine berechtigte Frage.
Beide haben ihre vor und Nachteile soviel ist sicher. Schau mir auch beide an und kann nicht nicht so wirklich entscheiden.
Bei drupal zum Beispiel finde ich das mit dem Login und der nutzerverwaltung von Vorteil, da dies bei WordPress nicht direkt gegeben ist.
Das diese Seite nicht in 2 Tagen steht ist mir voll bewusst und auch nicht das Ziel. Das wichtigste ist erstmal das Layout umzusetzen und das Forum zum laufen zu bekommen. Alles andere soll dann nach und nach kommen.
Ein responsive Design wäre natürlich von Vorteil. Allerdings habe ich mich mit dessen Programmierung noch nicht beschäftigt und das würde mein können übersteigen. Auch mit der Grid Programmierung habe ich mich noch nicht auseinandergesetzt.
Für weite nützliche Seiten vorzugsweise auf Deutsch zum Thema drupal wäre ich dennoch dankbar
Dein Vorhaben sprich schon für Drupal
am 01.12.2014 - 21:35 Uhr
Aber ehe du mit dem Designen beginnst, solltest du dich tiefer mit Drupal beschäftigen.
Dazu braucht es etwas Zeit (je nach Vorkenntnissen mehr oder weniger), eine Testinstallation, und Lernmaterial.
Lernmaterial wirst du reichlich finden. Es gibt viele Einsteigertutorials - auch in deutsch.
Hier ein Einstieg in eine Einführungsreihe,
Hier ein kurzes Video zum Theming
Bei direkten Fragen oder einzelnen Problemen, hilft dieses Forum sehr gut weiter.
Ich kann nur Dir kurz
am 02.12.2014 - 14:15 Uhr
Ich kann nur Dir kurz erläutern wie mein Weg zu Drupal war.
Du musst eigentlich von allem was wissen und probieren um am Ende deine Idee/Vision einer Website so elegant und effizient umzusetzen mit Drupal.
Erstmal muss man sich über Drupal ohne Module also Core Übersicht verschaffen:
Content Types
Felder
Taxonomy
Roles & Rechtesystem
Pathsystem
Theme
Caching
Anschliessend solltest Du Dich mit "must have" Modulen beschäftigen, die in der Regel gebraucht werden um Drupal zu erweitern, dass es auch mehr kann.
Module die meiner Meinung nach wichtig wären(ich erwähne nicht die Module die man zusätzlich braucht um z.B. Views in Betrieb zu nehmen, das sollte man in den Basics lernen, dass Module teils andere Module vorraussetzen):
Views
Rules
Display Suite
pathauto(interessant wenn man mehr als nur paar Basic Seiten benutzen will und nen anständiges Pathsystem braucht)
token
devel(nur relevant wenn man viel selbst templaten will und die Felderbezeichnungen braucht oder generell unter der Haube schauen muss für komplexere aufgaben, entwicklerrelevantes Tool)
Meiner Meinung nach bilden diese Module bei mir zumindest bei fast allen Projekten bisher die Basis.
Wer noch Backup System braucht bzw. noch automatisierte Cron Jobs machen muss, import/export von Daten usw. es gibt x viele Module, die man für fast jedes Problem finden kann.
Nicht jedes ist aber effektiv oder ist wichtig.
Anschliessend macht man sich mit Templates vertraut, wie überschreibe ich mit eigenen Templates, wozu gibt es templates.
Um effektiv mit Drupal zu arbeiten muss man sich schon einiges an Basiswissen aneignen. Auch sollte man in php, css,html5, java/jquer fit sein, zumindest soweit umfangreich, dass man individuelle Anforderung selbständig gelöst bekommt. Desto besonderer eure Drupal Installation werden soll, steigern sich exponentiell auch die Anforderungen und Entwicklungszeit.
Es gibt aber auch paar Schattenseiten an Drupal, es ist umfangreich wenn man stark von den Vorgaben abweichen will. Desto mehr Du individualität haben willst, desto mehr Zeit wird es Dich kosten, denn die Drupal API bietet nicht immer triviale erklärungen anhand von täglichen Beispielen. Man ist eigentlich an einem Punkt ein Lösungssucher statt Entwickler.
Wichtige Grundregel:
Versuche Drupal Konform wie möglich zu bleiben, veränderte oder hacke in Modulen nicht rum. Nutze die API von Drupal statt datenbank Hacks per php sql oder so. Versuche dein Projekt so konform wie möglich zu halten damit updates auch klappen und die Sicherheit deiner Seite nicht gefährdet wird.
Im Grunde ist Drupal wie Lego, die Grenzen des Systems sind kreativität und Zeit. Nicht alles ist trivial oder elegant, aber der Erfolg ist der Weg der Kompromisse und das beste draus zu holen.
Ich würde grundsätzlich für umfangreiche Projekte mindestens 2 Monate lernen ansetzen. Sogar Leute die schon über 2 Jahre mit Drupal arbeiten haben nicht mal 70% Übersicht über alles was Drupal kann oder können jedes Problem auf anhieb lösen. Drupal ist eine Erfahrungssache und wie man sein Webprojekt realisiert ist letzendlich eine Typsache.
Ich kann nur sagen, die guten Bücher in English, die man auch über amazon bestellen kann sind recht gut umschrieben und helfen gut. Auch helfen blog Seiten von Drupalcracks. Vieles über Drupal ist aber auch nicht immer richtig, daher die perfekte Lösung muss man sich selbst erarbeiten. Es gibt wenig Anleitungen, die genau das Problem das man hat auch löst, aber es gibt genug Ansätze die man dann verwerten kann.
Grundsätzlich anhand deiner Fragen rate ich Dir erstmal mit Spassprojekten zu üben und den Arbeits und Entwicklungsflow von Drupal zu probieren und dann erst was richtiges aufbauen. Das erste Projekt scheitert meist an der Kenntniss.
Anfänger neigen dazu
am 02.12.2014 - 14:46 Uhr
Erfahrungen und Wissen anderer Systeme auf Drupal anwenden zu wollen, und statt Drupal zu verwenden, es auszutricksen.
Versuche nicht, Drupal zu umgehen. Lasse dich auf den "Drupal way" ein, spiele viel herum.
Den Genialität erschließt sich einem Neuling nicht sofort. Nimm dir Zeit.
Danke
am 02.12.2014 - 21:22 Uhr
Danke erstmal soweit an euch...
Bin gerade dabei mir anhand der page.tmp.php und meiner CSS das layout umzusetzen. Komme damit bis jetzt auch gut Voran. Was die blöcke betrifft funktioniert das ganze bis jetzt auch.
Hier geht es zur Seite
Ich habe bis zum endgültigem Ergebniss auch ca 2-3 Monate geplant.
Danke für den Tipp mit den grundsätzlichen Modulen. Werde diese genauer unter betracht nehmen, wenn das layout soweit steht.
Allerdings stoße ich auf Variablen, die ich mir noch nicht erklären kann. Da wären:
$breadcrumb
Was bewirk diese Variable?
Mystery
am 02.12.2014 - 22:46 Uhr
$breadcrumb
Was bewirk diese Variable?
Aus Wikipedia :-)
Doch der zweite Versuch gelingt: Dieses Mal haben Hänsel und Gretel nur eine Scheibe Brot dabei, die Hänsel zerbröckelt, um eine Spur zu legen. Diese wird jedoch von Vögeln gefressen. Dadurch finden die Kinder nicht mehr nach Hause und verirren sich. Am dritten Tag finden die beiden ein Häuschen, das ganz aus Brot, Kuchen und Zucker hergestellt ist.
<strong>Lieber Goekmen</strong>
am 02.12.2014 - 23:40 Uhr
Sehr geistreicher und vorallem hilfreicher Beitrag
:-)
Dann such ich mal die Brotkrümmel auf meiner Seite....