Vlastní vzhled pro zaškrtávací políčka a přepínače v Contact Form 7, WP komentáře a Woo pokladnu.

Bez zbytečné předmluvy, rovnou k věci, tady je CSSko:

 

/* Vlastni styl checkboxu a input radio v CF7, WP komentarich a Woo pokladne */
input[type="checkbox"],
input[type="radio"] {
	display: none !important;
}

input[type="checkbox"] + span:before,
input[type="checkbox"] + label:before,
input[type="radio"] + span:before,
input[type="radio"] + label:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	width: 1.6em;		/*lze zvetsit nebo zmensit sirku*/
	height: 1.6em;		/*lze zvetsit nebo zmensit vysku*/
	background-size: cover
}
input[type="checkbox"] + span:before,
input[type="checkbox"] + label:before {
	background-image: url("/wp-content/uploads/CF7icon/checkbox-unchecked.svg")
}
input[type="radio"] + span:before,
input[type="radio"] + label:before {
	background-image: url("/wp-content/uploads/CF7icon/radio-unchecked.svg")
}
input[type="checkbox"]:checked + span:before,
input[type="checkbox"]:checked + label:before {
	background-image: url("/wp-content/uploads/CF7icon/checkbox-checked.svg")
}
input[type="radio"]:checked + span:before,
input[type="radio"]:checked + label:before {
	background-image: url("/wp-content/uploads/CF7icon/radio-checked.svg")
}
/* Konec stylu vlastnich vzhledu checkboxu a input radio button v CF7, WP komentarich a Woo pokladne */

Tento CSS styl vložíme do CSS stylů šablony. Načteme obrázky zaškrtávacích políček (checkbox) a přepínačů (input radio), změníme cesty k souborům SVG a vše je hned funkční (v příkladu je nový adresář CF7icon v wp-content/uploads/! Odkaz ke stažení SVG ikonek najdete níže v článku.

Mimochodem, tyto CSS styly budou fungovat jak pro formulář komentářů WordPress, tak pro formulář pokladny WooCommerce. I když, vše samozřejmě záleží na používané šabloně.

Úprava stylu vzhledu acceptance v CF7

S checboxem acceptance v CF7 tyto styly nebudou jen tak fungovat a bude třeba trochu hardcodit. Přejděte do editoru pluginů a vyberte plugin Contact Form 7. Zajímá nás soubor modules/acceptance.php. Najděte v něm řádek 93 a přidejte prázdný tag <span></span>. Takhle:

} else {
$html = sprintf(
'<span class="wpcf7-list-item"><input %1$s /><span></span></span>',
$item_atts );
}

V opačném případě bude zaškrtávací políčko skryto. Jedinou nevýhodou je, že po aktualizaci pluginu bude muset být tento tag přidán znovu.

Pro takové malé prvky vždy se snažím používat vektorové SVG. Je lehčí, rychleji se načítá a především není tak náchylný ke zkreslení jako bitmapové obrázky.

Pokud si WordPress stěžuje na formát souboru, přidejte řádek do souboru wp-config.php:

define( 'ALLOW_UNFILTERED_UPLOADS', true ); 

Stáhnout v .ZIP SVG ikonky pro CF7 checkbox, input radio

Jak upravit barvu ikonek pro checbox nebo input radio v Contact Form 7?

Nebo můžete použít některý ze pluginů, které umožňují nahrávat SVG do knihovny médií. Nebo můžete soubory umístit do vlastního adresáře na serveru a zadat k ním vlastní cestu.

Barvu ikonek lze libovolně změnit například na Flaticon nebo Icon8.

P.S. nezapomeňte zálohovat před jakoukoliv úpravou webu. Nevíte jak? Přečtěte článek zde: Nejlepší WordPress pluginy pro zálohy webu začátečníky