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

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

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

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

Scroll al inicio

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.