Eigen HTML/CSS toevoegen aan Stark theme

Hoi allemaal,

Het is trouwens gelukt! Ik heb mijn eigen theme aangemaakt!
Het is afgeleid van het Stark theme.
Nu heb ik alleen een vraag. Mijn hele theme is leeg(denk bij iedereen wel die eigen theme maakt), maar het lijkt mij onzin om je HTML/CSS opnieuw te moeten schrijven toch?
Dus mijn vraag of het mogelijk is om het door mij gemaakte CSS toe te voegen aan de lege theme, zodat je de opmaak wel hebt.

Ik weet dat het in Wordpress mogelijk is, maar hier ook?

Alvast bedankt!

Groeten,

Esther

Drupalversie:

7.x

Auteur:

Estheer

Datum van inzending:

dinsdag 17 januari 2012 - 12:16

Door Webulab op 17 januari, 2012 - 13:07

In de info file van je thema voeg je het volgende toe om je eigen stylesheet te gebruiken:
stylesheets[all][] = style.css
In style.css in je thema map kan je nu je CSS gaan definiëren.

Je kan ook de standaard templates gaan overschrijven. Maak een map in je theme map genaamd "templates" Stark gebruikt de standaard templates van elke module dus je zal van elke module de template moeten gaan kopiëren naar je theme en dan aanpassen. Bijvoorbeeld in modules/system/ zit page.tpl.php en in modules/node/ zit node.tpl.php enzovoort.

Als je van plan bent om veel aanpassingen te doen aan de HTML zou ik je aanraden om gebruik te maken van het Zen theme of Tao theme. Die leveren alle core templates al mee en die templates zijn beter gedocumenteerd.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 17 januari, 2012 - 13:34

Dankje!

Ik ga het uitvogelen met de themes die jij zei!

Met vriendelijke groet,

Esther

Door Estheer op 17 januari, 2012 - 14:08

Sorry, maar met Zen loop ik gigantisch vast bij stap 4..
Ik heb geen idee hoe je dat moet veranderen.
En is het erg als je veel veranderd en dat in de Stark theme doet?

Met vriendelijke groet,

Esther

Door Estheer op 17 januari, 2012 - 14:26

Qua veranderen valt mee. Achtergrond blijft het zelfde, alleen komen er veel Jquery animaties erin. Dus ik vraag me waf wat je mij aanraad?

Met vriendelijke groet,

Esther

Door Webulab op 17 januari, 2012 - 15:38

Je kan template gaan overladen met Stark, hoor, maar met Zen is het iets makkelijker omdat die standaard al niet de core templates gebruikt en die templates zijn beter gedocumenteerd. Maar als je weinig aanpassingen moet doen en je kan het prima met CSS, ga dan voor Stark. jQuery/Javascript invoegen kan je op dezelfde manier als een stylesheet invoegen. In je theme info bestand zet je gewoon deze lijn:
scripts[] = script.js
Normaal gezien laadt Drupal de jQuery library automatisch dus daar hoef je niks extra voor te doen.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 17 januari, 2012 - 15:51

Dankjewel!
Ben er nu nog mee aan het frutselen. Qua aanpassingen valt het mee, menu, content en wat animaties. Achtergrond blijft gewoon wit dusja.

Ik ga je misschien heel veel vragen hoor, dit is de eerste keer dat ik het helemaal alleen moet doen..

Met vriendelijke groet,

Esther

Door Webulab op 17 januari, 2012 - 15:52

Als je nog vragen hebt, horen we het wel ;)

Nog veel succes!

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 09:51

Ik heb misschien een hele domme vraag, maar hoe kan je precies je templates erin zetten?

Sorry als de vraag misschien heel dom is.

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 10:36

Maak in je theme map een nieuwe map "templates". Kopieer nu de template die je wil wijzigen naar die map. De originele template kan je vinden in de mappen van de modules. Om te weten welke template je kan wijzigen om een bepaald gebied te wijzigen, kan je gebruik maken van de Devel Themer module. Hiermee kan je zoals bij Firebug bijvoorbeeld informatie krijgen hoe een bepaald gebied werd opgebouwd. Dit kan een functie of een template file zijn . Het oorspronkelijke template bestand staat er ook bij vermeld en het is deze dat je moet kopiëren naar je eigen template-map.

Succes.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 11:52

Sorry, ben echt een leek, maar hoe installeer je dat?
Hij staat namelijk bij de admin pagina en dan modules, maar activeren lukt helaas niet..

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 11:58

Download het archief van de project pagina (zie link in mijn vorige post) en daar zal een map in staan. Kopieer deze map naar je module map. Ofwel sites/all/modules of sites/default/modules. Als je geen meerdere websites host met dezelfde Drupal installatie, maakt het niet echt iets uit. Dan ga je naar Admin > Modules en activeer je de module.

Bekijk deze screencast om meer informatie te krijgen over Devel Themer:
http://blip.tv/moshe-weitzman/theme-developer-module-for-drupal-6-screencast-602167

Maar in plaats van de oorspronkelijke template aan te passen, zoals ze in de video zetten, kopieer je het bestand weergegeven "File used" naar je eigen template map (behalve als die er al staat natuurlijk) en doe je daar de aanpassingen. Je zal wel je cache eens moeten clearen als je een template wil overladen.

EDIT:
Sorry had je edit niet gezien. Je moet ook de Devel module installeren eerst.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 12:07

Dankje.

Hij doet het nu wel, dus dat is wel super fijn!
Dus nu even zoeken welke ik moet hebben en dan aanpassen :).

Met vriendelijke groet,

Esther

Door Estheer op 18 januari, 2012 - 13:20

Ik ga je nog een keer lastig vallen hoor.
Ik heb dus de templates nu gekopierd en geplakt zoals je zei.
Hoe zorg je er voor mijn template erin komt?

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 13:46

Als het niet meteen gebeurt, moet je je cache eens legen. Zowel van Drupal als van je browser. Drupal cache legen doe je via Admin > Configuration > Performance > Clear all cache. Schakel ook alle cache methodes uit tijdens het themen. Daarna kan je die weer inschakelen.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 13:53

Gedaan, maar was eigenlijk denk ik niet wat ik bedoelde.
Ik heb gedaan zoals jij (u?) zei, door de templates te kopieren naar drupal/sites/all/themes/templates.
Maar mijn vraag is, moet je nog wat doen met mijn CSS bestanden?

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 14:05

Zeg maar jij ;)

Je moet de stylesheets nog invoegen in je theme. Ik denk dat ik hierboven het ook al eens gezegd heb. Voeg dit toe aan je info file van je theme:
stylesheets[all] = style.css
Maak dan style.css aan in je theme folder en dan kan je daar je CSS in gaan stoppen.

Veel succes.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 14:11

Wauw dankje!

Haha ja klopt, maar ik lees er soms een beetje overheen.
Dus even korte samenvatting;

Gewoon in je info file aangeven dat je een nieuwe stylesheet hebt.
Dan in je theme map( dus bijvoorbeeld "hoi") style.css aanmaken, en dan kan je daar je bestaande CSS invoegen?

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 15:03

Ja, klopt. Drupal zal zelf het CSS bestand invoegen op je pagina.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 15:09

Oke, hier doet hij nog niet zo heel veel.
Heb het idee dat er een bestand verkeerd staat. Doet hij het ook als je bij de "templates" teveel bestanden hebt die overbodig zijn?

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 16:02

Wat voor bestanden staan er dan in templates?
In principe moeten daar alleen de tpl.php bestanden in.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 18 januari, 2012 - 16:15

Ik heb:

block.tpl.php
node.tpl.php
page.tpl ( is ff document zegt ie)
page.tpl.php

Met vriendelijke groet,

Esther

Door Webulab op 18 januari, 2012 - 16:28

Die page.tpl (zonder php bij) mag weg. De rest is oké.

Als je node.tpl.php opent, en bovenaan het document dit toevoegt:

en onderaan het document dit:
-->

Daarna leeg je je cache via Admin > Configuration > Development > Performance en klik je op Clear all cache.

Als je nu een node bekijkt op je website zou die leeg moeten zijn.

Kijk ook of jouw thema is ingeschakeld en dat je niet Stark aan 't gebruiken bent.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 19 januari, 2012 - 12:38

Haha hij doet het nog niet helaas..
Ik zal je wel even een linkje sturen met de printscreen hoe de Drupal website er nu uitziet.

http://www.mijnalbum.nl/GroteFoto-6VW7RGM3.jpg

Met vriendelijke groet,

Esther

Door Webulab op 19 januari, 2012 - 17:38

Wat lukt er exact niet?
Aangezien er bovenaan "Hallloooooo" staat, veronderstel ik dat template edits lukken?
En de tekst is geel dus ik veronderstel ook dat je stylesheet is ingevoegd?

Ik kan natuurlijk van een screenshot niet afleiden wat je allemaal al gedaan hebt.

Drupal websites en modules op maat | Facebook | Twitter

Door Estheer op 20 januari, 2012 - 09:45

Oja klopt, was even aan het uitvogelen.
Maar ik denk dat ik het snap, je moet nu gewoon gaan opmaken naar de stylesheet die je had
(Denk ik?)

Met vriendelijke groet,

Esther

Door Webulab op 20 januari, 2012 - 10:11

Ik ben niet zeker wat je bedoelt met "je moet nu gewoon gaan opmaken naar de stylesheet die je had". De opmaak voor de layout moet je eigenlijk op basis van de HTML gaan maken. Maar als je al een stylesheet hebt met de algmene stijl zoals achtergrond kleur, link kleur, ... kan je die er ook gewoon inzetten.

Drupal websites en modules op maat | Facebook | Twitter