Lightbox paea todo. Aquí debajo está el ejemplo "mixed" de la página del autor, mostrando contenidos de todas clases: imágenes, películas, animaciones flash, frames...
No está nada mal...
Mixed Content Gallery
swf
movie
iframe
Y las vueltas que le he dado hasta encontrar la "pega"...
Y es que el artículo de Xyberneticos está incompleto: ofrece su CSS, el HTML del gradient y una corrección para IE6.
Pero así no me funcionaba, hasta que decidí ir a la página fuente del artículo Webdesignerwall, donde se muestra un download... y ahí ya me figuré que habría imágenes.
Efectivamente: todos los gradientes están hechos a base de imágenes... he tardado un congo en descargármelas todas, con resultados diversos: la mayoría se ven bien, salvo por el glossy link, que no lo veo por ningna parte; el gradient con query, que me mandaba a la porra la mitad de los hacks de este blog, de forma que paso...; y el Zebra, que se me ha quedado corto para la segunda palabra del ejemplo (con un content-Wrapper más ancho quedaba arreglado... pero no tengo ganas de ponerme a mover la plantilla sólo por la segunda palabra de un gradient).
Y se me ocurre que lo mismo vale para títulos en h1 que en cualquier otro, p.e. h2, que son los que suelen utilizar las plantillas de blogger.
En cuanto al código, ya digo que son un CSS que me he descargado y al que he añadido las correspondientes imágenes; un script query para el caso; y una corrección para que el gradient duncione en IE6...
Aparco el CSS para cuando tenga tiempo... en Epílogo.
Note: only this sample has applied IE6 PNG hack
Note: in this sample the <span> tag is prepended by jQuery (it is not in the source code).
See, it is very practical. Try it on your design today. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante.
Mauris aliquam leo at pede pharetra condimentum. Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. Maecenas eu est non nunc gravida laoreet. Vestibulum orci. Donec bibendum neque a dui.
NOTA: De lo dicho nada: Haciendo pruebas y abriendo el blog en varias ventanas, debí confundirme y mandar un script a la porra... ya no funciona nada. Tres días de trabajo a la porra... Pero los voy a recuperar: A cabezonería no me gana Blogger.... pero lo he conseguido:
"Imitar" la librería de Joomia, para hacer algo parecido al sliderdraw (ha quedado algo chungo... pero llevo dos días qumándome las pestañas para hacerlo funcionar).
Lo que me ha quedado bien, sin discusión, es la barra del blog, así como el acordeón (que ha sido lo único fácil y rápido de hacer... más o menos: en comparación, digamos).
Encontrar las imágenes ha sido tarea de locos...
Seguiré haciendo pruebas... ahora con el carrusel y... no sé si aquí ya frenaré...
Y así nos dejamos de tanto trabajo. Y queda también muy guapo. Lo podéis ver en el footer de mi blog de pruebas Imagen
Dejad los scripts como están y tan sólo eliminad todo el css del Fancy menú para colocar éste en su lugar:
#fancymenu {
position: relative;
width: 100%;
background:#2E5F6B;
padding: 15px;
margin: 10px 0;
overflow: hidden;}
#fancymenu ul{
padding: 0;
margin: 0;}
#fancymenu ul li {
float: left;
list-style: none;}
#fancymenu ul li a {
display: block;
float: left;
color:#fff;
padding:10px 20px;
position: relative;
overflow: hidden;
z-index:10;
text-decoration:none;
font-size:18px; }
#fancymenu li.background {
z-index: 8;
border-bottom:5px solid #18B3DB;
position: absolute;
visibility: hidden;
padding:0 0 0;
height:40px;
}
La solución la da Alvin en el foro del menú-fancy... y no puedo daros su URL porque... le han hackeado el blog. Mecachis...
Sí... ya sé que queda muy mono... pero me ha costado un trabajo enorme implementarlo.
Para empezar, porque me ha costado un congo encontrar los scripts (si no es porque alguien del foro del autor del hack tuvo a bien colocar un zip para descargarlos... me quedo a uvas)
Para seguir, porque el autor usa imágenes de palabras, en lugar de las palabras tal cual... y menudo lío si hay que andar bajándose fuentes para construir los términos y ponerlos en el menú... de manera que, menos mal que un alma caritativa de ese mismo foro ofrece la solución para poner los términos tal cual, en lugar de las imágenes.
Y el background que da como ejemplo el autor: se me quedaba enano para todos los vínculos que quería poner... entre otras cosas por probar el ancho y que se ajustara a las cabeceras más anchas. Pues no hubo manera: su background (una cajita con esquinas redondeadas, de color naranja) es una monería... pero no cabe el ancho que prefiero, a menos que... me vuelva loca dentro del CSS y los scripts. Y no me apetece, francamente.
Al final, para que me salga tal cual lo véis, he optado por hacerme un "refrito" particularísimo con el CSS, con un link para el CSS principal del hack y otro CSS "a mano" dentro del skin, para incluir el texto "amanuense" y dejar abierta la posibilidad de incluir un día imágenes en el menú. Además, he pasado de la cajita tan mona y me quedo tan contenta añadiendo un color de fondo.
Total: un lío de órdago.
Pero lo he conseguido, je.
Ya lo comento otro día en Epílogo. Mientras tanto, si alguien quiere mirar el hack original y las contestaciones al mismo (donde encontré todas las soluciones que no da el autor) puede echar un vistazo a devthought.
Los zips para descargar los scripts y las imágenes, están en tangelo
Y, en cuanto a la solución para colocar texto, en lugar de imágenes de texto, la ha dado Michael en el mismo foro...
Me ha costado tanto trabajo... que ha dejado de resultar "divertido" el menú en cuestión... ufffff...
Por cierto: a quien no le guste andar con scripts, lo lleva claro: nada menos que cuatro...
También hay un formulario con selector de imagen para perfil, pero... yo doy las pautas y, mejor que lo pruebe otro, je. Yo ya he tenido bastante menú.
|
|
