Hi,
== == == handig om te weten
Wijzigingen die je maakt in je CSS-stylesheet, hebben -in de regel- invloed op ALLE <elementen> met dezelfde naam.
Dus bijvoorbeeld:
p {
background-color: yellow;
color:#00ff00;
}
of
img {
border: 0 none;
max-width: 100%;
vertical-align: middle;
height: 250px;
width: 250px;
-moz-border-radius: 125px;
border-radius: 125px;
}
Wijzig je een ‘algemeen / veelgebruikt’ element, dan heeft dat dus ‘verstrekkende’ gevolgen.
== == == een ‘speciaal’ element
De oplossing ligt dus voor de hand…;-). Maak een speciaal element dat je alleen inzet wanneer jij dat wilt… en dat die kenmerken // waarden heeft die jij wenst.
— — — voorbeeld
STAP 1
- neem bovenstaande code
- in plaats van elementnaam ‘img’ kies een eigen naam bijv. ‘rond’
- nu heb je een eigen element met eigen kenmerken gemaakt…;-)
- plaats deze nieuwe css-code ONDERAAN ‘style.css’ van je [child]theme!!
.rond{
border: 0 none;
max-width: 100%;
vertical-align: middle;
height: 250px;
width: 250px;
-moz-border-radius: 125px;
border-radius: 125px;
}
STAP 2
- open de dashboard-editor
- maak een nieuw bericht of kies het gewenste bericht // pagina
- !!!klik de ‘TEKST-tab’ rechtsboven!!
Nu zie je [ook] de HTML-code in je teksten
- plaats tekst
- plaats een afbeelding
- plaats ‘rondom’ de bewuste afbeelding een <div> om aan te geven dat het hier om jouw speciaal element gaat…
— — — voorbeeld
Nog een testbericht Nog een testbericht Nog een testbericht Nog een testbericht Nog een testbericht Nog een testbericht Nog een
<em><strong><div id="rond"> </em></strong>
<a href="http://www.jouwdomein.nl/testbericht/" rel="attachment wp-att-170"><img src="http://www.jouwdomein.nl/wp-content/uploads/2015/12/afbeelding.png" alt="afbeelding" width="160" height="160" class="aligncenter size-full wp-image-170" /></a> <strong></div></strong>
testbericht Nog een testbericht Nog een testbericht Nog een testbericht Nog een testbericht
- sla alle wijzigingen op en ververs je browser <CTRL-F5>
Nu heeft alleen deze afbeelding in dit bericht de ronde opmaak…
Elke keer dat een afbeelding elders op je site ook rond moet… plaats de
<div id="rond"> ...afbeelding... </div>
rondom de afbeelding !!in de tekst-tab!! en sla op…
…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…