Índice
Conectarse
Pagerank
Últimos temas
Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Codigos CSS-HTML-JS
APRENDO EN...
TOMO RECURSOS DE...
RESEÑAS...
Modificacion de los Modulos
AnshiG :: OurHobbies :: Diseño Web :: Tutoriales :: CSS
Página 1 de 1.
Modificacion de los Modulos
por Sakura92 Sáb Abr 06, 2013 6:58 pm
TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE
Modificaciones a los Módulos
Oye! Espera un segundo.
No sé si me recuerdas pero soy esa tonta persona que no pide crédito por sus tutoriales. Así que si estás pensando en dejar link para autentificar el crédito y colocarme en algún rincón de tu foro ¡alto, humano! No es necesario (: Tampoco es necesario postear para ver los codes ni nada de eso.
No sé si me recuerdas pero soy esa tonta persona que no pide crédito por sus tutoriales. Así que si estás pensando en dejar link para autentificar el crédito y colocarme en algún rincón de tu foro ¡alto, humano! No es necesario (: Tampoco es necesario postear para ver los codes ni nada de eso.
Vale. A ver. Hago este post porque ya hay mucha gente en muchos lados que pregunta cómo hacer tal o cual cosa con los módulos, y era necesario hacer un compendio con todo lo que se puede hacer con ellos. El tuto es largo. Muy, muy largo. Así que lo separé en partes, y quien quiere abre el spoiler y ve lo que quiere, sino será eterno.
Ante todo, esto es un tutorial medio. Si lo usan a secas quedará... bueno, quedará. Si lo combinan con los conocimientos impartidos en los tutoriales listados aquí bajo el título de "Propiedades Básicas CSS" podrán lograr cosas bastante más interesantes.
¡Manos a la obra!
Ten en cuenta de que si usas los módulos de la derecha, deberás añadir #content-container div#content { margin-right: 0px !important;} a tu CSS
1. Módulos fijos a un lado
Los módulos se quedan fijos como una barra lateral, como en este foro
- Módulos fijos a un lado:
- Bueno, tienes dos opciones. Puedes hacer que queden exactamente como aquí o que sigan hasta abajo. En el primer caso, tendrás el problema de que el alto de la pantalla te limitará. En el segundo, nada te limitará. Vamos con el código para la primer opción:
- Código:
#left {
position: fixed;
top: 0px;
left:0px;
height: 100%;
}
2. Módulos ocultos que salen al pasar el mouse
Los módulos se quedan escondidos a un lado, y cuando pasas el mouse por donde están se asoman. Aquí tienen un ejemplo.
- Módulos que se asoman:
- Nuevamente, tienes opciones. Puedes hacer que salgan desde un costado, o desde arriba, o desde abajo. Además, en todo caso tendrás el problema del caso anterior: espacio limitado. Pero aquí vamos:
- Código:
#left {
position: fixed;
top: XXpx;
left: YYpx;
height: 100%;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#left:hover {
left: 5px;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
Si quieres que salgan desde la izquierda
- Donde dice top: XXpx; debeis reemplazar el XX por 0, de modo que quedará top:0px;
- Donde dice left: YYpx; debeis reemplazar el YY por el siguiente número: tomen el ancho de vuestros módulos. Redúzcanlo en 15px. Conviértanlo en negativo. ESE NUMERO. Por ejempo, si el ancho de mis módulos es de 300, le resto 15, queda 285, lo hagon negativo, sería left: -285px;
Si quieres que salgan desde arriba
- Donde dice top: XXpx; debeis reemplazar el XX por -90%, de modo que quedará top: -90%;
- Donde dice left: YYpx; debeis reemplazar el YY por la distancia que quieran que tengan los módulos del borde izquierdo - si quieren que la distancia sea de 10px, pues quedará left: 10px;
- Donde dice #left:hover { left: 5px;, debes reemplazar el left: 5px; por un top: 0%;
Si quieres que salgan desde abajo
- Sigue todas las indicaciones que se dan para que salga desde arriba.
- Cuando termines, reemplaza todo lugar donde diga top por bottom.
Si quieres que salgan desde la derecha
- Sigue todas las indicaciones que se dan para que salgan desde la izquierda.
- Cuando termines, reemplaza todo lugar donde diga left por right.
El código está hecho con la idea de que usarás la barra de módulos de la izquierda. Si quieres aplicar estas cosas a la de la izquierda, recuerda cambiar donde diga #left por #right.
3. Módulos arriba del mensaje del índice y del cuerpo del foro
Los módulos se quedan arriba del todo, ocupando un espacio encima del cuerpo del foro y arriba del mensaje del índice en vez de estar a un lado; como en este foro.
- Módulos arriba:
- Esto es bastante simple, pero tienes que pensar de antemano cuántos módulos colocarás. Personalmente, recomiendo fijar el ancho del #wrap del foro antes de hacer esto, o emplear porcentajes en todo.
El código va así:- Código:
#left {
float: none !important;
width: 100% !important;
}
#main {
width: 100%;
}
Para manejar el ancho de los módulos, se añade este otro código con el ancho deseado:- Código:
#left .module {
width: ANCHOpx;
float: left;
}
Por el momento no se me ocurre nada más, pero por dios, si a alguien se le ocurre algo nuevo y no saben cómo hacerlo, no vayan corriendo a dejar una petición, avisen aquí así lo añadimos todo junto en un post (: Si creen que se me pasó algo, ¡por favor avisen! (:
Sakura92- Webmaster
- Mensajes : 175
Puntos : 413742
Reputación : 2
Edad : 31
AnshiG :: OurHobbies :: Diseño Web :: Tutoriales :: CSS
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.|
|
|
» Hemos vuelto!!
» Actualización FEBRERO 2015
» Cosplay (Varios)
» Cosplay (Varios)
» Materias favoritas... y no tanto!
» Que mascotas tienen, tuvieron y les gustaria tener?
» Redes sociales
» PS3: Juegos!
» Consolas o PC?
» BUSQUEDA DE STAFF
» Requisitos y Datos
» Limpieza de afiliados
» Ola ke Ase?
» Guia 7: Reglamento Administracion
» Ideas
» Puntos
» Reglamento Soporte
» Reglamento Tutoriales
» Reglamento Galerias
» Reglamento Recursos
» Reglamento Talleres y Pedidos
» Incumplimientos
» Wings of Freedom [Elite]
» Yugi Oh! RPG [Élite]
» OMEGA NEW WORLD [Afiliación Élite ]
» Creando Mundos [Élite]
» World´s Inuyasha RPG [Normal]
» Fatal Liberty Rol [Élite]
» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
» Hi(: !
» Hola, Hola, ¿hay alguien ahi?
» Bleach: Shadow Of Seireitei [Cambio de dirección]
» Volvi... nose si para siempre pero volvi xD
» Me extravié en el cielo, ¿qué puedo hacer?
» Roma Antiqua {Afiliación Normal}
» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
» Buck Tick Fans [Élite]
» End of Silence [Cambio de dirección y botones]
» Campamento mestizo [Afiliación Elite]
» Render Universe - Elite
» Love orange and cyan (tutorial9
» AVISO
» Code Geass: Endless Dark [Élite]
» Creative Designs (normal)
» Ultimate Inazuma Rol -Cambio de banner-
» Buenas...
» Actualizacion de Abril
» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
» AVISO DE AUSENCIA TEMPORAL