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
Recursos sobre Tipografía
Practical Typography
Excelente web conde encontrar teoría del uso, composición y formato de tipografía. También podemos encontrar recomendaciones de fuentes.
Cambiar entre lista y cuadrícula en una vista de Toolset
Queremos cambiar en una vista de Toolset entre una lista de registros y una cuadrícula de registros.
Primero crearemos 2 páginas, llamadas grid-view y list-view, y en cada una de ellas insertaremos los siguientes enlaces:
<a href="/grid-view/" class="switch">Grid</a> | <a href="/list-view/" class="switch">List</a>Crearemos 2 vistas iguales e insertaremos el siguienre js en las mísmas:
jQuery( function( $ ) {
$( 'a.switch' ).click( function() {
var url = this.href + '?' + window.location.href.split('?')[1];
window.location.href = url;
return false;
} );
} );Visto en el foro de Toolset
Función para obtener y utilizar la url del tema en un shortcode
Shortcode para ahorrarnos poner ruta absoluta a la hora d eir a buscar recursos al directorio del tema. La imagen se encontrará dentro del tema utilizado:a función la insertamos dentro de functions.php
function theme_url_shortcode( $attrs = array (), $content = '' ) {
$theme = ( is_child_theme() ? get_stylesheet_directory_uri() : get_template_directory_uri() );
return $theme;
}
add_shortcode('theme', 'theme_url_shortcode' );Ejemplo de uso
<img src="[theme]/images/image-name.jpg" width="250" height="250" alt="This is an image" />Visto en TheWebTaylor