Ondersteuning » Thema en CSS/opmaak » Hoe kom ik er achter in welke sheet CSS staat

  • Opgelost chocolacaat

    (@roeptoeter)


    Ik ben me inmiddels aan het ‘bekwamen’ in CSS. Gaat traag maar het begint te dagen. Nu heb ik al enige tijd firebug (in Firefox) en CSS stylebot in Chrome. Ik begrijp de werking ervan. Als ik ergens op klik dan kan ik zien hoe het element heet, maar hoe kom ik er nou achter waar het dan precies staat?

    In Firebug wil ik bijvoorbeeld op mijn blog het Engelse Search vervangen voor het Nederlandse Zoek (Loco Translate heeft dat er niet uit gehaald)

    Volgens Firebug staat het hier:

    <input id=”s” class=”field” type=”text” placeholder=”Search …” name=”s”>

    Maar waar kan ik dat dan vinden?

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Hi,

    Goeie vraag!

    Als ik ergens op klik dan kan ik zien hoe het element heet, maar hoe kom ik er nou achter waar het dan precies staat?

    Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel. Je hebt Firebug en stylebot al gevonden. Daarnaast kan je ook in je brouwser re-klikken en kiezen ‘element inspecteren’.
    Die gereedschappen doen allemaal hetzelfde: Ze laten je de betreffende code van de webpagina zien met bijv de bijbehorende CSS.

    …echter… Webpagina’s gemaakt met een CMS Content Management Systeem -zoals WP en Joomla- gebruiken niet alleen HTML en CSS, maar ook PHP

    <input id="s" class="field" type="text" placeholder="Search …" name="s">

    Hierboven staat een zoekveld. Dat kan je terugvinden [en aanpassen] in de PHP-bestanden van je site.

    Opgelet… Het schrijven van PHP is letterlijk een vak apart. Veel webbouwers laten dat graag over aan deskundigen ..en met recht. Anderen beperken zicht tot een absoluut minimum. Een klein foutje, kan de werking van je site in de war gooien.

    >> Wat je in dit geval WEL veilig kan doen is de TEKST aanpassen, zonder de rest van de code te veranderen.

    == == == HOE [ff puzzelen..]

    1. gebruik FTP om je site te benaderen;
    2. Gebruik een goede code-editor, bijv. ‘notepad++’
    3. Ga op zoek naar de betreffende code in het PHP-bestand dat hoort bij de betreffende pagina
    4. bijv. ‘search.php, page.php, single.php’
    5. gevonden?? >> maak een BACKUP VAN DIT BESTAND een klein foutje geeft al problemen… een backup [gewoon met FTP naar je PC kopieren] helpt je dan eenvoudig uit de brand
    6. NOTEPAD++: verander placeholder="Search …" in placeholder=”Zoek…” >> sla alle wijzigingen op en [her-]upload het bestand mbv FTP
    7. ververs je browser: <CTRL-F5> en controleer het resultaat
    8. == == == het werkt NIET

    • heb je het juiste PHP-bestand aangepast?
    • het werkt niet… er is iets mis met mijn site…
    • het werkt, maar het verkeerde ding is veranderd…
    • >> Plaats de backup van het PHP-bestand terug
    • ververs je browser: <CTRL-F5> en controleer het resultaat
    • ziet je site er weer als vanouds uit?? JA: probeer het opnieuw tot je het gewenste resultaat hebt! NB! Maak VOORAF STEEDS EEN BACKUP van het bestand dat je gaat aanpassen
    • == == == JOEPIE [Briljant…!]

    • Het werkt… wat nu??
    • voorkom dat updates van je theme / plugins al je harde werk weer overschrijven!
    • kopieer de AANGEPASTE php-bestanden naar de map van je CHILDtheme
    • kopieer vervolgens de backup van het origineel terug naar de PARENT [het originele theme]; Zo blijft het originele theme intact en bewaar je alle wijzigingen van php -maar ook CSS, veilig gescheiden van het origineel
    • Veel plezier met puzzelen.

      == == == EXTRA achtergrondinfo CHILDtheme

      Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. klik: Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm [bijv. CHILDTHEME]
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. zo nodig: Activeer het childtheme.
    6. ==

    7. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
    8. dus:– Maak je aanpassingen in style.css van het childtheme;
    9. wil je PHP-bestanden aanpassen? >> laat het ORIGINEEL in de PARENT en kopieer de aangepaste PHP-bestanden naar de CHILDmap
    Thread starter chocolacaat

    (@roeptoeter)

    De plugin ga ik zo downloaden en in een php bestand heb ik al wat veranderd (het was tekst dus dat leek me niet zo gevaarlijk, het resultaat was wat ik ervan had gehoopt).

    Gelukkig blijkt het inderdaad een puzzel te zijn waar e.e.a. staat maar dan vraag ik me alsnog af waarom er in het childtheme alleen de stylesheet staat. Oh daar kan je dan de bestanden toevoegen die je hebt veranderd, zoals de php bestanden.

    Het wordt dus puzzelen maar dat vind ik altijd wel leuk alleen begreep ik gewoon niets van stylbot en firebug en dacht dat ik een belangrijk gedeelte had gemist (waar staat het).

    Ik heb gelukkig een ftp-programma dat gemaakte veranderingen kan terugdraaien. Werkt het niet dan kan ik dat in het programma herstellen en het heeft ook een zoekfunctie. Het was de uitgave waard, maar was destijds al heel goedkoop trouwens 🙂

    Bedankt voor de uitleg. Ik ga vandaag weer verder knutselen maar nu eerst die plugin opzoeken.

    Thread starter chocolacaat

    (@roeptoeter)

    Gelukt! Nog voor de plugin 🙂

    Thread starter chocolacaat

    (@roeptoeter)

    Hmmmm…..nu heb ik nog één dingetje wat ik werkelijk nergens kan vinden. Ik gebruik geen menu en toch staat er boven de pagina iets wat ik dus niet heb opgegeven en wat in een menu staat.

    Dit zegt ‘element inspecteren’ en ik kan het dus nergens vinden.

    Home

    Ik weet dat het een link is maar hoe krijg ik het weg als ik niet weer waar het staat?

    Thread starter chocolacaat

    (@roeptoeter)

    Heb het inmiddels weten te omzeilen met css…pfffff…….was niet te vinden.

    …sterk spul hé… CSS?!

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘Hoe kom ik er achter in welke sheet CSS staat’ is gesloten voor nieuwe reacties.