Entradas

Mostrando entradas de septiembre, 2014

Como ocultar los iconos de edición rápida o alguna imagen que no queremos que vea

Muchas veces cuando cambiamos la plantilla de nuestro blog no damos cuenta de que aparece la herramienta de edición rápida incluso a la vista del público y esto nos molesta. Para ocultar los iconos de herramienta de edición rápida usaremos la función de cualquiera de estos códigos  CSS tales como: display:none; o visibility: hidden; que vamos a colocar en nuestra plantilla antes de ]]></b:skin> : Con esto esteremos ocultando los iconos de herramienta de edición rápida en la header(cabecera), sidebar(categorías), main(entradas), footer (pie de página) e incluso cualquier otro imagen que no queremos que se vea por ejemplo yo usare la primera, aquí les dejo código emplementado. /* Ocultar iconos de edicion*/ .wrapper .item-control a.quickedit img{ display:none; } .header-wrap .item-control a.quickedit img{ display:none; } .header .item-control a.quickedit img{ display:none; } .sidebar .item-control a.quickedit img{ display:none; } .navbar .item-cont...

Mostrar / ocultar - Efecto Drop-Down

Imagen
Texto visible Texto oculto que se muestra... Texto corto Texto largo que se muestra Texto largo Texto largo Texto largo Texto largo... Texto >> Enlace que se muestra Esta es una técnica creada con CSS por Desizntech pueden ver su ejemplo aquí . Me pareció muy interesante para ocultar contenido ya que sólo necesitamos añadir unas líneas en las hojas de estilos para poder utilizarlo. Depurando un poco el código sería suficiente con añadir justo antes de ]]></b:skin> lo siguiente: #dropdown ul .drop{ display:none; } #dropdown ul:hover .drop{ display:block; padding-bottom:10px; } Luego, donde queremos añadir ese efecto sería algo así: Aquí va el contenido inicial <div id="dropdown"><ul> Sigue leyendo <a class="drop"> Contenido oculto... </a></ul></div> Aquí continúa nuestra entrada. Sigue leyendo Wix.com lets everyone easily design HTML5 websites using an intuitive drag ...