Aangemaakte reacties

15 reacties aan het bekijken - 1 tot 15 (van in totaal 35)
  • Hoi aguiladesign,

    Bedoel je dat je witruimte weg wil onder de header?
    Dit kan inderdaad via CSS.

    Momenteel vind je op regel 255 in je stylesheet hetvolgende:

    .header {
        padding: 0px;
        margin-bottom: 60px;
    }

    Je kunt dus 60px verwijderen door margin-bottom: 0 te gebruiken, dus door hetvolgende aan je custom css toe te voegen:

    .header {
        margin-bottom: 0;
    }

    Wil je meer weg, dan kan je er ook een negatieve waarde van maken, bv. margin-bottom: -20px

    De balk van het menu is een beetje ingewikkelder. Dat is een boord van 5px die op de linken geplaatst wordt, dus de balk zelf bestaat feitelijk niet. Het is de knoplayout.

    Maar je kunt natuurlijk wel een balk toevoegen, bv. ook op het header element…

    .header {
        margin-bottom: 0;
        border-top: 5px #fff solid;
    }

    De menuknoppen komen er dan weliswaar onder te staan, dus die moet je 5px omhoog duwen…

    .menu {
        margin-top: -5px;
    }

    Echter, dan kun je merken dat de header-content een achtergrondkleur heeft, waardoor een deel van de witte lijn opnieuw bedekt wordt… Om dat te verhelpen kun je de achtergrond transparant maken…

    .header .header-content {
        background: transparent;
    }

    Ik hoop dat je daarmee tot het resultaat komt dat je in gedachten had. Succes ermee!

    Hoi MaritvanS,

    Deze CSS in /wp-content/themes/sg-window/css/scheme-0.css is daar verantwoordelijk voor:

    .site .site-info a:nth-child(2) {
        color: rgb(245,245,245);
        border: none;
        border-radius: 3px;
        background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
        box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
        display: inline-block;
        outline: none;
        padding: 4px;
        text-shadow: 0 -1px rgba(0,0,0,.1);
        text-decoration: none;
        user-select: none;
    }

    Als je aanpassingen maakt in je theme kun je dit wissen, als je een child theme of CSS plugin gebruikt, kun je volgende toevoegen:

    .site .site-info a:nth-child(2) {
        background: none;
        box-shadow: none;
        padding: 0;
        text-shadow: none;
        text-decoration: underline;
    }

    Graag gedaan, Peter.
    Zodra je weet hoe het moet of kan, is alles makkelijk… En geen seconde vroeger 🙂
    Ook goed weekend (& beyond)!

    Hoi Ruud, je kunt het topic als ‘resolved’ markeren in het rechter zijmenu.

    Hoi JolandaP,

    Even je browser cache wissen zou moeten helpen.

    Als je CloudFlare of iets dergelijks gebruikt ook daar de cache wissen.

    Succes ermee!

    Hoi Ruud, ik wil je hiermee wel helpen, maar dit is een beetje moeilijk zonder link naar de site, of zonder de code van de widget… En zelf mailpoet installeren is me net wat te veel moeite gevraagd 🙂

    Hoi MaritvanS,

    Je kunt daarvoor het best naar de “class” en/of “id” kijken in het bovenste menu en de eigenschappen/instellingen kopiëren naar de “class”/”id” in het onderste menu.

    In je stylesheet wordt class weergegeven met een puntje voor de class naam. Id heeft een #.
    Bv.
    .site-info = class=”site-info”
    #footer-navigation = id=”footer-navigation”

    Dit gezegd kun je in de CSS het volgende zoeken:

    .site-info, .site-info a, #footer-navigation .horisontal-navigation li a {
        color: #ffffff;
    }

    en aanpassen naar:

    .site-info, .site-info a, #footer-navigation .horisontal-navigation li a {
        color: #ffffff;
        font-size: 14px;
        text-transform: uppercase;
        text-decoration: none;
    }

    Dit past het menu aan, maar enkel als je er niet met de cursor over gaat.
    Om de stijl bij aanwijzing aan te passen heb je een class of id nodig die eindigt met “:hover”.

    In het bovenste menu is dit:

    .site #footer-navigation .horisontal-navigation a:hover, .site .horisontal-navigation li ul li a:hover, .site .horisontal-navigation li ul li a:focus, .site .horisontal-navigation li a:hover, .site .horisontal-navigation li a:focus {
        color: rgb(245,245,245);
        cursor: pointer;
        border-radius: 3px;
        background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
        box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
        text-shadow: 0 -1px rgba(0,0,0,.1);
        text-decoration: none;
        text-decoration: underline;
    }

    Het onderste menu gebruikt de algemene instellingen voor de site. Om dit aan te passen kun je zelf een hover class toevoegen aan de CSS en de eigenschappen kopiëren.

    Dat wordt dan:

    .site-info a:hover {
        color: rgb(245,245,245);
        cursor: pointer;
        border-radius: 3px;
        background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
        box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
        text-shadow: 0 -1px rgba(0,0,0,.1);
        text-decoration: none;
        text-decoration: underline;
    }

    Er is dan weliswaar nog wat te weinig ruimte rond de tekst, zodat de knoppen niet even groot zijn als die in het bovenste menu. Dit kun je verhelpen door “padding” toe te voegen.

    Dit doe je weliswaar best bij de gewone weergave (dus niet :hover), omdat de tekst anders een beetje zal verspringen.

    Dus die eerste code wordt dan:

    .site-info, .site-info a, #footer-navigation .horisontal-navigation li a {
        color: #ffffff;
        font-size: 14px;
        text-transform: uppercase;
        text-decoration: none;
        padding: 4px;
    }

    Let wel: aanpassingen die je in de CSS van je template maakt gaan bij updates verloren. Je kunt dan beter een Custom CSS plugin gebruiken, zoals de Custom CSS module in Jetpack of bv. Simple Custom CSS.

    Succes ermee!

    Hoi nikkirulofphotography,

    Mooie pagina en leuke foto’s.
    Het album noemt men een lightbox. In dit geval gaat het over de Jetpack module Carousel.

    Je kunt die deactiveren in “Jetpack > Instellingen”.

    Daarna kun je een andere toevoegen die je mooier vindt. Er zijn veel mogelijkheden, maar ik raad WP Featherlight aan. Die is eenvoudig, stijlvol en licht.

    Met enkele andere heb ik slechte ervaringen: van log, over lelijk, tot onveilig en een pijlsnel vol lopende error log.

    In principe hoef je de plugin enkel te activeren. Die werkt door een link op afbeeldingen te plaatsen naar het mediabestand, maar in je portfolio is dit reeds zo.

    Succes ermee!

    Hey Peter,

    Sorry voor mijn late reactie. Zo zal dit inderdaad niet werken. Je hebt CSS code geplakt in een PHP bestand. Dat zijn twee verschillende talen. Maar het belangrijkste is dat je bij plugins nooit iets hoeft te veranderen aan de code zelf. Die zorgen er nl. specifiek voor dat je iets kunt aanpassen van in de WordPress admin, of gewoon door de plugin te activeren.

    De Simple CSS plugin voegt een textarea toe in het menu: “Weergave > Custom CSS”. Daar kun je die CSS dus in plakken. Zie de screenshot voor een voorbeeld.

    Het makkelijkste is om een Custom CSS plugin te activeren, Peter.

    Als de Jetpack plugin reeds geïnstalleerd is kun je daar de Custom CSS module activeren. Anders kun je bv. Simple Custom CSS installeren. Na activatie vind je een textarea waar je de bovenstaande code met max-width gewoon in kunt plakken, opslaan en klaar.

    Hoi Peter,

    De breedte van de inhoud wordt in je thema bepaald door <div class="entry-content">.

    In de CSS (style.css) vind je dat terug als:

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
        margin: 0 auto;
        max-width: 474px;
    }

    Je kunt dit kopiëren naar een child theme, of naar een custom CSS plugin (of via de Custom CSS module in Jetpack) en de max-width aanpassen. De margin hoef je niet op te nemen…

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
        max-width: 518px;
    }

    518px is net breed genoeg om 2 kolommen te vormen in je album.

    Dag Johannes,

    Je thema maakt gebruik van de Parallax slider. Ik ken die niet (behalve van naam), maar ben quasi zeker dat je niks aan de code hoeft te veranderen om de captions aan te passen. Ik vermoed dat je die in de settings vindt en anders kun je best eens kijken onder media of je de huidige tekst terugvindt als omschrijving of caption bij de afbeeldingen.

    Succes ermee!

    Forum: Algemeen WordPress
    In antwoord op: Menu's in header

    Hoi nrbersma,

    Met het ondersteunen van 1 menu wordt bedoeld dat er 1 plaats voorzien is in het thema waar je een menu kunt toevoegen. Maar met “menu” wordt dan wel de hele… eh… menukaart bedoeld. Je kunt er alle pagina’s en categorieën in opnemen en ev. nog bijkomende links toevoegen.

    In de meeste gevallen, WP Compose incluis, ondersteunen thema’s ook submenu’s (dropdown).

    Een menu aanmaken en activeren kan in weergave > menu’s. Je zult daar ook de optie zien om pagina’s automatisch toe te voegen. Als je dan bv. een pagina hebt ‘merken’ en…

    • je maakt een nieuwe pagina aan ‘merk 1’
    • en je plaatst die onder de pagina ‘merken’ (in het opmaakscherm)

    dan zal die automatisch toegevoegd worden in het submenu ‘merken’.

    Thema’s die meerdere menu’s ondersteunen stellen je bv. in staat om een menu te gebruiken voor pagina’s en een ander voor categorieën. Of om de belangrijkste pagina’s in het ene menu te zetten en minder belangrijke in een ander.

    Ik hoop dat dit het een beetje verduidelijkt. Succes ermee!

    Hoi bovdpoel,

    Het ontbreken van de knop hoofd bij pagina-attributen ben ik nog niet tegengekomen. Je kunt er ev. wel om heen door de pagina’s in het menu (weergave > menu’s) te schikken zoals je wil… maar dat lost het feitelijke probleem dus niet op.

    Misschien ook eens de plugins op je site deactiveren om te zien of dit een verschil maakt.

    Succes!

    Hey Laura,

    De aanpassingen die je in de Customizer kunt maken, zijn grotendeels afhankelijk van de theme. Het zou dus handig zijn te weten welke theme je gebruikt. Een link naar de website is soms ook handig.

    Het is moeilijk om er iets over te zeggen zonder zicht op de site of de theme, maar wat de afbeeldingen betreft is het goed mogelijk dat je een beter resultaat bekomt door er enkel te gebruiken met eenzelfde formaat. Je kunt die dan best eerst aanpassen voor je ze uploadt.

    Een pagina instellen als homepage kan onder…
    > menu: “instellingen”
    > submenu: “lezen”
    > instelling: “Startpagina toont”

    Daar kun je “een statische pagina” aanvinken en de pagina selecteren als “Voorpagina”. Je dient dan wel een andere pagina te selecteren voor je blog en die moet je misschien eerst aanmaken. Je kunt daar gewoon aan blanco pagina voor gebruiken.

    In principe wordt de titel gebruikt in het menu. Als je dit voor de homepagina wil aanpassen naar “home” kun je onder…
    > menu: “weergave”
    > submenu: “menu’s”
    de homepagina selecteren, het “Navigatielabel” aanpassen en opslaan.

    Succes ermee!

15 reacties aan het bekijken - 1 tot 15 (van in totaal 35)