Thema "sunspot" bewerken

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 )
   Maak ook een back-up van de database
   (zie: 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

In dit voorbeeld gebruik ik #99cc66; appelgroen en #fff000geel #f0f0f0vuil-wit #ffffff; wit.
Verander dat in je eigen kleur[en].

2. 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://www.w3.org/Style/Examples/011/firstcss.nl.html
http://codex.wordpress.org/Getting_Started_with_WordPress
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Finding_Your_CSS_Styles
http://codex.wordpress.org/FAQ_Troubleshooting

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 {
   <strong> background: url("images/wrapper-bg.png") repeat-y scroll 28% 0px transparent;</strong>
    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;
}

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.

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.