✓ Hier leer je websites maken | of je laat ze maken...

Hoe voeg ik CSS code toe in een Wordpress website of webshop?

css-anpassingen-fastest-shop-plakken-customizer

Hoe voeg ik CSS code toe in een WordPress website of webshop?

Hieronder staat de code die je kan toevoegen via Extra CSS in WordPress. Je website of webshop zal er anders uit gaan zien. Wil je hetzelfde resultaat als deze website of webshop? Installeer dan de “Faster Shop” thema in WordPress. Als je die hebt geïnstalleerd kun je vervolgens de CSS code toevoegen aan WordPress. Tussenstand: 424 regels code.

  • Ga naar de Customizer van WordPress
  • Ga naar Extra CSS
  • Kopieer de code
  • Plak de code in Extra CSS
  • Klik op publiceren
/* ROOT OVERRIDE */
:root {
    --nav-color: #ffffff;
    --nav-color-h: #0000a0;
    --nav-bg-h: #fff;
    --nav-sub-color: #000226;
    --nav-sub-color-h: #fff;
    --nav-sub-bg-h: #000;
    --nav-wrap-bg: #f7f7f7;
    --primary-color: #bb007d;
    --secondary-color: #0000a0;
    --tertiary-color: #bb007d;
    --quaternary-color: #fff;
	--vijfde-kleur: #ffedcf;
	--border-color: #e3e3e3;
}
/* FONTS*/
h1{
	font-size:1.5em!important;
}
h1,h2,h3,h4,h5{
	color: var(--nav-sub-color)!important;
}
/** LINKS */
.post .content-wrap a{
	color: var(--primary-color);
	font-weight:bold;
}
.theme-btn{
	color: var(--nav-color)!important;
}
.theme-btn:hover{
	color: var(--primary-color)!important;
}
/** LOGO DESIGN CSS */
.site-title{
	background-color: var(--nav-color-h);
	color: var(--nav-color)!important;
	border-radius:1.5em;
	padding: 0em 0.4em;
}
/* WPFRONT MESSAGE */
#wpfront-notification-bar div.wpfront-message{
	font-size:0.8em;
}
/* MENU */
#masthead .branding-wrap{
	text-align:left!important;
}
#menu-menu{
	font-weight:bold;
}
#navbar{
	background-color: var(--nav-color-h);
	color: var(--nav-color);
}
#nav-bar-style{
	background-color: var(--nav-color-h);
}
.logo-wrap img{
	max-width:200px; 
}
#masthead.site-header{
	background-color: var(--nav-color);
}
#masthead.site-header a{
		color: var(--nav-color-h);
}
#masthead.site-header .branding-wrap a{
	color: var(--nav-color-h);
	font-weight:bold;
	font-size:1.2em;
}
#navbar li > a {
	color: var(--nav-sub-color-h);
}
#navbar li .sub-menu li > a {
	padding:1em 0.2em;
	font-size:0.8em;
	text-transform:none;
}
#masthead ul.header-icon > li > a{
	color: var(--nav-sub-bg-h);
}
#masthead ul.header-icon li > a:hover, #masthead ul.header-icon li > a:focus, #masthead ul.header-icon li > a.active{
	color: var(--primary-color);
}
#masthead .header-icon li:nth-child(3){
	display:none;
}
.fastest-shop-navbar-close{
	margin-top:0.5em;
}
/* MENU MOBILE */
@media only screen and (max-width: 800px) { 	
	#masthead.site-header a{
		color: var(--nav-color)
	}
	#static_header_banner {
			margin:8em 0em!important;
	}
	.ss-content{
		margin-top:2em;
	}
	.fastest-shop-navbar-close, .icofont-ui-close{
		color: var(--nav-color);
	border:0px;
	}
}
/* ZOEKBAR */
.icofont-search-2{
	width:90%;
}
.fly-search-bar .container-wrap .search-close-trigger.active_product_search{
	margin-right:0px;
}
/* MIJN ACCOUNT */
#masthead .header-icon li ul{
	left:-150px;
}
/* BANNER */
#static_header_banner{
	margin:4.0em 0em 2.0em 0em!important;
}
#static_header_banner.header-style-1{
	height:inherit!important;
	background:none!important;
	padding:0.8em;
}
#static_header_banner::after{
	background: none;
	border-bottom:0px solid var(--border-color);
}
#static_header_banner h1{
	font-size:1.5em;
	color: var(--nav-color-h);
	text-shadow:none;
	text-transform:uppercase;
}
/* AFTER BANNER */
#content.site-content{
	padding:2vh 0vh 4vh 0vh;
}
/* BDREADCRUMBS */
#page .fastest-shop-breadcrumbs .post{
	border:none!important;
}
/* SIDEBAR SECONDARY */
.widget_search .search-field, .widget_search input[type=search]{
	border-color: var(--border-color);
}
#secondary .widget-title{
	background-color:#f8f8f8!important;
}
.fastest-shop-sidebar{
	margin-bottom:0vh;
}
.tagcloud a{
	color: var(--nav-color-h);
	font-size:1em!important;
	padding:0.4em;
	line-height:2.677em;
	border:1px solid var(--border-color);
	border-radius:0.25em;
}
.tagcloud a:hover{
	color: var(--nav-color)!important;
	background-color: var(--nav-color-h)!important;
	border:1px solid var(--nav-color-h);
}

/** WP BLOCK */
.wp-block-media-text__content p{
	line-height:1.1em!important;
}

/** SMART SLIDER HOME*/
#smartslider3-3{
	margin-bottom:2.5em
}
.n2-ss-layer .n2-ss-button-container a:hover{
	background: var(--primary-color)!important;
	color: var(--nav-color)!important;
}
/* BERICHTEN-PAGINA */
#main .post{
	margin-bottom:6em;
}
.fastest-shop-blogwrap .post{
	background-color: var(--nav-color);
	padding:1em!important;
}
.fastest-shop-blogwrap .img-box img{
	border:1px solid var(--border-color);
}
.fastest-shop-blogwrap .post-meta-wrap ul{
	border: 0px solid var(--border-color);
}
.post-meta i{
	color: var(--primary-color)
}
.fastest-shop-blogwrap .entry-title{
	color: var(--nav-sub-bg-h);
	margin-top:1em;
	text-align:center;
}
article .more-link{
	left:0px
	right:0px;
	text-align:center;
}
.fastest-shop-blogwrap .comments .widget-title{
	background: var(--nav-color);
}
.comment-reply-login{
	float:right;
}
/* BERICHTEN VIDEO INSTELLINGEN */
.jetpack-video-wrapper {
	display: flex;
	justify-content: center;
	margin:4em;
}
.jetpack-video-wrapper iframe{
		box-shadow:0px 0px 131px 0px rgba(74,74,74,.3);
}
/* WEBSHOP FILTER */
/* GEHELE FILTER WEGHALEN
.fastest-shop-toolbar{
	display:none!important;
}*/
.woocommerce .fastest-shop-toolbar{
	background-color: var(--nav-color);
	border:1px solid var(--border-color)
}
.woocommerce .woocommerce-ordering{
	float:right;
	margin-left:0em;
}
.woocommerce .fastest-shop-toolbar{
	padding:0.5em;
}
.fastest-shop-toolbar .result-count{
	display:none;
}
/* PRODUCTEN */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
	padding-bottom:0px;
}
.woocommerce .products .product, .product .summary, .product .panel{
		border:1px solid var(--border-color);
}
.woocommerce li.product .product_wrap{
	padding:1.5em;
}
.woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale {
	background-color: var(--nav-color);
	color: var(--nav-color-h);
	border:1px solid var(--nav-color-h);
	font-size:0.6em;
	font-weight:bold;
	padding:1em;
}
.woocommerce-page ul.products li.product, .woocommerce li.product .product-image, .woocommerce-product-gallery__image, .entry-summary{
	border-radius:0px!important;
}
.single-product .related h2{
	margin-top:10vh;
	background:none;
	border:none;
	text-align:center;
	font-size:1.4em;
}
.amount{
	color: var(--primary-color);
	font-size:1.2em;
	font-weight:bold;
}
mark, ins{
	background: var(--nav-color-h);
	padding:0.3em;
	border-radius:.2em;
	color: var();
}
mark .amount, ins .amount{
	color: var(--nav-color)
}
.woocommerce .products .product .wc-forward{
	display:none!important;
}
.woocommerce-tabs .panel{
	border-radius:0px!important;
	-webkit-border-radius:0px!important;
}
/* WINKELWAGEN WIDGET */
#wcspc-area{
	background: var(--nav-sub-color);
}
.wcspc-area .wcspc-no-item, .wcspc-area .wcspc-error {
	color: var(--nav-color);
}
.wcspc-total bdi{
	color: var(--nav-color);
}
.wcspc-count span, .wcspc-area-bot .wcspc-action .wcspc-action-inner > div a{
	background: var(--nav-sub-bg-h);
	border:1px solid var(--nav-color);
	border-radius:0px;
}
.wcspc-area-bot .wcspc-action .wcspc-action-inner > div a:hover{
	background-color: var(--primary-color);
	color: var(--vijfde-kleur);
	}
}
/* CHECKOUT */
.fastest-shop-blogwrap .post{
	padding:0px;
}
.fastest-shop-blogwrap td.product-name a{
	color: var(--nav-color-h);
}
.woocommerce-cart-form tr{
	background-color: var(--nav-color);
	margin-top:10px;	
}
.woocommerce-info {
	background: var(--vijfde-kleur);
}
/* POST COLOR */
.page .post{
	border: 1px solid var(--border-color)!important;
}
/** WAVE CONTENT PRINT **/
#content:after{
	content: ;
}
#order_review .amount{
	color:var(--nav-color-h);
}
/* 3-KOL FOOTER */
#colophon.site-footer .widget-wrap .widget-title span {
	background:none;
	color: var(--nav-color);
	font-size:1.3em; 
	padding:0.5em 0em;
}
.product_list_widget li .row{
	background-color: var(--nav-color);
	border:1px solid var(--border-color);
	padding:0.4em 0em;
}
.product_list_widget li .row a{
	 overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}
#colophon.site-footer .widget-wrap li:after{
	height:1px;
}
/* CONTACT */
.wpcf7-form input, .wpcf7-form p{
	margin-bottom:0.3em;
}
/* FOOTER */
.footer_widget_wrap{
	background-color: var(--nav-color-h);
}
footer .widget-title {
	background:none!important;
	color:#fff!important;
}
.footer_widget_wrap, .footer_widget_wrap a{
	color: var(--nav-color)!important;
}
.betaalmethoden{
	background-color:#f8f8f8;
	padding:1em;
	border-top:1px solid var(--border-color);
}
.betaalmethoden span {
	display:block;
	left:0px;
	right:0px;
	text-align:center;
}

.betaalmethoden span img{
	margin:0.5em;
	max-width:100px;
	max-height:40px;
	top:0px;
	bottom:0px;
}
.betaalmethoden span i{
	margin:0.5em;
	font-size:3em;
	color: #000;
}
.footer_widget_wrap i{
	color: var(--nav-color-h);
	background-color: var(--nav-color);
	border:1px solid var(--nav-color-h);
  padding: 0.25em;
  border-radius: 0.25em;
	margin-right:0.5em;
	font-size:1.2em;
}
footer .icofont-rounded-up{
	color: var(--nav-color-h)
}
footer .icofont-rounded-up:hover{
	color: var(--nav-color);
}
footer .site_info{
	background-color: var(--nav-sub-color);
	color: var(--nav-color);
	width:100%
}
footer{
	background-color: var(--nav-sub-color);
}

One thought on “Hoe voeg ik CSS code toe in een WordPress website of webshop?

Geef een reactie

Winkelwagentje is nog leeg. Tijd om iets te kopen