Centrar logo y cambiar color de botones en CSS

Hola amigos,


Estoy adaptando un theme en html5 de una web a otra y con ello la respectiva modificación de colores en barras, colores, etc....
Lo tengo casi todo ya arreglado, gracias a "inspeccionar elemento" e ir modificando el style.css, pero hay un par de cosas que no se hacer... dejo captura de pantalla por si podeis ayudarme:



La web de pruebas donde estoy haciéndolo es sepultura.xxx

Donde pone 1: Como veis, no esta centrado, como podría hacer para que el logo quede centrado? donde y que código debo insertar?

Donde pone 2: El cajón es verde, me gustaría que fuera del mismo color que las barras #f63be7 pero no doy con la tecla ni siquiera con la ayuda del "inspeccionar elemento"....

Donde pone 3: Me gusta tal cual esta, de color negro, pero cuando paso el ratón por encima (link) sale de color verde.... como puedo cambiar el color de los links (al pasar el ratón encima) a #f63be7?


Bueno, espero que alguien pueda ayudarme con estos detalles que son los últimos que me faltan para terminar el theme 🙂


Saludos!!!

Número 1: Agrégale el atributo "align="center" a la imágen, Quedaría algo asi: <img align="center" alt="Logo" src="URLIMAGEN"><img>

Número 2: El cajón o botón no es más que un elemento "a" con algo de css, es facil modificarlo. Tan solo busca en sus atributos el valor de "class" y después buscas dicho valor en la hoja de estilo y le cambias el color de fondo. Quedaría algo asi:

.nombredelbotón {

background-color:#F63BE7;

Número 3: Éste es algo complicado si no se te da bien el css, ya que requiere conocer los pseudoelementos.

Para cambiar el color necesitas poner esto en la hoja de estilo:

a:linkquetuquieras {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #f63be7;
}

Dónde dice "a:hover" es el color al que cambiara el enlace al pasar el cursor.

Espero que te haya servido :encouragement:

Creo que lo que me explicas es muy complicado para mi, pero igualmente voy a intentarlo, espero no dejarlo roto jeje


Gracias por la ayuda 😛8:

---------- Post agregado el 07-nov-2013 hora: 14:57 ----------

xPloit dijo:

Número 1: Agrégale el atributo "align="center" a la imágen, Quedaría algo asi: <img align="center" alt="Logo" src="URLIMAGEN"><img>

Hacer clic para expandir...

En el header encontre esta linea, a la que he añadido el "align="center" " pero no funciona, puedes decirme si la he colocado mal please?

<a href="<?php echo site_url(); ?>" title="<?php bloginfo('name'); ?>"><img align="center" src="<?php echo get_template_directory_uri(); ?>/imgs/logo.gif" alt="Logo" /></a>

Josetxo dijo:

Creo que lo que me explicas es muy complicado para mi, pero igualmente voy a intentarlo, espero no dejarlo roto jeje


Gracias por la ayuda 😛8:

---------- Post agregado el 07-nov-2013 hora: 14:57 ----------




En el header encontre esta linea, a la que he añadido el "align="center" " pero no funciona, puedes decirme si la he colocado mal please?

<a rel="nofollow" href="<?php echo site_url(); ?>" title="<?php bloginfo('name'); ?>"><img align="center" src="<?php echo get_template_directory_uri(); ?>/imgs/logo.gif" alt="Logo" /></a>

Hacer clic para expandir...

Ja! Pues si soné algo complicado, pero tan sólo requieres conocimientos básicos para entenderlo.

Que raro que te salga eso con php, ami me salio normal con html.
Bueno, mira:


Donde dice "middle" ponle "center" y ya.

Aquí tienes un zoom

no encuentro eso en header, ni footer ni style......

Josetxo dijo:

no encuentro eso en header, ni footer ni style......

Hacer clic para expandir...

Prueba metiendo el elemento imagen dentro de un div y a éste agregale el atributo align="center"
Algo así:
<div align="center">
<img alt="ForeverStalone" src="foreveralone.gif"></img>
</div>

xPloit dijo:

Prueba metiendo el elemento imagen dentro de un div y a éste agregale el atributo align="center"
Algo así:
<div align="center">
<img alt="ForeverStalone" src="foreveralone.gif"></img>
</div>

Hacer clic para expandir...

Todo perfecto (a excepción del banner que viendo que no doy con la tecla lo haré mas grande y me ahorro dolores de cabeza xD), muchas gracias por tu tiempo y ayuda!! 😛8:😛8:😛8:😛8:

Una manera fácil de trabajar con estos tipos de editores es con navegador Crhome o firefox , permiten utilizar plugins entre ellos uno muy famoso y útil llamado FIREBUG , este plugin permite ver y editar código en vivo sin ser un profesional de la materia , una vez que consigues dejar las cosas a tu gusto puedes ir y meter mano a sabiendas de lo que haces .... , espero haber aportado mi granito de arena , saludos