Como poner un logo en WordPress usando CSS

  • Autor Autor Aquiles Vaesa
  • Fecha de inicio Fecha de inicio
A

Aquiles Vaesa

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, alguien me puede ayudar para cambiar un logotipo de mi pagina, este es el codigo que tiene:
/* header */
#marco{margin:0 auto;width:990px;}
#cabeza {height: 140px;}
#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: no-repeat;}
.banner-top {
margin-top: 35px;
display: block;
width: 728px;
height: 90px;
float: right;
}
#menu {background: url(images/men.png) repeat-x;text-align:center;margin: 15px auto;height: 40px;}
#menu li {border-right: 1px solid;display:inline;list-style-type:none;margin:0;padding:0;}
#menu li:last-child {border-right: none;}
#menu ul {margin:0;padding:4px;}
#menu ul li a {text-transform: uppercase;line-height: 33px;font-weight: 700;font-size: 10px;color: white;text-decoration: none;padding: 10px;-moz-transition: all 0.218s;-ms-transition: all 0.218s;-o-transtion: all 0.218s;-webkit-transition: all 0.218s;transition: all 0.218s;}
#menu ul li a:hover {text-shadow: none;color:#000;background:#fff;text-decoration:none;}
#estrenos ul > li {position: relative; float: left;list-style: none;margin: 0 20px 20px 0;font-size: 10px;z-index: 1;}
#estrenos ul li img { display: block; position: relative; z-index: -1;}
#estrenos ul a:hover:after,#estrenos ul a:focus:after{content: attr(title);color: #fff;position: absolute;bottom: 20px;padding: 5px 0;min-height: 15px;line-height: 15px;text-align: center;width: 130px;background: url(images/men.png) repeat-x;display: block;text-shadow: -1px -1px 0 #382D2B;}
#estrenos {margin: 30px 0 0;}


La cosa es que cuando pongo en #logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: no-repeat;}

antes del no-repeat el url de la foto en wordpress no me aparece nada y se queda en negro, si me pudieran ayudar se los agradeceria.
 
Cual es el código del header? pega desde la etiqueta <body>
 
krusty72 dijo:
Cual es el código del header? pega desde la etiqueta <body>
Hacer clic para expandir...

Perdon se me perdio xD
*/
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
body {color:#333;font: 12px Verdana;background:black;}
* {margin:0;padding:0;}
.clear {clear:both;}
img {border:0;}
a {color:#000;text-decoration:none;}
a:hover {color:#444;text-decoration:none;}
ul {list-style: none;}
textarea ,input{outline: none;}
.alignnone {margin: 5px 20px 20px 0;}
.aligncenter, div.aligncenter {display:block;margin: 5px auto 5px auto;}
.alignright {float:right;margin: 5px 0 20px 20px;}
.alignleft {float:left;margin: 5px 20px 20px 0;}
.aligncenter {display: block; margin: 5px auto 5px auto;}
a img.alignright {float:right;margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float:left;margin: 5px 20px 20px 0;}
a img.aligncenter {display: block;margin-left: auto;margin-right: auto}
.wp-caption {background: #fff; border: 1px solid #f0f0f0;max-width: 96%;padding: 5px 3px 10px;text-align: center;}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {border: 0 none;height: auto; margin:0;max-width: 98.5%;padding:0;width: auto;}
.wp-caption p.wp-caption-text {font-size:11px;line-height:17px; margin:0;padding:0 4px 5px;}
/* ajustes */
#menu,.mwidget,h3.widgetitulo,.wp-pagenavi a, .wp-pagenavi span,#caja,.marco-filas,.sinopsis,h3#titulocomemt,#respond input#enviar{-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
#footer a,h3.widgetitulo,.wp-pagenavi a, .wp-pagenavi span,.sinopsis h3,.texto,#sidebar ul li a,.mwidget p,.mwidget a ,.mwidget{color: #fff;}
/* fin ajustes */
/* header */
#marco{margin:0 auto;width:990px;}
#cabeza {height: 140px;}
#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background:<img scr="http://tpeliculas.esy.es/wp-content/uploads/2014/01/fondoazul.jpg" title="inicio" alt="Tpeliculas"/> no-repeat;}
.banner-top {
margin-top: 35px;
display: block;
width: 728px;
height: 90px;
float: right;
}
 
Aquiles Vaesa dijo:
Hola, alguien me puede ayudar para cambiar un logotipo de mi pagina, este es el codigo que tiene:
/* header */
#marco{margin:0 auto;width:990px;}
#cabeza {height: 140px;}
#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: no-repeat;}
.banner-top {
margin-top: 35px;
display: block;
width: 728px;
height: 90px;
float: right;
}
#menu {background: url(images/men.png) repeat-x;text-align:center;margin: 15px auto;height: 40px;}
#menu li {border-right: 1px solid;display:inline;list-style-type:none;margin:0;padding:0;}
#menu li:last-child {border-right: none;}
#menu ul {margin:0;padding:4px;}
#menu ul li a {text-transform: uppercase;line-height: 33px;font-weight: 700;font-size: 10px;color: white;text-decoration: none;padding: 10px;-moz-transition: all 0.218s;-ms-transition: all 0.218s;-o-transtion: all 0.218s;-webkit-transition: all 0.218s;transition: all 0.218s;}
#menu ul li a:hover {text-shadow: none;color:#000;background:#fff;text-decoration:none;}
#estrenos ul > li {position: relative; float: left;list-style: none;margin: 0 20px 20px 0;font-size: 10px;z-index: 1;}
#estrenos ul li img { display: block; position: relative; z-index: -1;}
#estrenos ul a:hover:after,#estrenos ul a:focus:after{content: attr(title);color: #fff;position: absolute;bottom: 20px;padding: 5px 0;min-height: 15px;line-height: 15px;text-align: center;width: 130px;background: url(images/men.png) repeat-x;display: block;text-shadow: -1px -1px 0 #382D2B;}
#estrenos {margin: 30px 0 0;}


La cosa es que cuando pongo en #logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: no-repeat;}

antes del no-repeat el url de la foto en wordpress no me aparece nada y se queda en negro, si me pudieran ayudar se los agradeceria.
Hacer clic para expandir...

eso del logotipo esta en el panel de la plantilla que uses verificalo o en su caso el link de tu web para analisarla ya que el codigo que propones es solo del estilo y la posicion de este
 
Elpadrotte dijo:
eso del logotipo esta en el panel de la plantilla que uses verificalo o en su caso el link de tu web para analisarla ya que el codigo que propones es solo del estilo y la posicion de este
Hacer clic para expandir...


Bueno el logotipo que tenia lo borre, pero ahora que quiero poner el mio es donde tengo el problema, se supone debe estar al lado izquierdo del banner de marvel Blog
 
ok solo corrije el codigo que esta en negrita.
asi debe de estar como lo tengo en negrita
Insertar CODE, HTML o PHP: 
/* header */
#marco{margin:0 auto;width:990px;}
#cabeza {height: 140px;}
[B]#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: url(images/logoh.png) no-repeat;}[/B]
.banner-top {
margin-top: 35px;
display: block;
width: 728px;
height: 90px;
float: right;
}

luego sube tu logo a las imagenes de wordpress y sustituye el enlace por el nuevo

---------- Post agregado el 15-ene-2014 hora: 20:13 ----------

incluso puedes
poner esa linea de codigo asi
Insertar CODE, HTML o PHP: 
#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: url(http://www.cacoduro.com/demo2/wp-content/themes/cinedoblefree/images/logoh.png) no-repeat;}
para que asi solo sustituyas en link de tu logo y listo
 
Última edición:
Elpadrotte dijo:
ok solo corrije el codigo que esta en negrita.
asi debe de estar como lo tengo en negrita
Insertar CODE, HTML o PHP: 
/* header */
#marco{margin:0 auto;width:990px;}
#cabeza {height: 140px;}
[B]#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: url(images/logoh.png) no-repeat;}[/B]
.banner-top {
margin-top: 35px;
display: block;
width: 728px;
height: 90px;
float: right;
}

luego sube tu logo a las imagenes de wordpress y sustituye el enlace por el nuevo

---------- Post agregado el 15-ene-2014 hora: 20:13 ----------

incluso puedes
poner esa linea de codigo asi
Insertar CODE, HTML o PHP: 
#logo h1 a{text-indent: -9999px;width:250px;float:left;height: 152px;background: url(http://www.cacoduro.com/demo2/wp-content/themes/cinedoblefree/images/logoh.png) no-repeat;}
para que asi solo sustituyas en link de tu logo y listo
Hacer clic para expandir...


SIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII!!!!!!! Gracias hermano tenia como dos semanas trabado con eso y hoy gracias a ti pude hacerlo :sorrow: es hermoso :sorrow: enserio muchisimas gracias😀
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

ultracobra
Cómo ajustar nav con CSS para botones más estrechos
Respuestas
4
Visitas
400
ultracobra
ultracobra
B
Cómo agrandar un logo en WordPress usando CSS personalizado
Respuestas
5
Visitas
189
bewstars
B
E
problema con position:fixed
Respuestas
3
Visitas
341
eic2010
E
ultracobra
Optimización de atributos de imagen en WordPress usando CSS
Respuestas
2
Visitas
571
Getsuga
Getsuga
J
Mejorando la apariencia de un Search Box en WordPress usando CSS
Respuestas
5
Visitas
973
JRLEMUS
J
Atrás
Arriba