Ondersteuning » Thema en CSS/opmaak » top 1 navigatie
top 1 navigatie
-
Hallo, ik heb mijn website omgezet naar Stained Glass, sinds mijn laatste post in dit draadje: https://nl.forums.wordpress.org/topic/website-overzetten-naar-wordpress-2?replies=16
Ik heb al veel aanpassingen gedaan en het begint er nu uit te zien zoals ik wil, maar gisteravond zat ik kleuren aan te passen in het CSS stylesheet voor het hoofdmenu bovenin (.top-1-navigation – horizontal navigation) en ging er wat mis. De kleur was oorspronkelijk lichtgrijs en ik heb het aangepast aan een donkerder grijs (#999), maar om de een of andere reden zijn de letters van het menu nu ineens op paars komen te staan.Ook de links en bezochte links zijn ineens blauw of paars, terwijl ik daar voorzover ik weet niks heb aangepast (waren ook eerst lichtgrijs). Kan iemand met mij meekijken om te zien wat ik fout heb gedaan?
De site is hier te vinden: http://www.frankaslothouber.nl
Ik heb ook screenshots gemaakt van het betreffende stukje stylesheet, mocht iemand die willen zien om mee te kijken naar de code.Dank! Franka
-
Aan welke css heb je de kleuren van dit menu gezet? Ik zie namelijk nergens waar deze kleuren zijn gedefinieerd in je website.
Probeer dit eens:
.horisontal-navigation > div > ul > li a, .horisontal-navigation a { color: red; }
veranderen de kleuren van het menu nu wel?
Hi webstan,
Bedankt, ik heb je code toegepast en het werkt! Ik heb alleen ‘red’ veranderd in ‘grey’ en heb nog 2 vragen:
In de oorspronkelijke CSS-code van het hoofd-stylesheet van Stained Glass stond de volgende code:.horisontal-navigation > div > ul > li a { padding: 0 20 px: }
De padding heb ik nu verwijderd met de code van jou hierboven, maar ik denk dat ik die padding wel nodig heb om het menu duidelijker te maken? Zo ja, waar en hoe moet de totale coderegel dan zijn?
Andere vraag die ik heb gaat over bezochte links, zoals de creditline onderin naar WP en de schrijver van het theme. Kan ik die ook grijs maken?
Dank!
FrankaMet deze code kan je zelf aanpassen hoeveel padding je rondom de links wilt hebben. In dit geval 0px 20px zoals je eerder aangaf.
.horisontal-navigation > div > ul > li a, .horisontal-navigation a { color: grey; padding: 0px 20px!important; }
Alle bezochte links kan je gewoon heel makkelijk aanpassen met de css code
a:visited {}
Voor deze code moet je natuurlijk wel het juiste html elelement selecteren waar de links zich in bevinden.
Opnieuw mijn dank!
De padding toevoegen blijkt een ander effect te hebben: de menu items komen verder uit elkaar te staan. Dat was niet de bedoeling, dus ik heb het terug gezet naar de situatie zonder padding.
Wat ik bedoelde te bereiken is dat bij hover-acties van de muis de menu onderdelen een ander kleurtje krijgen (door mij nader te bepalen). Het was oorspronkelijk een grijs blokje dat je te zien kreeg, ik dacht dat dat de padding was.
Ter info:
Als ik de achtergrond van de pagina op wit zet, zie ik het grijze hover-blokje ook niet meer, dus daar kan het denk ik niet aan liggen, nu ik de achtergrond en de menu-woorden in grijs heb staan.Ook vroeg ik me nog af of ik
color: grey;
nog kan wijzigen in een hexadecimaal, bijvoorbeeld #999999. Hetzelfde zou ik op die manier willen aanpassen voor het hoveren.Ik zal zoeken naar het html element voor de het
a:visited {}
deel. Wat moet er tussen de accolades komen te staan?Misschien stom van me, maar ik heb tot nu toe in het parent stylesheet aanpassingen zitten doen. Ik lees net dat de aanpassingen verloren gaan zodra er een update van het thema van je keuze komt, dus dat je een child-thema moet aanmaken.
Dat heb ik zojuist gedaan, maar na het uploaden krijg ik in weergave de melding:The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Stained Glass Child The parent theme is missing. Please install the “Stained Glass” parent theme.En kom ik steeds verder van huis…
Bij het installeren van het thema heb ik het via het dashboard verkregen, dus niet handmatig gedownload en ge-ftp’t. Dat laatste heb ik nu wel gedaan met het child-thema, maar kennelijk doe ik iets fout?
Hallo Franka,
Wat heb je nu in de map van je child thema staan? Zo te horen heb je nog geen stylesheet aangemaakt.
Dit is wat er in staat:
/* Theme Name: Stained Glass_Child Template: Stained Glass */ @import url("../Stained Glass/style.css");
Heb je ook een index.php in deze map staan?
Nee, alleen het stylesheet en een screenshot.png
Ik zie nu trouwens wel een spontane index.php in het content/theme mapje staan, met daarin de tekst:
<?php // Silence is golden.
Moet ik die hebben of de andere index.php?
Een nog beter idee op dit moment lijkt mij het terug verkrijgen van het originele css-bestand waar ik in heb zitten rommelen. Dan kan ik altijd terug als ik iets fout doe. Maar ik heb geen idee hoe dat moet.
Wat je het beste kunt doen is even de index.php kopieren uit je huidige theme en deze plakken in het child theme. Op deze manier werkt je child theme wel omdat een theme altijd een index.php template nodig heeft om te kunnen werken.
Als je, je oude css terug wilt zou je gewoon even het thema wat je gebruikt nog een keer kunnen downloaden en hier de orginele stylesheet uit kunnen halen. Vergeet niet je huidige stylesheet te kopieren zodat je de code niet kwijt raakt.
Ik heb het huidige thema geïnstalleerd vanuit dashboard en niet handmatig.
Als ik dat nu wel doe en het stylesheet daaruit gebruik weet ik niet waar ik het naartoe moet ftp-en. Het thema staat namelijk niet in de themes-map omdat ik het vanuit dashboard heb geïnstalleerd.Wat ik kan doen is wachten tot de volgende update van het thema komt, dan het gehele thema downloaden per ftp, het stylesheet daarvan kopiëren en dan een child thema maken.
Dat van die index.php is nieuw voor me. Ik las 2 beschrijvingen van hoe je een kind-thema maakt, de een vermeldde style.cc en screenshot.png en de andere style.css en functions.php. Die laatste is de nieuwe methode volgens de WP-codex.
Hey Franka,
Als het goed is moeten de thema’s altijd ook op je ftp staan nadat je ze op welke manier dan ook heb geinstalleerd. Heb je gekeken in de wp-content/themes/…
Was het nu wel gelukt met het child thema na het aanmaken van een index.php?
Het lukt me niet.
Ik heb alles correct volgens de beschrijving gedaan, alles staat op de juiste plek, maar ik zie niks in het dashboard.
Ik laat het aanmaken van een kind-thema voor nu rusten, het kost me alleen maar tijd zonder dat ik verder kom.Wat ik heel fijn zou vinden is als jij of iemand anders die verstand heeft van html-elementen en css-regels mij kan vertellen waar in het stylesheet (style.css) van het Stained Glass thema ik het html-element kan vinden waarmee ik het navigeren door het hoofdmenu rechts bovenin duidelijker kan maken.
Het hoofdmenu is nu grijs, dat is perfect, en bij het hoveren wordt het transparant, wat je ziet bij het portfolio drop-down menu. Dat transparante vind ik op zich prima, maar ik wil bij het hoveren een contrasterende kleur laten zien, zodat het navigeren duidelijker wordt.
Ik kan desgewenst hele sheet kopiëren en hier plaatsen, het is alleen een erg lang document. Maar ik denk dat het element zich hier bevindt (weet dus alleen niet hoe ik het moet veranderen om het te krijgen zoals ik wil):
.top-1-navigation ul { background-color: transparent; } .top-1-navigation .horisontal-navigation li a { color: #fff; } .top-navigation ul { background-color: transparent; } .top-navigation .horisontal-navigation li a { color: #bfbfbf; }
Ik ben er inmiddels in geslaagd een kind thema aan te maken, dus dat is weer een probleem minder.
- Het onderwerp ‘top 1 navigatie’ is gesloten voor nieuwe reacties.