Sugar & Spice – Allerlei opmaak vragen?

Hi,

Ik ben bang voor CSS….vooral omdat ik alles altijd vernaggel als ik dingen aan ga passen…

…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 😉
Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.

1. tenzij je een hamer gebruikt, kan je de boel doorgaans weer herstellen… 😉
2. een computer moppert nooit en lacht je niet uit als je fouten maakt… dus wat is het probleem ;)? Fouten maken = leren…

== == == De Trukendoos…

Werk langzaam en NAUWKEURIG!!

• Werk stap-voor-stap.
• Maak elke stap eerst af
• controleer het resultaat
• Ga daarna pas door naar de volgende stap.

== == == Je hebt wat basisgereedschappen nodig

1. Download, Installeer / gebruik een FTP-programma bv. filezilla[gratis] – http://filezilla-project.org/download.php
   om bestanden op de server te beheren.
   De server is de plek waar de webhost jouw site draait.
   [De beheerder heeft je vast een mail / bestand / papier gegeven met de nodige inlogggegevens.]

>>

2. download EN INSTALLEER een CODE-EDITOR [NIET een wordprocessor] bijv. NOTEPAD++; Als editor is ‘NOTEPAD++’ [gratis] veel meer geschikt, want echte [web]editor.
   Verder is Notepad++ ook te koppelen aan Filezilla [FTP], waardoor het aanpassen straks van CSS en PHP eenvoudiger wordt.

== == == STAP 1 maak een back-up van de database
De database bevat de INHOUD van je bestaande site. Maak regelmatig een backup.
Login als administrator / beheerder van je site

3. Dashboard > Extra > Exporteren
4. kies: Gehele Inhoud
5. Desgevraagd: Installeer en Run Export plugin
6. Sla exportbestand op de PC op

Je hebt nu de INHOUD [=teksten en bijv. plaatjes etc.] veiliggesteld.

== == == STAP 2 maak een backup van de WP-bestanden

7. Gebruik FTP om je site te benaderen
8. Maak een map op je PC
9. selecteer [klik] de map waar je site in staat bijv. ‘http’, ‘httpdocs’, ‘www’, ‘web’, ‘public’ …
10. DOWNload [re-klik] alle bestanden van je site naar de map op je PC

Je hebt nu de WP-installatie en gemaakte aanpassingen aan bijv CSS, HTML etc. veiliggesteld.
== == ==
Maak nu eerst een 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.

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

==

7. 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;

tijd voor een pauze; doe rustig aan en voorkom tijdrovende fouten

== == == Nu het echte werk…

Ik wil graag de font van mijn menubalk aanpassen

8. Plaats onderstaande code in ‘styles.css’ van je CHILDtheme [CT]

voorbeeld – Pas aan naar eigen inzicht:

nav#main-nav ul li {
    font-family: calibri, arial, candara,sans !important;
    font-size:1.25em /*erg groot*/
    font-color:#99cc66;/*appelgroen*/
}

9. browser: druk <CTRL-F5> om je browser te verversen
10. Controleer het resultaat

Opgelet: Lettertypen: Belangrijk om te weten…
Als website bouwer kan je opgeven welke lettertypen je wilt gebruiken voor je site. Dat betekent echter niet automatisch dat BEZOEKERS van je site altijd dat lettertype ook ZIEN.

Dat komt omdat websites de lettertypen gebruiken die bij de bezoeker van je site op de PC staan. Staat het lettertype van jouw site niet op de PC van de bezoeker, dan wordt een vervangend lettertype gebruikt.

Daarom ook is het goede gewoonte om bij de bouw van je site een ‘font-family’ op te geven. Heeft de bezoeker het eerst opgegeven lettertype niet, dan wordt het volgende gebruikt of het daarop volgende etc. Het meest algemene lettertype staat als laatste genoemd; Zoek dus een lijst van fonts bij elkaar dat op elkaar / acceptabel lijkt.
Bijvoorbeeld:
p {
font-family: “Times New Roman”, Georgia, Serif;
}
Om dit probleem op te lossen kan je lettertypen in je site ‘inbakken’. Zo toont je site zoals jij bedoeld hebt, ongeacht of de bezoeker het betreffende lettertype op de PC heeft staan.
Hier vind je de info:
http://www.w3schools.com/css/css3_fonts.asp

’t Is weer tijd voor een pauze; doe rustig aan en voorkom tijdrovende fouten

== == == ik wil graag de kleuren aanpassen…

11. Het is me niet precies duidelijk welke kleuren, van welk element, je wilt aanpassen…
12. Geef eerst aanvullende info…

Graag gedaan.

het randje van de menubalk

Dit randje wordt op dit moment gevormd door het in de x-richting herhalen en naast elkaar plaatsen van een heel klein afbeeldinkje ‘menu-border.png’.
Eén oplossing is dit kleine ding te bewerken = een andere kleur geven met een tekenprogramma [bijv. GIMP gratis] en dat bestand onder DEZELFDE naam weer terug te uploaden en te OVERSCHRIJVEN.

ALTERNATIEF:

ul#nav {
    border-top: solid #99cc66 4px;
    border-bottom: solid #99cc66 4px;
}

nav#main-nav > ul:before, nav#main-nav > ul:after  {
    content: '';
    width: 100%;
    height: 6px;
    display: none;
}

widget title kleur

.widget-title em{
    color:#0E32CF; /*bv intens blauw*/
}

Kleur letter van titel van artikelen & pagina’s:

.entry-title, .page-title {
   color:#ff0000;/*rood*/
}

== == == extra:Zo werkt een [CT] childtheme…

Een CT dient er voor om het origineel te scheiden van de aanpassingen die jij als webbouwer maakt.
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.
== == ==
Wat gebeurt er met de CSS [cascading opmaak / stijlblad] een childtheme…

In een childtheme [en CSS] geldt dat de code die als laatste wordt uitgevoerd, het uiterlijk / acties van de site bepaalt.
bijvoorbeeld:

body{ background-color: #ffffff; /*wit*/
       background-color: #000000; /*zwart*/
}

Resultaat: ‘zwart’.
Dat geldt ook als de opmaakkenmerken 100 regels verderop in het stijlbestand staan!

** ** **
Heb je een CT, dan zal EERST het origineel [parent] doorlopen / getoond worden, DAARNA de opdrachten opgenomen in het CHILDtheme. >>Dat gaat RAZENDSNEL: de site ziet er uit als bedoeld in het childtheme.

Belangrijk om te weten…
De site bestaat uit meer dan een bestand als style.css.
Wil je andere zaken aanpassen, bijv de header of footer, dan moet je mogelijk de bestanden header.php en footer.php aanpassen.
Hoe werkt dat…

LAAT de PARENT INTACT!
Kopieer het aan te passen bestand naar de map van het childtheme.
Maak dan de wijzigingen in het betreffende bestand in het childtheme.

== == ==

als ik nu iets wil toevoegen aan style.css dan zet ik dat in het childtheme ,maar als ik nu iets wil verwijderen of veranderen?

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 😉

De stylesheet van het CT heeft in de basis alleen een ‘kop’ die de koppeling maakt met de parent [het originele theme].
Zolang er niks in staat, gebeurt er niks.

Vervolgens plaats je de gewenste wijzigingen.
Hieronder wat voorbeelden.

Parent:

body {
     font-size: 62.5%; /*grootte van de tekst*/
     background: #fff; /*achtergrondkleur*/
     background-image:url('achtergrond.gif');
        font-family: sans-serif; /*lettertype*/
     line-height: 22px; /*regelafstand*/
     color: #444; /*tekstkleur*/
}

CHILD
Vervolgens hoef je alleen DIE zaken aan te passen of toe te voegen die jij wilt.

body {
     font-size: 45.5%; /*grootte van de tekst kleiner*/
     background: #0000FF; /*achtergrondkleur veranderd*/
     background-image:none; /*achtergrond-afbeelding verwijderd*/
        font-family: universe; /*ander lettertype*/
     line-height: 12px; /*regelafstand kleiner*/
     color: #99cc66; /*tekstkleur appeltjes groen*/
        margin-left:25px; /*marge-links toegevoegd*/
}

Wil je zaken VERWIJDEREN zoals menu-balken, elementen in de lay-out, dan kijk je waar je dat het handigst doet:

• mbv CSS
• door het PHP-bestand aan te passen

Je vertelt niet wat je NIET wilt met een element, maar wat je dan wel wilt

background-image:none; /*achtergrond-afbeelding verwijderd*/

== == ==
Hoe weet je wat je moet aanpassen…

Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel.
Gelukkig zijn daar goede gereedschappen voor.

>>
In je browser: rechtsklik in de browser en kies ‘element inspecteren’
Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

1. re-klik > element inspecteren
2. Het sub-scherm opent:

* bovenin de webpagina
* het sub-cherm met eigen werkbalkje en iconen
* li-onder: scherm met ‘style | computed | event listeners >>’
* re-onder: stijl= css

3. In de sub-scherm: klik het eerste icoon van links [vergrootglas];
4. Beweeg je muis over de webpagina [en klik]. Hiermee selecteer je een element in de webpagina, om daarmee de code zichtbaar te maken in het sub-scherm
5. In het sub-scherm:

* Links: de HTML-code van het gekozen element
* rechts: de stijl =CSS
* klik in de css en verander de waarde; kleur grootte of voeg een regel toe
* controleer in het deel van de webpagina of het gewenste effect wordt bereikt
* Nee? Druk <F5> verversen browser. Probeer iets anders
* Ja: neem de aanpassing op in de ‘style.css’ van je childtheme
== == ==

Hi,

Goed gedaan!
Een CT verandert niets aan de werking van je parenttheme. De boel zou dus nog steeds normaal moeten werken.

OPGELET:
Om een aangebrachte wijziging te zien: Druk <CTRL-F5> om de browser-cache te verversen…

== == ==
Mogelijk is de wijziging die je aan wilt brengen via het dashboard, ook al via CSS in je CT aangepast?? Ook dan is maar de vraag welke opmaak je gaat zien. Da’s overigens prima op te lossen.

Geef ff meer precies aan wat er waar misgaat en hoe je ’t wilt hebben.
Meer info = beter…..;-)