CSS

Toolset: Select2

jQuery(document).ready(function() {
    jQuery('#desplegabledir select').select2();
});

Añadir select2 en un desplegable de toolset. Els desplegable tiene id y css class desplegabledir.

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Toolset: Select2 Leer más »

WordPress: Agregar efecto de mouseover al bloque Gutenberg en WordPress

.shadow-with-mouse-over-effect {
    background: #efefef;
    box-shadow: 0 0 17px 0 rgba(0,0,0,0.06);
    margin-bottom: 30px;
    transition: .3s;
}

.shadow-with-mouse-over-effect:hover {
    box-shadow: 0 20px 25px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

Visto en https://myknowledgeportal.com/2019/01/09/add-mouseover-effect-to-gutenberg-block-in-wordpress/

WordPress: Agregar efecto de mouseover al bloque Gutenberg en WordPress Leer más »

Label de checkbox personalizada

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

input[type=checkbox] + label {
    color: black;
}
input[type=checkbox]:checked + label {
    background: #efefef;
}

Si queremos que solo afecte a un form determinado añadimos la clase y lo metemos todo de un div

.miEStilo label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

.miEstilo label:hover {
 background:#eee;
 cursor:pointer;
}
<div class= "miEStilo">contenido</div>

Link interesante para revisar

https://toolset.com/forums/topic/css-styling-of-checkboxes-in-views-parametric-search/

https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp

Label de checkbox personalizada Leer más »

Scroll al inicio