Title: Thema "sunspot" bewerken Last modified: 5 augustus 2016 --- # Thema "sunspot" bewerken * Opgelost [rendy140489](https://nl.wordpress.org/support/users/rendy140489/) * (@rendy140489) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/) * Hoi allemaal, * Ik gebruik de thema “sunspot” [http://wordpress.org/extend/themes/sunspot](http://wordpress.org/extend/themes/sunspot) * Zoals je ziet is er een **zwarte navigatie balk** & Bovenin een **geel/oranje lijn** * Nu de vraag: kan iemand mij helpen om deze kleuren te veranderen? 9 reacties aan het bekijken - 1 tot 9 (van in totaal 9) * [W.P. Ginfo](https://nl.wordpress.org/support/users/wp-ginfo/) * (@wp-ginfo) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49215) * Om dit soort dingen te doen [en nog heel veel meer] moet je het css-bestand / of php-bestanden aanpassen naar je wensen. == == == 1. A. begin met het maken van een back-up van je site. Gebruik FTP om een backup van de bestanden te maken. (zie: [http://codex.wordpress.org/Using_FileZilla](http://codex.wordpress.org/Using_FileZilla)) Maak ook een back-up van de database (zie: [http://codex.wordpress.org/Backing_Up_Your_Database](http://codex.wordpress.org/Backing_Up_Your_Database)) * Dan: Gebruik plugin ‘one click childtheme’ om een child theme te maken. 1. installeer‘ one click childtheme’ 2. activeer de _**originele**_ theme 3. Dashboard > weergave > child theme 4. beantwoordt de vragen op het scherm >> er wordt een child theme aangemaakt map en bestanden zoals style.css; 5. Activeer het childtheme. == = = == B. 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; – 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. == == == C. nu de aanpassingen zelf: 1. zoek en noteer de kleurcode[s] van de gewenste kleur; gebruik bijv [http://www.colorpicker.com](http://www.colorpicker.com) 2. In dit voorbeeld gebruik ik `#99cc66;` appelgroen en `#fff000`geel `#f0f0f0` vuil-wit `#ffffff;` wit. Verander dat in je eigen kleur[en]. 3. open style.css van het childtheme en voeg de volgende code toe: * ``` .sunstrip, .sunstrip-small { background: #99cc66; /* Old browsers */ background: -moz-linear-gradient(left, #99cc66 1%, #fff000 21%, #f0f0f0 31%, #ffffff 41%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(1%,#99cc66), color-stop(21%,#fff000), color-stop(31%,#f0f0f0), color-stop(41%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #99cc66 1%,#fff000 21%,#f0f0f0 31%,#ffffff 41%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #99cc66 1%,#fff000 21%,#f0f0f0f 31%,#ffffff 41%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #99cc66 1%,#fff000 21%,#f0f0f0 31%,#ffffff 41%); /* IE10+ */ background: linear-gradient(left, #99cc66 1%,#fff000 21%,#f0f0f0 31%,#ffffff 41%); /* W3C */ position: absolute; width: 100%; z-index: 1; } .sunstrip:after, .sunstrip-small:after { /*background: url("images/sun-border.png"); verwijdert afbeelding*/ content: ""; height: 5px; position: absolute; width: 100%; z-index: 1; } ``` * Bovenstaande doet ongeveer het volgende: Het geeft aan: Start met kleur `#99cc66;` teken een verloop naar`#fff000`, `#f0f0f0` en eindig met #ffffff;`elk met een percentage 'doorzichtigheid / intensiteit` * Wil je uitsluitend een egale kleur? In plaats van bovenstaande, voeg aan style. css het volgende toe: * ``` .sunstrip, .sunstrip-small { background: #99cc66;} .sunstrip:after, .sunstrip-small:after { /*background: url("images/sun-border.png");*/ content: ""; height: 5px; position: absolute; width: 100%; z-index: 1; } ``` * Opmerking: Al deze techniek hoeft je niet tegen te houden met WP aan de slag te gaan. Houd jij je liever bezig met de inhoud en je lezers? Prima! * Vraag iemand die het geweldig leuk vind om met de techniek aan de gang te gaan om hulp. Lees meer: [http://codex.wordpress.org/nl:WordPress_Lessen](http://codex.wordpress.org/nl:WordPress_Lessen) * [http://www.w3.org/Style/Examples/011/firstcss.nl.html](http://www.w3.org/Style/Examples/011/firstcss.nl.html) [http://codex.wordpress.org/Getting_Started_with_WordPress](http://codex.wordpress.org/Getting_Started_with_WordPress) [http://codex.wordpress.org/CSS](http://codex.wordpress.org/CSS) [http://codex.wordpress.org/Finding_Your_CSS_Styles](http://codex.wordpress.org/Finding_Your_CSS_Styles) [http://codex.wordpress.org/FAQ_Troubleshooting](http://codex.wordpress.org/FAQ_Troubleshooting) * Thread starter [rendy140489](https://nl.wordpress.org/support/users/rendy140489/) * (@rendy140489) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49238) * Top!! Heel erg bedankt * Het is me gelukt, de “sunstrip” is naar mijn wens veranderd maar * Hoe verander je die zwarte navigatie menu? * [W.P. Ginfo](https://nl.wordpress.org/support/users/wp-ginfo/) * (@wp-ginfo) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49239) * Hi Rendy, * NB! maak de veranderingen in het childtheme! Maak eerst een back-up! * Als je alleen het menu-gedeelte van kleur wil laten veranderen: voeg toe aan‘ style.css’ van het childtheme * ``` .site-header .site-header-inner { padding: 0px 1.538em; background-color: #9966cc; /*toevoeging - verander de kleurcode naar wens */ } ``` * Wil je de hele zijbalk veranderen: Alternatief 1: * ``` .wrap { background: url("images/wrapper-bg.png") repeat-y scroll 28% 0px transparent; margin: 0px 0px -1em 1.692em; max-width: 1175px; overflow: hidden; padding-top: 3.5em; position: relative; } ``` * Verander het bestand `wrapper-bg.png` dwz in een tekenprogramma zoals GIMP, geef er een andere kleur aan en upload het bestand naar zijn originele map. * Alternatief 2 * ``` .site-header { float: left; width: 25%; background:#99aacc;/*===kies je eigen kleur code=======*/ margin:0; padding-top:20px; height:16000px; /* === varieer de waarde tot de hoogte van de pagina ==*/ } ``` * Alternatief 3 Verwijder de wrapper-bg.png * ``` .wrap { /*background: url("images/wrapper-bg.png") repeat-y scroll 28% 0px transparent; hiermee wordt deze opdracht niet uitgevoerd*/ margin: 0px 0px -1em 1.692em; max-width: 1175px; overflow: hidden; padding-top: 3.5em; position: relative; } ``` * Thread starter [rendy140489](https://nl.wordpress.org/support/users/rendy140489/) * (@rendy140489) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49240) * Hoi W.P. Ginfo, * Ik heb een back-up gemaakt en ik maak alle aanpassingen in de childtheme. Ander vraag: * om de kleur te veranderen in het navigatie menu: (Home, Product enzo) moet je deze code aanpassen? * .site-title, .site-title a { color: #fcb03e; } * .site-title a:hover { color: #bfaa91; text-decoration: none; } * Ik heb het aangepast maar hij wil em niet pakke * [W.P. Ginfo](https://nl.wordpress.org/support/users/wp-ginfo/) * (@wp-ginfo) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49241) * Hi Rendy, * Nee, dat verandert de SiteTitle. * Zie mijn vorige antwoord: Dit is het meest eenvoudig… Verander het bestand ` wrapper-bg.png` dwz in een tekenprogramma zoals GIMP, geef er een andere kleur aan en upload het bestand naar zijn originele map. * Het is een heel smalle tekening: links een kleurtje dat je moet veranderen, rechts transparant dat je zo moet laten! Sla veranderingen op door in gimp te kiezen voor ‘exporteren…’ NB!! zorg ervoor dat het bestand onder dezelfde naam en als PNG bestand wordt opgeslagen. Alleen dan blijft t transparante deel doorzichtig!!! * De overige alternatieven werken ook, al vragen ook die opties wat werk. Plaats voor die opties de code in style.css van het childtheme. * Thread starter [rendy140489](https://nl.wordpress.org/support/users/rendy140489/) * (@rendy140489) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49242) * Beste W.P. Ginfo, * Hartelijk dank voor al je hulp! Ik heb de site met veel plezier bewerkt. en dan nog “flash” erop zetten maar dat komt later wel * Nogmaals bedankt * mvg * Rendy * [Ton](https://nl.wordpress.org/support/users/ton-mertens/) * (@ton-mertens) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49243) * Hallo Ik heb sunspot het thema de breedte aangepast in ” style.css “ Kom ik op mijn werk en met internet explorer werkt het goed, is prima naar de gewenste en opgegeven breedte. Echter thuis werk ik met safari van apple en deze wil de breedte niet aanpassen. Heeft iemand hier een oplossing voor, ik kan het niet vinden. Ton. * [W.P. Ginfo](https://nl.wordpress.org/support/users/wp-ginfo/) * (@wp-ginfo) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49244) * Rendy, * Graag gedaan. Vergeet niet deze thread als opgelost / resolved te taggen [rechter zijbalk] * [@ton](https://nl.wordpress.org/support/users/ton/) Mertens: Het is beter hier een aparte eigen vraag van te maken. * Thread starter [rendy140489](https://nl.wordpress.org/support/users/rendy140489/) * (@rendy140489) * [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49245) * Ik heb hem al als solved geklikt nogmaals bedankt 9 reacties aan het bekijken - 1 tot 9 (van in totaal 9) Het onderwerp ‘Thema "sunspot" bewerken’ is gesloten voor nieuwe reacties. * In: [Thema en CSS/opmaak](https://nl.wordpress.org/support/forum/themas-en-templates/) * 9 reacties * 3 deelnemers * Laatste antwoord van: [rendy140489](https://nl.wordpress.org/support/users/rendy140489/) * Laatste activiteit: [13 jaren, 7 maanden geleden](https://nl.wordpress.org/support/topic/thema-sunspot-bewerken/#post-49245) * Status: opgelost ## Onderwerpen ### Meest populaire onderwerpen ### Onderwerpen zonder reacties ### Non-support onderwerpen ### Opgeloste onderwerpen ### Onopgeloste onderwerpen ### Alle onderwerpen