Rand slider bewerken

Hi,

De kleuren om mee te spelen vind je hier:
VOORBEELD:

.slider {
	background:#99cc66; /*appeltjesgroen - wrsch de regel die je zeker wilt aanpassen naar wens*/
	border: 1px solid #ffffff;/*wit; pas aan*/
	box-shadow: 0 0 4px #000000;/*zwart pas aan*/
}

Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

Heb je nog geen childtheme?

1. installeer en activeer ‘one click childtheme’-plug-in
2. activeer de originele theme
3. Dashboard > weergave > child theme
4. beantwoordt de vragen op het scherm
   >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
5. Activeer het childtheme.

==

6. 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.

Controleer het resultaat:
>> Druk <CTRL-F5> om je browser te verversen.
of leeg je browser-cache:
http://www.browserchecker.nl/cache-bestanden-verwijderen

== == == Extra
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen, installeer dan bijv de browser-add-on ‘firebug’ of of rechtsklik en kies ‘element inspecteren’.

Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren etc. aanpassen.

OK, we gaan stap voor stap de boel nalopen.

== == == werking childtheme

1. Zorg dat je childtheme is geïnstalleerd en geactiveerd

• Dashboard > weergave > thema’s >
• selecteer je childthema > activeer je childtheme

• FTP & editor [!!niet een wordprocessor!!] bijv. NOTEPAD++, open styles.css van je childtheme
• voeg de volgende code toe:

  *{color:#99cc66;/*txt-kleur appelgroen*/
     font-size:30px;/*heel grote leters*/
     }

• browser: controleer ’t resultaat…
  Druk <CTRL-F5> om je browser te verversen.
  of leeg je browser-cache:
  http://www.browserchecker.nl/cache-bestanden-verwijderen

Resultaat:
Zie je nu GROTE groene letters? dan werkt je childtheme naar behoren. >> Verwijder bovenstaande code weer uit ‘style.css’ van je childtheme, druk CTRL-F5 en controleer ’t resultaat; Alles is weer als voorheen.

Is er niets veranderd? >> Je childtheme werkt niet…

Breng bovenstaande code eens aan ONDERAAN STYLES.CSS VAN HET PARENTTHEME [het originele theme] en controleer ’t resultaat.
Nu wel groene letters?? Je childtheme werkt niet… Zorg dat je childtheme gaat werken voordat je verder gaat.

== == == controle code

Aangenomen dat childtheme werkt…. zie boven testen we nu de code voor de rand van de slider

1. Open `styles.css van je childtheme en <strong>voeg </strong>de volgende code <strong>toe</strong>:

   .slider {
   		background: #aaaaaa;/*grijze rand ipv wijnrood*/
   	}

   </li>
   <li>sla alle wijzigingen op en FTP-upload styles.css weer naar je site

2. browser: controleer het resultaat

Laat even weten hoe het gaat…

Hi Bionda,

Vreemd. Zeker omdat ik mbv ‘element inspecteren’ [browser] of firebug de boel wel tijdlijk lijk te kunnen aanpassen.

Nou hoop ik dat we het allebei over hetzelfde element hebben dat je wilt veranderen… 😉

Op regel 353 van styles.css staat:

.slider {
		position:relative;
		background:#c44242;/*verander naar wens*/
		padding:10px;
		border:1px solid #c02121; /*verander naar wens*/
		box-shadow:0 0 4px #91745c;/*verander naar wens*/
		border-radius:
	}

Kijk maar of het DAAR aanpassen het gewenste effect heeft.

== == == optie

1. Kopieer bovenstaande code
2. dashboard > weergave > light cafe > integration
3. klik in vak ‘custom CSS’
4. plak de code
5. klik de ‘vink-knop’ rechts in het midden van je scherm om de wijzigingen op te slaan
6. browser: ververs de browser: <ctrl-F5> en controleer het resultaat