Invata WordPress: Partea a III-a – Customizare

Nu mă așteptam să se întâmple atât de repede partea a III-a a tutorialului ăstuia, dar mă simt în vervă. Am vorbit în articolele precedente despre cum să-ți instalezi WordPress, respectiv cum să instalezi barebone-ul Roots.io. În continuare, o să vă rog să observați că parcă nu seamănă tema mea cu ce se instalează implicit. Total de acord. Asta se întâmplă pentru că am modificat niște parametri legați de afișare. Am inclus un font care mie mi se pare că se potrivește foarte bine cu subiectul techy al acestei „publicații”, am modificat niște culori, și am inclus strictul necesar de widgeturi.

În principiu, îmi place cum se vede. Liniile de mai jos conțin modificările de care vorbeam mai sus. Practic, instrucțiunile CSS implicite ale Roots care m-au interesat au fost suprascrise cu următoarele:

body {
	font-family:'Roboto Condensed';
	background:#191d20;
}
a {
	color:#2b7bb9;
}
a:hover {
	color:#1b6ba9;	
}
.navbar-default {
	border:none;
}
.banner {
	background:#191d20;
}
.main {
	background:#fff;
	border-radius:5px;
}
.banner .container {
	text-align:center;
	padding-top:30px;
}
.navbar-header {
	margin:0 auto;
	float:none;
	clear:both;
}
.navbar-brand {
	float:none;
	font-size:26px;
	color:#fff!important;
}
#menu-meniu-principal {
	float:none;
	margin:0 auto;
}
.navbar-collapse {
	text-align:center;
}
.navbar-nav > li {
	display:inline-block;
	float:none;
}
.navbar-default .navbar-nav > li > a {
	color:#cccccc;
}
.navbar-default .navbar-nav > li > a:hover {
	color:#999999;
}
.sidebar {
	color:#fff;
}
.sidebar h3 {
	color:#fff;
}
.widget ul {
	margin-left:0px;
	padding-left:15px;
}

În plus față de asta, am mai inclus niște fișiere de stil care definesc familia de fonturi „Roboto Condensed”, pe care le puteți găsi pe fonts.google.com:

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

În încheiere, puteți găsi tema roots cu micile modificări pe care i le-am facut, aici.