onderwerp widget in kleur
-
hallo allen,
kan ik het onderwerp van een widget in kleur vermelden? HTML code wordt niet geaccepteerd, is er een andere manier? Of moet ik dan naar een ander thema?dank alvast,
groet pascale
-
Hi Pascale,
Ja, je kan de kleuren veranderen mbv CSS… maar dit is niet genoeg om te vertellen HOE…
‘Meer info = beter’ 😉
Bijvoorbeeld:
- wat wil je bereiken
- wat heb je tot nu toe gedaan
- wat ging goed
- waar ging het mis
- geef ook de url van je site, het gebruikte thema, het gebruik van een childtheme
- andere bijzonderheden…
Hi Willem,
CSS…zie mijn vorige mail..
1. dat de kleur opvalt, kleur is nu lichtgrijs ook “balk” erboven
2. standaard contactform 7 gebruikt
3. dat ging goed
4. standaard is de kleur lichtgrijs (met witte achtergrond niet echt duidelijk)
5.www.ontspannenvoordeklas.nl thema coller, childtheme zit er wel in (maar standaard..volgens mij moest je dan ook in filezilla ook iets aanpassen in een php bestand?? dat heb ik niet gedaan…)
6.widget accepteert html en wijzigen lettertype (ook nu toegepast in menu), maar in widget kun je lettergrootte niet wijzigen of bold maken…bijzonder of niet??
site zal ik vrijdag eind middag online zettendank weer
1. dat de kleur opvalt, kleur is nu lichtgrijs ook “balk” erboven
.main-navigation{ background-color: #ff00ff; /*cyclaam*/ } .content-area{ background-color:#99cc66 !important; }
5.www.ontspannenvoordeklas.nl thema coller, childtheme zit er wel in (maar standaard..volgens mij moest je dan ook in filezilla ook iets aanpassen in een php bestand?? dat heb ik niet gedaan…)
NEE, je hoeft niets aan te passen in een php-bestand om een childtheme te laten werken!
- installeer de ‘one click childtheme plugin
- volg de instructies
- FTP: open style.css van je childtheme > plak bovenstaande code en sla op en UPload
- ververs je browser <CTRL-F5>
Als je het Childtheme juist hebt geinstalleerd, veranderen de kleuren…
NB! Bovenstaande kan je veilig doen!! Gaat het niet goed? Verwijder de code en probeer opnieuw…;)
6.widget accepteert html en wijzigen lettertype (ook nu toegepast in menu), maar in widget kun je lettergrootte niet wijzigen of bold maken…bijzonder of niet??
.widget-area{ font-size:3em; /*enorm groot*/ font-weight:900; /*bold*/ }
Kortom: gewoon gaan met die banaan.
In het ergste geval heb je wat extra werk… en een computer moppert nooit, ook niet als je blundert, dus wat houd je tegen… 😉
== == ==EXTRA info
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 alsstyle.css
.
Wil je andere zaken aanpassen, bijv de header of footer, dan moet je mogelijk de bestandenheader.php
enfooter.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= css3. 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;(((( Het lukt me NIET……
Plugin actief> kies voor bewerken en code geplakt in de CSS van de plugin. Opslaan met succes, maar geen veranderingen te zien (zowel bij de 1e code kleur als bij de 2e code van de widget). Code aantal keer geprobeerd op andere plek te zetten, ook dit hielp niet.
Wel onder de motorkap gekeken, dat was wel mooi om te zien! Zeker hoe CSS zich aanpast aan het gedeelte van de website.
Ik word er een beetje moedeloos van, misschien moet ik me er even bij neerleggen. En wachten tot wp los op mijn pc staat..
Het menu had ik creatief met Html aangepast, maar op een pc zonder videokaart zie je gewoon weer de originele layout…tsja..
Ik snap wel jouw uitleg, alleen waar je de codes moet plaatsen vind ik erg lastig. Met html is dat toch wat makkelijker..denk ik.
Maar ik ben wel erg blij met jouw uitleg..deze heb ik uitgeprint en gaat zeker niet verloren! Dank!
groet pascaleHi Pascale,
Niet zelden denk je de juiste code te pakken te hebben, maar dan zit ’t net even anders. De andere keer moet je ‘!important’ toevoegen om opmaakcode elders in je site te ‘overrulen’…
De CSS plaats je uitsluitend in ‘style.css’ van je childtheme.
FYI: HTML en CSS zijn onlosmakelijk verbonden; Het grote verschil zit ‘m er in dat CSS het OPMAAK deel vormt, terwijl HTML het skelet vormt…Veel succes met oefenen.
Heb je nog vragen, vraag gerust.
- Het onderwerp ‘onderwerp widget in kleur’ is gesloten voor nieuwe reacties.