• Goedemiddag,

    Ik heb onderstaande code toegevoegd vi css bewerken. Nu zijn echter alle foto’s op de site rond. Hoe kan ik dit per foto instellen?

    img {
    border: 0 none;
    max-width: 100%;
    vertical-align: middle;
    height: 250px;
    width: 250px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    }

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • 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

    1. neem bovenstaande code
    2. in plaats van elementnaam ‘img’ kies een eigen naam bijv. ‘rond’
    3. nu heb je een eigen element met eigen kenmerken gemaakt…;-)
    4. plaats deze nieuwe css-code ONDERAAN ‘style.css’ van je [child]theme!!
    5. .rond{
      border: 0 none;
      max-width: 100%;
      vertical-align: middle;
      height: 250px;
      width: 250px;
      -moz-border-radius: 125px;
      border-radius: 125px;
      }

      STAP 2

    6. open de dashboard-editor
    7. maak een nieuw bericht of kies het gewenste bericht // pagina
    8. !!!klik de ‘TEKST-tab’ rechtsboven!!
    9. Nu zie je [ook] de HTML-code in je teksten

    10. plaats tekst
    11. plaats een afbeelding
    12. plaats ‘rondom’ de bewuste afbeelding een <div> om aan te geven dat het hier om jouw speciaal element gaat…
    13. — — — 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
    14. sla alle wijzigingen op en ververs je browser <CTRL-F5>
    15. 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…

    Thread starter Handen van goud

    (@kenterslifestyle)

    Dank je wel! Ik ga er in het weekend even flink mee aan de slag!

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘foto's bewerken’ is gesloten voor nieuwe reacties.