Ondersteuning » Code oplossingen gezocht » Image Overlay probleem

  • Hallo,

    Ik zocht naar een mooie manier voor een image overlay. Zo ben ik op deze site terecht gekomen: http://callmenick.com/2014/03/06/image-overlay-hover-effects-with-css3-transitions/

    Nu vraag ik me af hoe ik deze kan toevoegen op mijn wordpress website. Ik heb de css en js mappen in mijn rootfolder geplaats en toen de html code in een post. Helaas is dit niet gelukt omdat de paginaopmaak verpest word. Ik denk dat dit komt omdat wordpress de styles.css die ik heb gedownload gebruikt voor de opmaak ipv de reguliere styles.css.

    Weet iemand hoe ik dit voormekaar kan krijgen?

    Hartelijk dank

1 reactie aan het bekijken (van in totaal 1)
  • ’t Is doorgaans problematisch om zaken mbv ‘knippen – plakken’ aan de praat te krijgen. Dat vraagt vaak meer dan dat.

    == == == overdenkingen
    …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.

    == == ==

    Het gaat om te beginnen om zaken op basis van CSS3; ’t Is zeer de vraag OF jouw theme ook op basis van CSS3 in elkaar zit.

    > ’t Is wellicht een oplossing om de zaken die je wilt toevoegen, mbv een aparte stylesheet te scheiden van de rest. Da’s om te beginnen makkelijker in het managen van de aanpassingen…. Neem hiertoe een aparte regel op in je <head>
    voorbeeld:

    <head>
    [...]
    <link rel="stylesheet" type="text/css" href="ovl_style.css">
    [...]
    </head>

    == == ==
    Het is zeer waarschijnlijk, dat je deze zaken zeer gericht dient toe te passen op beperkte gedeelten van je site.

    > zorg dat je gebruik maakt van duidelijk HERKENBARE namen voor je <divs>, en pas deze nieuwe namen aan in het stylesheet.

    voorbeeld:
    OUD:

    img{
      border:none;
      background:#ffffff;
      }

    wordt:

    ovl_img{
      border:none;
      background:#ffffff;
      }

    vervolgens:

    Plaats de div in het betreffende php-bestand:

    <div id="ovl_img">
       [...]
    </div>

    == == ==
    Werk met ‘kleine stappen’ zo blijft ’t overzichtelijk.
    Als een beperkte verandering werkt, maak dan pas een wat grotere stap.

    == == ==
    Maak veel back-ups!!
    > voordat je zaken verandert
    > direct nadat een verandering SUCCESVOL is; Zo heb je straks een ‘succes’ om op terug te vallen, als de volgende stap niet direct werkt…

    Veel succes

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Image Overlay probleem’ is gesloten voor nieuwe reacties.