Ondersteuning » Thema en CSS/opmaak » CSS aanpassingen

  • Hoi,
    Ik ben bezig met een website, heb al best wat dingen aangepast, maar loop nu vast met wat dingen. (voornamelijk kleine CSS aanpassingen, ik beheers CSS redelijk, maar niet volledig, vandaar dat ik vastloop).

    Ik maak gebruik van het thema: The Morning After.
    http://www.woothemes.com/2010/06/themorningafter/

    Mijn vragen:
    -hoe voeg ik bij mijn statische pagina’s eigen CSS toe?
    Ik heb namelijk het idee dat de thema CSS, mijn CSS overruled.

    Wat ik eigenlijk wil doen is in mijn statische pagina’s een verwijzing maken naar een eigen CSS bestand. Waar moet ik die plaatsen?

    -zie http://www.woothemes.com/2010/06/themorningafter/ Daar zie je rechtsboven een screenshot van het thema. Je ziet daar in de header een zwartwit foto met links daarvan een “//home” verwijzing. Ik wil dat weghebben (de verwijzing van waar je bent) hoe doe je dat?

    Alvast bedankt voor jullie reacties!

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)
  • Thread starter koenwordpress

    (@koenwordpress)

    Inmiddels is de 2e vraag opgelost.
    Het enige wat nog overblijft is dus:

    Hoe voeg ik mijn eigen CSS bestand toe aan een statische pagina?
    Thenx

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    Zou je een concreet voorbeeld kunnen geven? Want met de body class die Woothemes aanbiedt in dit theme kun je alle pagina’s, zelfs specifiek, ’targetten’, maar weet niet zeker of je dat bedoelt..

    Thread starter koenwordpress

    (@koenwordpress)

    -In het rechtermenu is bijvoorbeeld onder elk pagina (klikoptie) een lijntje getrokken, ik vind die lijn te breed. Het zit in de CSS bij de Wigdet, kan hem alleen niet vinden.

    -Daarnaast, wil ik gewoon alle Titles van de pagina’s opmaken en dat lukt ook niet, bijvoorbeeld een <h99> aangeven en die opmaken.

    -Tot slot wil ik een aangeklikte link opgelicht houden (zodat je ziet waar je bent) ik dacht, a.active, maar dat werkt niet.

    Thenx!

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    .widget ul li heeft een border-bottom statement die je kunt aanpassen/verwijderen

    titels maak je op door de huidige css aan te passen. Wat jij nodig hebt is Firefox als standaard browsers icm Firebug als add-on. Daarmee kun je op elk element klikken waarvan je de styling wilt zien en met de rechtermuisknop Element Inspecteren krijg je de CSS (en html) te zien dat er voor zorgt dat het specifieke element er zo uit ziet.

    Thread starter koenwordpress

    (@koenwordpress)

    Bedankt voor de reactie, ik ga Firefox installeren!
    Zou je me wel aan kunnen geven hoe:
    -Tot slot wil ik een aangeklikte link opgelicht houden (zodat je ziet waar je bent) ik dacht, a.active, maar dat werkt niet.

    moet?

    Thread starter koenwordpress

    (@koenwordpress)

    Ik dacht a: link:active maar dat werkt niet…

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    Weet niet precies welk gedrag je nu exact bedoeld, maar hier staan ze allemaal: http://www.w3schools.com/css/css_reference.asp

    Thread starter koenwordpress

    (@koenwordpress)

    Thenx,
    Wat ik bedoel is:
    Een navigatie menu, bijvoorbeeld: home-nieuws-contact
    Alles is wit, en als ik op nieuws druk, dan wordt het woord NIEUWS rood.. zolang ik in de categorie/pagina NIeuws zit.

    a.active zou het in mijn beleving moeten zijn (maar werkt niet).
    Zie hieronder:

    /** widgets **/

    .widget { margin: 0 0 1.4em 0; }
    .widget a { color: #224970; }
    .widget a:hover { color: #000; }
    .widget a:active { color: #f00; }
    .widget ul, .widget ol { list-style: none; padding: 0; margin: 0; }
    .widget ul li { padding: 0 0 0.3em 20px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; background: url(images/bg/postbullet.png)
    no-repeat 0 2px; }
    .widget ol li { padding: 0 0 0.3em 10px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; }

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    wat jij zoekt, denk ik, is het gebruik van de .current_page_item css class. Zoals hier wordt uitgelegd: http://www.vanseodesign.com/wordpress/hightlight-current-page-wordpress/

    Thread starter koenwordpress

    (@koenwordpress)

    Hoi Remkus,
    Wat zo vervelend is is dat ik uiteindelijk DE plugin heb gevonden die doet wat ik wil… http://wordpress.org/extend/plugins/flexi-pages-widget/faq/ NAMELIJK een sidebar met hierarchie.

    Qua kleuren etc. alles klopt. Alleen nog niet de kleur van een actieve pagina… Kan ik jou manier toepassen op mijn plugin?
    Ik hoop het wel en hoop niet dat het allemaal mijn petje te boven gaat.

    Thenx nogmaals.

    Moderator Remkus de Vries

    (@defries)

    Sleutelbeheer WordPress NL

    In principe wel. Je zult je gewoon moeten verdiepen in CSS, specifiek CSS specificity.

    Thread starter koenwordpress

    (@koenwordpress)

    Ik ga me erin verdiepen, maar wil jij aub dit topic bijhouden of ben je ergens anders te bereiken?

    Thread starter koenwordpress

    (@koenwordpress)

    Ik heb me de laatste dagen wat meer verdiept in CSS. Voor een site
    moet ik nog het een en ander doen. Ik heb hieronder 3 vragen gesteld, met mijn Commentaar erbij, ik hoop dat iemand mij op korte termijn kan helpen.

    Wat ik wil is:
    -In mijn sidebarmenu staat een bottom line die ik kleiner wil hebben 75% ofzo (dus niet tegen de main pagina aan, om het zo te zeggen). Ik weet dat het bij .widget ul li { padding: 0 0 0.3em 20px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; zit, maar ik weet niet hoe ik die SOLID op bijv. 75% kan krijgen.

    -Ik wil ook dat als ik in menu>bankzaken>sparen zit, dat het woord SPAREN dan een andere kleur behoud zodat de bezoeker weet dat hij op dat deel van de site zit. (ik dacht dat ik .widget a:active { color: eigen kleur; } moest toevoegen, maar dit werkt niet. why niet?

    -Wat ik tot slot wil weten is: hoe ik in een statische pagina eigen opmaak kan toevoegen? Wat ik denk is in de dashboard de pagina open, dan op html tabje zetten en daarin: zelf de link naar naar css bestand te maken en ook daar delen van de tekst een <h1> <h2> <p> etc. te geven.

    Voor de eerste 2 vragen weet ik dat ik bij dit deel moet zoeken:

    /** widgets **/

    .widget { margin: 0 0 1.4em 0; }
    .widget a { color: #224970; }
    .widget a:hover { color: #000; }
    .widget ul, .widget ol { list-style: none; padding: 0; margin: 0; }
    .widget ul li { padding: 0 0 0.3em 20px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; background: url(images/bg/postbullet.png) no-repeat 0 2px; }
    .widget ol li { padding: 0 0 0.3em 10px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; }

    -In mijn sidebarmenu staat een bottom line die ik kleiner wil hebben 75% ofzo
    een border heeft altijd de volledige breedte van het element (dus hier de li), mss kan je dit aanpassen door de lijn ipv met een border als een background-image toe te voegen en die dan horizontaal op 25% te plaatsen.

    -Ik wil ook dat als ik in menu>bankzaken>sparen zit…
    geef de link naar je testomgeving even, kunnen we zien welke code de plugin wel of niet genereert. met een .current_page_item css class zou het gemakkelijk zijn. (en a:active moet NA a:hover in de CSS staan, dus als je ook een a:hover hebt..)

    -Wat ik tot slot wil weten is: hoe ik in een statische pagina eigen opmaak kan toevoegen?
    Dit doe je in custom.css in je wootheme. Spreek zoals Remkus zei je pagina aan met de id die gegenereerd wordt, bv page-id-124 h1 {...}

    Thread starter koenwordpress

    (@koenwordpress)

    Ik heb inmiddels weer wat goede tips gekregen waar ik mee aan de slag ga, iedereen die voor mij aan het zoeken is voor een oplossen voor mij, wacht daar maar even mee.

    Ik hou jullie op de hoogte!
    Thenx!

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)
  • Het onderwerp ‘CSS aanpassingen’ is gesloten voor nieuwe reacties.