HTML en CSS in Wordpress

[Bassieboy35]

Hoi,

Voor het vak informatica moet ik voor de 3^e keer een website maken (als eindopdracht van het vak informatica). Ik zeg hier wel even bij dat informatica mijn extra vak is, dat betekent dat ik hier geen les in heb en dat ik het vak voor 90%-95% zelfstandig moet doen. Dit keer een Wordpress, een geheel nieuw programma voor mij. De opdracht is eigenlijk vrij simpel; maak een website in Wordpress. Er zitten verder dus geen eisen aan, alleen ik ga er vanuit dat er wel een beetje HTML en CSS moet inzitten. Echter is dit een beetje mijn struikelblok. De talen kan ik op zich wel, maar op de een of andere manier lukt het mij niet de manier waarop HTML en CSS gepresenteerd wordt onder de knie te krijgen. Ik heb een template op internet gezocht en deze voor mijn website gebruikt. Mocht dat van belang zijn, de template heet: 'Garage'. Mijn website gaat dan ook over auto's.

De foto in de spoiler geeft een beetje het beeld van mijn website. Wat ik allemaal wil veranderen is mij zelf nog niet helemaal duidelijk. De template oogt wel goed, het bovenste menu wil ik in ieder geval weghalen en zou de titel bovenaan wat groter maken.

Ik zag trouwens ook dat er plug-ins bestonden. Heb er al een gekozen die de reacties uitschakelt voor de gehele website, maar dit kan ook via de template zelf. Alleen ben wel benieuwd aan wat voor soort dingen ik moet denken.

Om een lang verhaal kort te maken, ik zoek dus iemand die een beetje verstand heeft van Wordpress (en ook HTML en CSS) en wat info over plug-ins.

Alvast bedankt!

[Grand Theft Auto TOM]

Ik heb wel kennis van HTML en CSS, maar minder van WordPress (al heb ik er wel een tijdje mee gewerkt voor een project, maar dat was 'onder begeleiding' van een klasgenoot die er meer ervaren mee is). Zelfde geldt dan voor de plugins. Wat wil je precies weten? Want uitleggen hoe HTML/CSS in elkaar zit is natuurlijk nogal veel werk. Dus laten we om te beginnen anders eens te dingen bespreken die je graag wilt veranderen aan de template.

Je zegt dat je het bovenste menu weg wilt halen. Ik weet in elk geval dat je dit eenvoudig kunt doen. Ga hiervoor in de backend van WordPress naar Appearance > Customize > Navigation en kies bij 'Top menu' de optie '-- Select --'. Klik vervolgens op 'Save and Publish' en dat menu zou weg moeten zijn als het goed is.

Je wilt ook de tekst bovenin groter maken. Helaas weet ik echter niet meer hoe dat moet. Het is ook al even geleden dat ik met WordPress gewerkt heb. Ik geloof dat je dit middels de editor kunt aanpassen met behulp van CSS, maar soms kan dit ook bij de instellingen voor de template zelf.

Hopelijk kun je in elk geval nu dat nutteloze menu bovenin weghalen. Weet in elk geval zeker dat het bij mij wel zo gegaan is zoals ik uitgelegd heb.

[Kai-ShockWave]

Gebruik als eerste de instellingen van Wordpress zelf om dingen in of uit te schakelen. Zo kun je per bericht/pagina bepalen of je reacties wilt etc. Dit hoef je niet perse in je template te wijzigen, dit doet Wordpress voor je. Naast HTML en CSS maakt Wordpress gebruik van PHP om je content te laden, zoals menu's, pagina-content en widgets. Wil je dus echt onderdelen van je template verschuiven of weghalen, dan moet je ook wat ervaring hebben met PHP om te weten wat je moet weghalen. Een kleine typfout in php of iets teveel verwijderd kan al zorgen dat je template niet meer werkt.

Via Weergave > Bewerken krijg je een overzicht van al je bestanden die in je template staan. De style.css is je algemene CSS bestand waar je alles kunt aanpassen. De overige bestanden zijn je HTML/PHP templates. Simpele themes maken gebruik van 1 CSS-stylesheet, en uitgebreide hebben weer meerdere waardoor je even op zoek moet gaan in welke stylesheet ze staan. Handige tool in je browser is 'Element inspecteren' om te kijken hoe een css-class heet.

Zoals Tom al aangaf kun je het menu makkelijk zelf uitschakelen via Wordpress. Mocht dat niet werken dan moet je het menu weghalen in header.php

[Hanneswasco]

Ik ken niet al te veel van Wordpress en ook van HTML en CSS ken ik enkel de basis, maar ik wil je wel graag een tip geven. Responsive web design is tegenwoordig hot, dus als ik jou was zou ik dat ook zeker toepassen in je website, mits dit niet te veel aanpassingen in de template vraagt. Responsive web design is gemakkelijk gezegd: je website automatisch laten aanpassen aan het scherm van de gebruiker, en dan vooral aan de grootte van zijn scherm. Bij de voorbeeld-afbeelding die je hebt getoond zie ik dat maar de helft van de breedte van het scherm gebruikt wordt, en dat staat niet zo mooi. Je hebt ook het andere uiterste: op een smartphone zal het misschien moeilijk worden om het te lezen en dan kan je er voor kiezen om de onnodige afbeeldingen niet weer te geven, het menu achter een knopje te verschuilen, ...

Ik antwoord hier niet op je vraag, maar ik dacht er onmiddellijk aan toen ik je voorbeeld zag, dus deel het maar even met je.

[Bassieboy35]

Het menu is weggewerkt, ik moest even een leeg menu aanmaken en die aan het bovenste menu toewijzen. Dat is dus verholpen. Ik heb nu ook de grootte van de titel kunnen bewerken, alleen is die nu precies op de plek waar de zoekbalk staat gesprongen. Dat moet ik even zien te herstellen. Wat ik eerst nog niet zei, is dat ik eigenlijk de zoekbalk in het menu aan de rechterkant wil plaatsen. Als ik het dus goed begrijp moet ik dat met PHP doen volgens Kai? Het element inspecteren wist ik van af, maar soms zijn dingen nog wel moeilijk te vinden. Nu heb ik dus al wel wat dingetjes kunnen vinden.

Hannes, ik denk dat jij het verhaal van percentages in plaats van pixels bedoeld? Dat wil ik zoveel mogelijk gaan doen, maar ben er al wel achter dat dit wat lastiger is dan bij mijn vorige website. Zo heb ik de slider gevonden, maar die staat al op 100%. Het is dus weer een apart vak, hoe dat vak groter te krijgen is zou ik zo gauw niet weten. Mocht dat als nog kunnen, betekent het ook dat de rest van de onderdelen verbreed moeten worden, op zich geen ramp, maar dat wordt dan wel puzzelen.

Is er iemand die misschien die in staat is persoonlijk te helpen? Via een forum kan het natuurlijk altijd, maar dat is vrij ingewikkeld als jullie de HTML en CSS bestanden niet tot jullie beschikking hebben.

EDIT:

Ik heb trouwens ook een table, maar die lijnt op de een of andere manier vrij raar uit. Kan iemand er even naar kijken?

<tr>
<td>T</td>
<td>Kombi</td>
<td>Een stationwagen.</td>
</tr>
<tr>
<td>V</td>
<td>Vorn</td>
<td>Uitvoering waar de motor voorin ligt, als het gebruikelijk is wanneer de motor achterin ligt.</td>
</tr>

[Lars]

Geen idee of je dit ook voor publiek gooit, maar wordpress is echt voer voor hackers.

[Rutger.]

Geen idee of je dit ook voor publiek gooit, maar wordpress is echt voer voor hackers.

Hij heeft de website wel online gehost staan maar zolang hij de laatste versie van WordPress gebruikt en aangezien dit maar een klein schoolprojectje is hoeft hij zich nergens druk om te maken

[Bassieboy35]

Ik ben nog wat opgeschoten qua dingen, maar dat zijn meer de kleine details. Alleen zit ik een beetje vast op een paar puntjes:

-Het is de bedoeling dat ik uiteindelijk ook auto's met specificaties in een tabel ga zetten. Hoe/waar kan ik dat het beste doen? In de editor of met HTML en CSS? Alleen zie ik geen HTML bestanden die gelinkt zijn aan elk een pagina, dat had ik bij mijn vorige website wel.

-De tabel op de Mercedes pagina doet het wel, maar sommige rijen gaan naast de tabel staan. Dat die fout kan ik niet herkennen.

-Hoor dat de slider en de onderste balk niet goed staan, alleen heb hier zelf geen last. Ik kan dit niet meer terug vinden en ook niet door middel van element inspecteren.

Het is misschien wat makkelijker als ik de site geef, dat is wat interactiever dan een foto. http://15519.cn-informatica.nl/over/

Ik weet niet als iemand mij hiermee kan helpen?

[Grand Theft Auto TOM]

Bas, zo'n tabel kun je het beste met HTML/CSS maken. Als het goed is zou je in staat moeten zijn iedere 'post' die je hebt aangemaakt te bewerken op die manier. Je ziet dan rechtsboven twee tabbladen: Visual en Text. Om het HTML-gedeelte te bekijken en aan te passen dien je bij Text te zijn. Ik neem aan dat dat ook is waar je op doelt?

Wat betreft het probleem met de uitlijning van de tabel... Ik heb de code even nagecheckt en er zaten een paar kleine onnodige stukjes tussen. Heb 'm voor je verbeterd (en zelf uiteraard ook even getest voor de zekerheid):

<table>
<tbody>
<tr>
<th>Letter</th>
<th>Betekenis</th>
<th>Opmerking</th>
</tr>
<tr>
<td>C</td>
<td>Coupe</td>
<td>Uitvoering zonder aparte deuren voor de personen achterin.</td>
</tr>
<tr>
<td>D</td>
<td>Diesel</td>
<td>Auto met een dieselmotor.</td>
</tr>
<tr>
<td>E</td>
<td>Einspritzung</td>
<td>Auto met een injectiemotor.</td>
</tr>
<tr>
<td>G</td>
<td>Gelände</td>
<td>Een tereinwagen.</td>
</tr>
<tr>
<td>H</td>
<td>Heck</td>
<td>Auto met een motor achterin</td>
</tr>
<tr>
<td>S</td>
<td>Sport<br />
Super<br />
Sonderklasse</td>
<td>Een sportwagen.<br />
Auto’s die ‘extreem’ zijn in een bepaalde eigenschap.<br />
Extra-luxe uitvoeringen van de S-klasse.</td>
</tr>
<tr>
<td>T</td>
<td>Kombi</td>
<td>Een stationwagen.</td>
</tr>
<tr>
<td>V</td>
<td>Vorn</td>
<td>Uitvoering waar de motor voorin ligt, als het gebruikelijk is wanneer de motor achterin ligt.</td>
</tr>
<tr>
<td>K</td>
<td>Kurz<br />
Kompressor<br />
Kompakt</td>
<td>Auto’s met een ingekort onderstel.<br />
Auto’s met een compressor bij de motor ingebouwd.<br />
Samenvoeging van verschillende typen tot één type.</td>
</tr>
<tr>
<td>L</td>
<td>Lang<br />
Leicht</td>
<td>Auto’s met een verlengd onderstel.<br />
Auto’s die extra licht gebouwd zijn.</td>
</tr>
</tbody>
</table>

Voor als je benieuwd bent naar wat de fout was: er stond een paar keer:

<td rowspan="3">

Het enige dat je echter nodig hebt is <td>.

Tot slot: de slider lijkt bij mij gewoon goed. Wel zie ik helemaal onderaan de pagina in de contentwrapper een stukje uitsteken. In de code kan ik daar niets van terugvinden. Misschien kijk ik er wel overheen, maar goed... Het probleem dat volgens jou door sommigen genoemd wordt kan ik in ieder geval niet plaatsen. Misschien dat iemand überhaupt eens een screentje kan maken van de situatie daar?

Het enige dat ik als reden voor een eventueel probleem met de positie van de slider/het gedeelte daaronder is de beeldschermresolutie. Sommige templates zijn fixed, sommige niet. Dat heeft invloed op de manier waarop content weergegeven wordt op verschillende display's.

Bewerkt: 7 maart 2014 door Grand Theft Auto TOM

[Bassieboy35]

De tabel werkt nu, dankjewel! Het enigste wat ik nog niet snap is hoe ik eigenschappen aan tabellen kan toevoegen. En waar het precies moet staan, omdat er geen HTML pagina bij een pagina is.

Een voorbeeld van een rare indeling:

[Grand Theft Auto TOM]

Geen dank Bas!

Hier de beloofde code voor een tabel met twee samengevoegde cellen (ook meteen afbeelding bijgevoegd zodat je alleen maar een link naar die afbeelding hoeft in te voegen):

<table class="tg">
<tr>
<th class="tg-031e" colspan="2"><center><img src="http://i62.tinypic.com/sqtcvd.png"></center></th>
</tr>
<tr>
<td class="tg-031e">Test1</td>
<td class="tg-031e">Test2</td>
</tr>
<tr>
<td class="tg-031e">Test3</td>
<td class="tg-031e">Test4</td>
</tr>
<tr>
<td class="tg-031e">Test5</td>
<td class="tg-031e">Test6</td>
</tr>
</table>

Als je meer over die eigenschappen wilt leren moet je dat gewoon even aangeven. Je kunt heel veel met tabellen in HTML tegenwoordig. Er is dan ook een scala aan opmaakmogelijkheden voor.

[.Timothy]

Misschien is het wel een idee om even uit te leggen waar die rowspan en colspan voor dienen, zodat Bas dezelfde fout niet opnieuw maakt.

Neem vooral op de onderstaande pagina's eens een kijkje:

http://www.w3.org/2009/cheatsheet/

http://www.w3.org/TR/html401/

http://www.w3.org/TR/html5/

http://www.w3schools.com/html/default.asp

[Bassieboy35]

Waar ze voor dienen weet ik wel, voor het samenvoegen van cellen in de breedte of hoogte. Maar dat was hier blijkbaar niet nodig.

Weet iemand trouwens wel hoe je tabellen naast elkaar plaatst? Dat wil namelijk niet lukken.

[.Timothy]

Dan moet je even de CSS-waarde van display op inline-table zetten, dan gaat het wel goed. Standaard staat dat op table, wat ongeveer gelijk is aan block en ervoor zorgt dat er niks anders op een regel kan.