Creación de menú similar al adjunto en Twenty Twelve

ramonjosegn · 14 Nov 2014

Hola, estoy revisando como pasar una web de HTML a Wordpress, creo que el theme TWENTY TWELVE PUEDE FUNCIONAR, pero me preocupa que el menú tiene que quedar como el que adjunto.

¿Se os ocurre alguna forma de hacerlo? Ojalá con CSS (si fuera posible)

hasdpk · 15 Nov 2014

Si exactamente, con CSS lo podrás hacer sin problema.

ramonjosegn · 15 Nov 2014

hasdpk dijo:
Si exactamente, con CSS lo podrás hacer sin problema.

Me gustaría saber el código...

grupoGLX · 15 Nov 2014

ramonjosegn dijo:
Me gustaría saber el código...

pasame el link del adjunto para visualizarlo...

lvaldivia · 15 Nov 2014

es muy facil con CSS, pero primero que nada debes registrar el menu_nav en el functions, luego añadirle una clase para que el CSS lo reconozca.

te dejo unos ejemplos muy buenos..

Menus desplegables CSS - Recursos CSS - araudi.net

ramonjosegn · 15 Nov 2014

grupoGLX dijo:
pasame el link del adjunto para visualizarlo...

La idea es tener Twenty Twelve parecido a esta página que le gusta al cliente

Página que les gusta
Viajamos por Colombia S.A. - Inicio

Plantilla que creo que se puede adaptar (demo)
Twenty Twelve | Your favorite WordPress theme, updated and polished for 2012.

- - - Actualizado - - -

lvaldivia dijo:
es muy facil con CSS, pero primero que nada debes registrar el menu_nav en el functions, luego añadirle una clase para que el CSS lo reconozca.

te dejo unos ejemplos muy buenos..

Menus desplegables CSS - Recursos CSS - araudi.net

Sólo sería cambiar el fondo del menú ya luego yo me peleo para que el ancho y demás quede lo más parecido a la web de viajamosporcolombia.

- - - Actualizado - - -

Resumiendo quiero que Twenty se vea así con respecto al menú

lvaldivia · 15 Nov 2014

dame un minuto dejame ver 🙂

- - - Actualizado - - -

podria ser algo asi pero igual tienes que cambiar algunas cosas mas para que se acomode 🙂

ramonjosegn · 15 Nov 2014

lvaldivia dijo:
dame un minuto dejame ver 🙂

Te agradezco, es que no tengo ni idea de cómo hacer esos degradados en Wordpress. Con las sombras y demás ya no me parece tan complejo.

El degradado es bastante diferente del original, ¿quizás una imagen repetida de fondo?

lvaldivia · 15 Nov 2014

es muy facil de hacer, busca la clase ul.nav-menu y agregale esto al final

Insertar CODE, HTML o PHP:

background-color: transparent;
background-image: -moz-linear-gradient(#DDDDDD 0,#EDEDED 100%);
background-image: -webkit-linear-gradient(#DDDDDD 0,#EDEDED 100%);
background-image: linear-gradient(#DDDDDD 0,#EDEDED 100%);
background-repeat: repeat-x;

ramonjosegn · 15 Nov 2014

lvaldivia dijo:
es muy facil de hacer, busca la clase ul.nav-menu y agregale esto al final

Insertar CODE, HTML o PHP:

background-color: transparent; background-image: -moz-linear-gradient(#DDDDDD 0,#EDEDED 100%); background-image: -webkit-linear-gradient(#DDDDDD 0,#EDEDED 100%); background-image: linear-gradient(#DDDDDD 0,#EDEDED 100%); background-repeat: repeat-x;

¿Ese código es para que quede como la imagen que subiste? La idea es que quede igual que la web de referencia, supongo que toca una imagen de fondo repetida?

lvaldivia · 15 Nov 2014

ramonjosegn dijo:
¿Ese código es para que quede como la imagen que subiste? La idea es que quede igual que la web de referencia, supongo que toca una imagen de fondo repetida?

ese es un codigo para asignar un fondo degradado a la clase que se la insertes, en si es un método muy sencillo de combinar 2 colores y resultado de ello es un perfecto degradado que puedes mejor muchísimo con un poco de imaginación y criterio de tus dimensiones como margenes externos e internos.

SnakeNet · 15 Nov 2014

No sé si capte lo que querían hacer aquí les traigo algo en css.

HTML:

 a  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul 

le añadi:

-webkit-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);-moz-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);
border-top: 1px solid #E2DEDE;
border-bottom: 1px solid #E2DEDE;

ramonjosegn · 15 Nov 2014

SnakeNet dijo:

No sé si capte lo que querían hacer aquí les traigo algo en css.

HTML:

 a  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul 

le añadi:

-webkit-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);-moz-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);
border-top: 1px solid #E2DEDE;
border-bottom: 1px solid #E2DEDE;

Muchas gracias, lo único que el degradado bajo los textos deberían tener algo de gris en la parte inferior pero está cercano a lo que busco.

--

Lo que quiero es personalizar algún theme y me parece que Twenty Twelve cumple los requisitos para que quede igual que la plantilla de Viajamosporcolombia, eso es lo que quiero.

grupoGLX · 15 Nov 2014

te combiene poner la imagen de fondo pero obviamente mas angosta para consumir menos recursos y que sea rapida la carga que creo que es eso lo que queres por eso elejiste un theme tan simple

http://cluster2.hostgator.co.in/fil...ate-images/hostgator66_live111631_nav-bg2.png

SnakeNet · 15 Nov 2014

algo así te refieres no entendí muy bien,

solo cambie la de border-bottom de color, border-bottom: 1px solid #C3C1C1;

ramonjosegn · 15 Nov 2014

SnakeNet dijo:
algo así te refieres no entendí muy bien,

solo cambie la de border-bottom de color, border-bottom: 1px solid #C3C1C1;

No, la idea es que quede exactamente así

- - - Actualizado - - -

grupoGLX dijo:
te combiene poner la imagen de fondo pero obviamente mas angosta para consumir menos recursos y que sea rapida la carga que creo que es eso lo que queres por eso elejiste un theme tan simple

http://cluster2.hostgator.co.in/fil...ate-images/hostgator66_live111631_nav-bg2.png

Pues revisando me parece que es el que mejor se adapta para tener un sitio web como el de referencia (la empresa quiere ese diseño).

SnakeNet · 15 Nov 2014

Quizás así:

HTML:

background: linear-gradient(to bottom, #ffffff 0%,#ffffff 48%,#dddddd 100%);
-webkit-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);-moz-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);border-top: 1px solid #E2DEDE;border-bottom: 1px solid #D2CECE;

ramonjosegn · 15 Nov 2014

SnakeNet dijo:

Quizás así:

HTML:

background: linear-gradient(to bottom, #ffffff 0%,#ffffff 48%,#dddddd 100%);
-webkit-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);-moz-box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);box-shadow: 1px 3px 6px 0px rgba(226,222,222,1);border-top: 1px solid #E2DEDE;border-bottom: 1px solid #D2CECE;

Exactamente, genial MUCHÍSIMAS MUCHÍSIMAS GRACIAS, siempre puedo contar con vosotros (me toca ponerme al día con el tema del CSS por lo que veo, jajajaja).

SnakeNet · 15 Nov 2014

Ok perfecto, recuerda aplicárselo al ul, más arriba te deje la ruta exacta.

ramonjosegn · 15 Nov 2014

SnakeNet dijo:
Ok perfecto, recuerda aplicárselo al ul, más arriba te deje la ruta exacta.

Ok, gracias, si no soy capaz te molesto.

Creación de menú similar al adjunto en Twenty Twelve

ramonjosegn

hasdpk

ramonjosegn

grupoGLX

lvaldivia

ramonjosegn

lvaldivia

ramonjosegn

lvaldivia

ramonjosegn

lvaldivia

SnakeNet

ramonjosegn

grupoGLX

SnakeNet

ramonjosegn

SnakeNet

ramonjosegn

SnakeNet

ramonjosegn

Temas similares