abril 2020

Label de checkbox personalizada

CSS
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 »

Cambiar entre lista y cuadrícula en una vista de Toolset

Toolset, Toolset views

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

Cambiar entre lista y cuadrícula en una vista de Toolset Leer más »

Función para obtener y utilizar la url del tema en un shortcode

Funciones wordpress

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

Función para obtener y utilizar la url del tema en un shortcode Leer más »

Usar Toolset Views y modal de Bootstrap para mostrar contenido

Bootstrap, Toolset
// this part displays the trigger for the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".xmit-modal-sm-[wpv-post-id]">
<a href="[wpv-post-url]" class="btn btn-info" data-toggle="modal" data-target="#[wpv-post-id]"><div class="imageclass"><img src="[wpv-post-featured-image output="url" size="medium"]" /></div><h4>[wpv-post-title]</h4></a>
</button>

// this is what appears in the modal
<div class="modal fade xmit-modal-sm-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="[wpv-post-title]" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
			  // can be any HTML content
        </div>
    </div>
</div>

Visto en https://gist.github.com/davekuhar/648266b99953828c252778581ce3e7cc

Usar Toolset Views y modal de Bootstrap para mostrar contenido Leer más »

Scroll al inicio