Uitlijning van site

Ik heb naar je site gekeken.
De marge van het ‘content’-gedeelte stond ‘verkeerd’.

== == == Aanpassingen

#content {
	margin: 0 auto;
}

Nu is de koptekst van de pagina niet mooi / te lang…

• pas de tekst aan ‘de hobby fotograaf bij uitstek’ [reivax wordt al vele malen genoemd…]
• pas ook hier wat code toe:

  h2.entry-title{
  	max-width:90%;
  	margin:120px auto;
  	padding:0 220px
  }

  Je ziet met deze dominante tekst van deze lengte blijft ’t behelpen.
  Suggestie: gebruik in dit geval bijv een afbeelding met een tekst.[maak deze in een grafisch programma] Die kan je manipuleren tot je tevreden bent. Een ‘koptekst’ verspringt steeds bij het aanpassen van de site. Daarnaast ziet het huidige geheel er heel anders uit als hij wordt getoond op bijv een klein scherm / tablet, telefoon etc.

== == == WAT NU TE DOEN MET DEZE CODE…

Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

Heb je nog geen childtheme?

1. installeer en activeer ‘one click childtheme’-plug-in
2. activeer de originele theme
3. Dashboard > weergave > child theme
4. beantwoordt de vragen op het scherm
   >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
5. Activeer het childtheme.

==

6. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
   – Maak je aanpassingen in style.css van het childtheme;

• Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
• open de map van je childtheme
• gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
• voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
• UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
• browser: druk <CTRL-F5> om je browser te verversen
• bekijk het resultaaat

– mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

== == == Extra
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’, of installeer dan bijv de browser-add-on ‘firebug’.

Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

== == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
== == ==

Da’s logisch…;-)

Daarom ook de ‘wat nu te doen met deze code…
Volg die instructie -stap-voor-stap- en je komt waar je wezen moet…

Overigens…
Ik heb je site verder bekeken, en zie dat je een thema ‘photolistic’ hebt geïnstalleerd. Dat thema heeft de volgende waarschuwing in de koptekst:

This theme hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Gegeven deze situatie is het het meest verstandig EERST een ander theme te installeren.

== == == Installeren nieuw theme
In WP zijn de INHOUD [berichten / pagina’s / afbeeldingen etc.] GESCHEIDEN van de TECHNIEK. Dat maakt beheer en onderhoud overzichtelijker. Verder voordeel is dat het [relatief] eenvoudig is om het UITERLIJK van de site te veranderen, terwijl de inhoud behouden blijft. Dit maakt het vergelijkbaar met het aantrekken van andere kledingstukken; De persoon blijft dezelfde het uiterlijk verandert…;)

Kijk eens naar [bijvoorbeeld] de volgende thema’s:

• hatch
• fifteen
• fukasawa
• capture for wordpress
• make
• snapshot
• waterlilly
• …WP heeft 1000-den gratis themes om uit te kiezen…

== == == Op zoek naar een thema >>> WP geïnstalleerd: en wat nu…?

1. bepaal wat voor een soort / type site je wilt hebben
2. voor wie de site bedoeld is en welke wensen en eisen je ‘gebruikers’ hebben
3. bekijk welke zaken daarbij horen / passen op het gebied van

• uiterlijk: indeling, vorm, kleuren etc.
• functionaliteit: blog, portfolio, krant, webwinkel, vereniging etc.
• etc. etc.

• ga op zoek naar een THEMA dat zoveel mogelijk past bij het bovenstaande
• Dashboard >weergave Thema’s > nieuwe toevoegen
• klik ‘eigenschap filter’
• vink AAN: ‘fotoblogger’ // ‘schaalbare layout’ // ‘vloeiende layout’ // ‘stijlbewerker’
• klik ‘filters toepassen’
• bekijk en onderzoek de resultaten
• maak je niet druk om kleuren, lettertypen etc. Die zijn eenvoudig aan te passen
• richt je vooral op layout / opbouw van de pagina’s / berichten
• kijk daarna op de benodigde functionaliteit van de meest favoriete thema’s
• maak een lijstje van de ‘meest favoriete kanshebbers’

== == ==

• probeer wat thema’s uit; WP heeft vele 10.000-den gratis thema’s, die doorgaans van goede kwaliteit zijn. Begin daar maar eens mee.
• Installeer thema’s mbv je dashboard, kijk rond en probeer of ze voldoen aan je wensen, aanpasbaarheid etc.

== == == proberen thema’s uit ’t lijstje van favoriete kanshebbers

• dashboard > weergave > thema’s > nieuwe toevoegen
• type naam van ‘kanshebber’ in het zoekvak
• gevonden? > klik installeren [de inhoud van je site blijft bewaard; alleen het UITERLIJK [nieuwe jas] verandert
• ben je niet tevreden? Niks aan de hand! gewoon een volgend thema installeren en activeren om te kijken of dat beter is. De INHOUD van je site blijft gewoon in orde… no worries.
• Heb je een mooi thema gevonden? Joepie!
• her-activeer je menu / widgets: dashboard > weergave > menu’s > selecteer je menu [keuzevak li-boven en sla de wijzigingen op; je bestaande menu is weer actief
• Tijd om de ’toeters en bellen’ te installeren zoals widgets, social media, formulieren, etc. etc. Leef je uit

== == ==
Wil je ongeacht de risico’s koste wat kost de huidige situatie handhaven?

1. gebruik FTP om je site te benaderen
2. open het bestand ‘style.css’ met een code-editor’ bijvoorbeeld ‘NOTEPAD++’ [GRATIS]
3. plaats de code [KOPIEREN > PLAKKEN] uit het eerdere bericht HELEMAAL ONDERAAN > sla alle wijzigingen op
4. FTP: UPload nu de aangepaste ‘style.css’ weer naar je site en OVERSCHRIJF de oude versie

…Beginner / gevorderd / expert…
Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉 [Een heel klein beetje kennis van PHP helpt ook, maar is doorgaans niet direct nodig]
Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.

Veel plezier!
== == == leesvoer
http://www.w3schools.com/css/default.asp
http://codex.wordpress.org/Getting_Started_with_WordPress
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Finding_Your_CSS_Styles
http://codex.wordpress.org/FAQ_Troubleshooting
http://codex.wordpress.org/Backing_Up_Your_Database
Natuurlijk zijn er ook trainingen op het internet te vinden…
bijv. [engels, betaald] Lynda.com:
http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.html
Natuurlijk zijn we op dit forum bereid je verder te helpen met je vragen / keuzes…