Archivos de Etiquetas: #conceptos #wordpress #woocommerce #shortcodes #css

Colorear el fondo de un checkbox al seleccionar

La propiedad background define el fondo de un elemento, el uso habitual de la propiedad es el de mostrar un color o una imagen de fondo.

input:checked + label{
  background: yellow;  
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

Colorear un texto al seleccionar

El selector ::selection es un pseudo-elemento que se utilizan para añadir contenido estético a un elemento que ha sido destacado (seleccionado).

p::selection {
  background: indianred;
  color: white;
}

p::-moz-selection {
  background: indianred;
  color: white;
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

Alinear el texto alrededor de una imagen de forma circular

La propiedad shape-outside define como se ajusta el texto alrededor de un elemento flotante con dimensiones claramente definidas (alto y ancho).

img#circulo  {
  width: 150px; /*ancho de la imagen*/
  height: 150px; /*alto de la imagen*/
  float: left;
  shape-outside: circle(50%);
  margin-right:10px;
}

Como implementarlo:

<img id="circulo"  src="https://bit.ly/2b64Ibb" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

Agregar sombra a un div con box-shadow

Box-shadow permite implementar fácilmente efectos de sombra externas o internas, prácticamente cualquier elemento puede obtener una sombra utilizando esta propiedad.

.sombra {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Como implementarlo:

<div class="sombra">Texto</div>

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

Agregar la fuente Helvetica a nuestro sitio web

El siguiente código nos ayudará a implementar de manera correcta la fuente Helvetica en nuestro sitio web.

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

Usando :before para cambiar el símbolo de las listas

Los pseudo-elementos normalmente se utilizan para añadir contenido estético a un elemento usando la propiedad content. El elemento :before siempre se muestra antes del contenido.

li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
  
  &:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    font-size: .75em;
  }
}
li.triangle:before { content: "◉"; }

Como implementarlo:

<ul>
  <li class="triangle">Texto</li>
</ul>

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

CSS media queries para Laptops

CSS media queries se entiende como un módulo de CSS que permite adaptar la representación gráfica del contenido web a las características del dispositivo, en este caso la resolución. En el siguiente código podemos conocer el CSS genérico para Laptops.

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si liste los post anteriores referentes a CSS media queries, podrás notar que para este caso hacemos uso de la propiedad «device» directamente y de aquí en adelante podrás agregar las resoluciones de pantalla en las que necesites aplicar cambios.

/* ----------- Laptops ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px)
{
  /* inserta aquí tu código */
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

CSS media queries para Tablets

CSS media queries se entiende como un módulo de CSS que permite adaptar la representación gráfica del contenido web a las características del dispositivo, en este caso la resolución. En el siguiente código podemos conocer el CSS genérico para Tablets.

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si deseas que los cambios se vean tanto en web como en los dispositivos móviles utiliza el siguiente código:

/* ----------- Tablets ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px)
{
  /* inserta aquí tu código */
}

/* cambios css solo para modo vertical */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: portrait) 
{ 
  /* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: landscape) 
{ 
  /* inserta aquí tu código */
}

Si deseas que los cambios se vean solo en los dispositivos móviles utilizamos la propiedad «device» y la insertamos en el código:

/* ----------- Tablets ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px)
{
  /* inserta aquí tu código */
}

/* cambios css solo para modo vertical */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
{ 
  /* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
{ 
  /* inserta aquí tu código */
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

CSS media queries para dispositivos móviles (smartphones)

CSS media queries se entiende como un módulo de CSS que permite adaptar la representación gráfica del contenido web a las características del dispositivo, en este caso la resolución. En el siguiente código podemos conocer el CSS genérico para dispositivos móviles (smartphones).

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si deseas que los cambios se vean tanto en web como en los dispositivos móviles utiliza el siguiente código:

/* ----------- dispositivos móviles ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 736px)
{
  /* inserta aquí tu código */
}

/* cambios css solo para modo vertical */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 736px) 
  and (orientation: portrait) 
{ 
  /* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 736px) 
  and (orientation: landscape) 
{ 
  /* inserta aquí tu código */
}

Si deseas que los cambios se vean solo en los dispositivos móviles utilizamos la propiedad «device» y la insertamos en el código:

/* ----------- dispositivos móviles ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px)
{
  /* inserta aquí tu código */
}

/* cambios css solo para modo vertical */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
{ 
  /* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) 
{ 
  /* inserta aquí tu código */
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css

Restringir el panel de administración a los suscriptores

En el siguiente ejemplo crearemos una función que nos ayudará a restringir el panel de administración a los suscriptores dentro de WordPress utilizando la siguiente acción «admin_init».

Asegúrate de insertar el código en el archivo functions.php del tema activo en tu sitio web.

function restringir_acceso_suscriptores(){
global $current_user;
get_currentuserinfo();
if ($current_user->user_level <  4) {
wp_redirect( get_bloginfo('url') );
exit;
}
}
add_action('admin_init', 'restringir_acceso_suscriptores', 1);

Si deseas más información sobre como desarrollar en

WordPress en español

, visita el Codex oficial de WordPress haciendo clic aquí.

Descargar WordPress del repositorio oficial para México:haciendo clic aquí.
Repositorio oficial de Plugins para WordPress: haciendo clic aquí.
Repositorio oficial de temas gratuitos para WordPress: haciendo clic aquí.

Si necesitas consultoría sobre

WordPress

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css