Twenty Eleven – Ronde hoeken

Ga naar weergave > bewerker en selecteer style.css (stylesheet) hier kan je je css aanpassen. Voor ronde hoeken moet je gebruik maken css3 zie hieronder:

#access{
	-webkit-border-top-left-radius: 50px;
	-webkit-border-top-right-radius: 50px;
	-moz-border-radius-topleft: 50px;
	-moz-border-radius-topright: 50px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

#site-generator{
	-webkit-border-bottom-right-radius: 50px;
	-webkit-border-bottom-left-radius: 50px;
	-moz-border-radius-bottomright: 50px;
	-moz-border-radius-bottomleft: 50px;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;
}

De regels met -webkit- ervoor is voor internet Explorer en met -moz- is voor firefox.
Let op dat css3 niet door alle browsers even goed wordt ondersteunt.

#page{
	-webkit-border-top-left-radius: 50px;
	-webkit-border-top-right-radius: 50px;
	-moz-border-radius-topleft: 50px;
	-moz-border-radius-topright: 50px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

Dit rond de bovenste hoekjes af van het blok dat achter het menu staat. Verder zie ik dat er ook nog een lijntje boven het menu staat. Dit kun je weg halen door te zoeken naar #branding in style.css en alles weg te halen dat tussen deze { } tekens staat.

Fix voor footer:

#colophon{
	-webkit-border-bottom-right-radius: 50px;
	-webkit-border-bottom-left-radius: 50px;
	-moz-border-radius-bottomright: 50px;
	-moz-border-radius-bottomleft: 50px;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;
}

Voor het lijntje kan je proberen om het toch weg te halen zoals ik hierboven aangaf en dan het menu zelf een border geven door:

#colophon{
	border:2px solid #BBBBBB;
}

edit: sorry klein foutje #colophon moet zijn access bij de laatste code dus zo:

#access{
	border:2px solid #BBBBBB;
}