WP template Nisarg – Changer les couleurs du thème / Change colors

WP template Nisarg – Changer les couleurs du thème / Change colors

Modifiez les couleurs de vos textes et boutons sur le template Nisarg Free

 

Le template wordpress Nisarg est un super thème gratuit et entièrement responsive et prêt à la traduction qui vous autorise de créer de superbes blogs et sites Web. Le thème est bien adapté aux voyages, à la photographie, aux recettes, au design, aux arts, aux sites Web personnels et à tout autre site créatif et aux blogs. Le thème est développé à l’aide de Bootstrap 3, qui le rend mobile et compatible avec les tablettes.

 

L’outil de personnalisation de WordPress propose diverses options pour changer l’apparence du thème. L’outil de personnalisation du thème peut être utilisé pour ajouter votre propre image d’en-tête de hauteur variable, image d’arrière-plan, pour définir la couleur d’arrière-plan, la couleur du texte de l’en-tête et la couleur de soulignement. Mais Uniquement pour la version Pro !

Voici une petite astuce pour changer la couleurs de vos menu, liens et bien autres …

Apparence >> Éditeur de thème
=> style.css

Par défaut la couleurs est #009688, trouvez votre code couleur adapté.

Ajoutez le code ci dessous en fin de page (style.css) après avoir remplacer tout les champs par votre code couleur !

/** ----- Astuces.Sur-Le.Net ------- **/

a:active,
	a:hover,
	a:focus {
	    color: #mycolor!important;
	}
	.main-navigation .primary-menu > li > a:hover, .main-navigation .primary-menu > li > a:focus {
		color: #mycolor!important;
	}	
	.main-navigation .primary-menu .sub-menu .current_page_item > a,
	.main-navigation .primary-menu .sub-menu .current-menu-item > a {
		color: #mycolor!important;
	}
	.main-navigation .primary-menu .sub-menu .current_page_item > a:hover,
	.main-navigation .primary-menu .sub-menu .current_page_item > a:focus,
	.main-navigation .primary-menu .sub-menu .current-menu-item > a:hover,
	.main-navigation .primary-menu .sub-menu .current-menu-item > a:focus {
		background-color: #fff!important;
		color: #mycolor!important;
	}
	.dropdown-toggle:hover,
	.dropdown-toggle:focus {
		color: #mycolor!important;
	}
	@media (min-width: 768px){
		.main-navigation .primary-menu > .current_page_item > a,
		.main-navigation .primary-menu > .current_page_item > a:hover,
		.main-navigation .primary-menu > .current_page_item > a:focus,
		.main-navigation .primary-menu > .current-menu-item > a,
		.main-navigation .primary-menu > .current-menu-item > a:hover,
		.main-navigation .primary-menu > .current-menu-item > a:focus,
		.main-navigation .primary-menu > .current_page_ancestor > a,
		.main-navigation .primary-menu > .current_page_ancestor > a:hover,
		.main-navigation .primary-menu > .current_page_ancestor > a:focus,
		.main-navigation .primary-menu > .current-menu-ancestor > a,
		.main-navigation .primary-menu > .current-menu-ancestor > a:hover,
		.main-navigation .primary-menu > .current-menu-ancestor > a:focus {
			border-top: 4px solid #mycolor!important;
		}
		.main-navigation ul ul a:hover,
		.main-navigation ul ul a.focus {
			color: #fff!important;
			background-color: #mycolor!important;
		}
	}

	.main-navigation .primary-menu > .open > a, .main-navigation .primary-menu > .open > a:hover, .main-navigation .primary-menu > .open > a:focus {
		color: #mycolor!important;
	}

	.main-navigation .primary-menu > li > .sub-menu  li > a:hover,
	.main-navigation .primary-menu > li > .sub-menu  li > a:focus {
		color: #fff!important;
		background-color: #mycolor!important;
	}

	@media (max-width: 767px) {
		.main-navigation .primary-menu .open .sub-menu > li > a:hover {
			color: #fff!important;
			background-color: #mycolor!important;
		}
	}

	.sticky-post{
	    background: #mycolor!important;
	    color:white;
	}
	
	.entry-title a:hover,
	.entry-title a:focus{
	    color: #mycolor!important;
	}

	.entry-header .entry-meta::after{
	    background: #mycolor!important;
	}

	.fa {
		color: #mycolor!important;
	}

	.btn-default{
		border-bottom: 1px solid #mycolor!important;
	}

	.btn-default:hover, .btn-default:focus{
	    border-bottom: 1px solid #mycolor!important;
	    background-color: #mycolor!important;
	}

	.nav-previous:hover, .nav-next:hover{
	    border: 1px solid #mycolor!important;
	    background-color: #mycolor!important;
	}

	.next-post a:hover,.prev-post a:hover{
	    color: #mycolor!important;
	}

	.posts-navigation .next-post a:hover .fa, .posts-navigation .prev-post a:hover .fa{
	    color: #mycolor!important;
	}


	#secondary .widget-title::after{
		background-color: #mycolor!important;
	    content: "";
	    position: absolute;
	    width: 50px;
	    display: block;
	    height: 4px;    
	    bottom: -15px;
	}

	#secondary .widget a:hover,
	#secondary .widget a:focus{
		color: #mycolor!important;
	}

	#secondary .widget_calendar tbody a {
	    background-color: #mycolor!important;
	    color: #fff!important;
	    padding: 0.2em;
	}

	#secondary .widget_calendar tbody a:hover{
	    background-color: #mycolor!important;
	    color: #fff!important;
	    padding: 0.2em;
	}	

/** ----- Fin | Astuces.Sur-Le.Net ------- **/

Les couleurs les plus utilisées en 2019

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *