Ondersteuning » Thema en CSS/opmaak » Active menu en submenu andere kleur

  • Ben bezig met mijn 1° WordPress site.
    Ik gebruik iTheme2 als thema en de website is toerismevosselaar.be/wordpress en heb 2 problemen.
    1.
    Als ik in een submenu een pagina open wil ik dat men in de menubalk ziet in welk menu item men is.
    vb. het menu “Recreatief” heeft een submenu “Kamperen”. Als je op de pagina kamperen bent zou de menu Recreatief als aktief moeten zijn (groene achtergrondkleur)
    Ik heb nu 6 menu items en 1 blog knop.
    Ik heb het enkel klaar gekregen dat de achtergrond kleur wijzigt (groen) als men in de hoofdpagina van een menu knop is (Recreatief) en dit in de settings van iTheme zelf onder Styling en dan Main Navigation.
    2.
    Ik heb een kalender als widget geplaatst en een dag met een activiteit is onvoldoende zichtbaar, vb. is 2 decmeber. De 2 staat lichtblauw.
    Blijkbaar komt dit doordat de kalender dezelfde stijl gebruikt van het thema ?
    Kan dit aangepast worden zodat de dagen (cijfers) die een activiteit bevatten veel beter opvallen ?

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Je zult hiervoor aanpassingen moeten doen in de CSS van je theme. We kunnen zo niet precies zeggen welke code, omdat daarvoor een linkje naar je site nodig is.
    Je kunt dit ook zelf achterhalen door Firebug (in Firefox) te gebruiken, of ‘Element inspecteren in Chrome etc. Google hier maar op, om dit een beetje onder de knie te krijgen.

    Maar als je een linkje kunt geven, kunnen we je in ieder geval snel op weg helpen.

    groet,
    Lianne

    Thread starter stef1

    (@stef1)

    @liannel,
    De link naar de website stond in mijn 1° bericht, misschien over heen gekeken:
    http://www.toerismevosselaar.be/wordpress
    Ik werk vooral met Safari en gebruik ook regelmatig “element inspecteren”.
    Wordpress is voor mij nieuw, in html is het gemakkelijk op te lossen, maar css en php is wel iets anders.
    Maar ik ben al blij dat jullie mij op weg willen helpen en eventueel het probleem kunnen oplossen of mij toch op de juiste weg helpen.
    St.

    Hoi Stef,

    Linkje inderdaad over het hoofd gezien.

    Als je een subpagina aanroept, krijgt het desbetreffende hoofd-item in je theme drie nieuwe classes, waarvoor geen css is geregeld. Deze zijn .age_item_has_children, .current_page_ancestor en .current_page_parent. Kies er een uit, die op jouw het meest semantisch overkomt.
    En geef in je css de gewenste background-color aan deze class.

    En uiteraard is de kleur van een dag met een activiteit aan te passen. Er wordt inderdaad de algemene css voor een link ( a ) gebruikt in deze plugin. Ik neem aan dat je die kleur ongemoeid wilt laten, dus blijvend blauw. Dan moet je voor uitsluitend de kalender de css aanpassen. De kalender heeft in een overkoepelende div als class .wp-calendar

    .wp-calender a {
    color: gewenste kleurcode;
    }
    
    Succes!
    Lianne
    Thread starter stef1

    (@stef1)

    Liannel,
    Bedankt voor het helpen.
    Het is me uiteindelijk gelukt, volhouden, zoeken en uitproberen.
    Voornamelijk door Firefox en Firebug. Ik had hier ergens in het forum al hierover gelezen maar wist het dus niet.
    Met de kalender heb ik het moeten aanpassen in de style.css ipv. een custom_style.css
    vermoedelijk omdat ik er nog te weinig van ken.
    Veel succes daar en vermoedelijk tot nog eens ?
    Dit is dus opgelost.
    St.

    Goed dat je aan de slag bent gegaan met Firebug, hiermee krijg je de vormgeving van je website onder controle. Ik zie dat je de blauwe kleur in stand hebt gelaten en de dagen waarop geen activiteit plaatsvindt van een ander kleurtje hebt voorzien, zodat het onderscheid oke is en je geen stijlbreuk hebt. Good-thinking!

    Even ter info: met css maak je je website op. CSS staat cascading style sheets. Cascading => waterval. In je website zitten meerdere stylesheets, ook van plugins etc.. Deze zie je terug met Firefox in de head-sectie van je website. Het laatstgenoemde stylesheet in de rij heeft het ‘meest’ te vertellen. Staat bijvoorbeeld in het eerstgenoemde stylesheet dat de achtergrondkleur van je site zwart is, maar in de laatste blauw, dan toont ie blauw. Het eerdere zwart wordt dan overschreven. Je ziet dit ook terug in Firebug.

    De custom css stylesheet hoort min of meer altijd de laatste te zijn. Ik zie dat dit niet bij jou het geval is. Het is belangrijk om in de custom-stylesheet alle wijzigingen te regelen, omdat je dan a. overzicht houdt, en b. omdat dat stylesheet in tegenstelling tot de andere nooit zal worden overschreven bij updates van je theme of plugins. In de situatie dat het niet het laatste stylesheet is, kun je met een noodgreep afdwingen dat toch de code in het custom stylesheet wordt opgepakt door de toevoeging !important in de declaratie. Je krijgt dan naar het voorbeeld van mijn vorige post:

    .wp-calender a {
    color: gewenste kleurcode !important;
    }

    Wat ook altijd kan is een eigen stylesheet voor alle veranderingen aanmaken binnen het theme, en de verwijzing hiernaar in de header.php van je theme (net voor </head>) op te nemen. In jouw geval zou de code kunnen zijn

    <link type="text/css" href="http://toerismevosselaar.be/wordpress/wp-content/themes/itheme2/mijn-naam-voor-het-bestand.css" rel="stylesheet"></link>

    Efin, jij komt er wel, en we spreken elkaar wellicht nog eens.

    groet,
    Lianne

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Active menu en submenu andere kleur’ is gesloten voor nieuwe reacties.