Ondersteuning » Code oplossingen gezocht » Streepjes in Lightbox Plus Colorbox

  • Opgelost hbouma

    (@hbouma)


    Ik maak gebruik van het thema Twenty Eleven en heb de plugin Lightbox Plus Colorbox geïnstalleerd. In Lightbox gebruik ik de style “Elegant white”. Op het moment dat ik een pagina kies en op een foto klik wordt de plugin gestart. Ineens staan er rechtsboven en -onder twee kleine streepjes. Ik zoek me helemaal gek maar kom er maar niet achter hoe dit op te lossen. Wie kan mij helpen ?

    http://www.henkbouma.nl

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

    Het gaat hier om controls die er hier wat vreemd uitzien

    div#cboxBottomRight, div#cboxTopRight {
        display:none;
    }

    == == == WAT NU TE DOEN MET DEZE CODE…

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    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.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    == == == Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. 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.
      – Maak je aanpassingen in style.css van het childtheme;
    • Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
    • open de map van je childtheme
    • gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
    • voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
    • UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
    • browser: druk <CTRL-F5> om je browser te verversen
    • bekijk het resultaat

    – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

    == == == Extra

    Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’.

    Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

    == == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
    Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
    == == ==

    Thread starter hbouma

    (@hbouma)

    Dank voor het uitgebreide antwoord. Ik heb de code aan de style.css toegevoegd, maar dan is het resultaat niet mooi. De streepjes verdwijnen wel maar de “mooie” ronde hoeken worden rechtsboven en -onder worden geblokt. Is ook dat op te lossen. Kijk maar op de website naar het resultaat

    Hi Henk,

    Ik heb nog eens naar je site gekeken en zie nu idd je probleem.

    Wat verder opvalt dat je originele probleem er niet meer lijkt te zijn?? Klopt dat??

    Zo te zien is het een probleem van de verschillende ‘lagen // elementen’ die elkaar afdekken.
    De juiste css heb ik nog niet gevonden.

    Thread starter hbouma

    (@hbouma)

    Hoi Ginfo, nee, het originele probleem is opgelost. Een kennis wist het op te lossen maar vraag me niet waar en hoe hij dat gedaan heeft 😉 Ik heb hem dat nog even gevraagd aan te geven.

    Zelf ben ik er achter gekomen dat er in de betreffende plugin en gekozen stijl (elegant-white) een css staat met de naam “colorbox.min.css”. Daar moeten wijzigingen worden aangebracht.

    In jouw eerste reactie gaf je aan dat de controls er vreemd uit zagen. In welke css heb je dat toen gezien/ontdekt ? Pure nieuwsgierigheid om weer wat te leren.

    gr
    Henk

    Hi Henk,

    In jouw eerste reactie gaf je aan dat de controls er vreemd uit zagen. In welke css heb je dat toen gezien/ontdekt ? Pure nieuwsgierigheid om weer wat te leren.

    Dat ging met name om twee zaken:

    • de weergave op het scherm; De knoppen werden deels afgedekt door andere elementen op het scherm [chrome-browser]
    • In de ‘style.css’ kon ik maar niet het juiste element vonden om die problemen met de rand vinden, terwijl ik dat daar wel verwachtte

    Bij elkaar iets dat bij mij dan een belletje doet rinkelen.

    Is je probleem opgelost? Vergeet aub niet de thread als ‘resolved’ / ‘opgelost’ te taggen in de rechter zijbalk.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Streepjes in Lightbox Plus Colorbox’ is gesloten voor nieuwe reacties.