[SOLUCIONADO] Aplicar CSS a Wordpress en tema Customizr

[gerard094]

Buenas noches, estoy editando mi página de WP desde el tema Customizr.

Puse en el aside, unos logos de redes sociales, esas imagenes estan indexadas desde la biblioteca de WP, y quiero darles un padding. Ya que están muy pegadas al limite del aside.

Como digo en el editor CSS que quiero aplicar el padding a dichas imagenes, si no tienen clase ni ID?

[ArturoGallegos]

si tu los pusiste seguramente no tendras problemas en agregarles una clase, o bien trata de usar selectores puedes identificarlos mendiante el elemento padre y diferenciarlos por el hermano

selenctores hermanos -> +

busca en google selectores avanzados y/o como aplicar css a elementos hermanos.

Nota: para la próxima trata de mostrar el código html (no php) resultante así sin código solo estoy/estamos adivinando.

[gerard094]

Como puedo ver unicamente el html en un Wordpress?
El texto en negrita, son las imagenes a las que le quiero agregar un padding en el editor CSS del Customizr

<?php
/**
* The sidebar containing the right widget area.
*
* If no active widgets in sidebar, let's hide it completely.
*
* @package Customizr
* @since Customizr 1.0
*/
?>
<?php if ( is_active_sidebar( 'right' ) ) : ?>

<div id="right" class="widget-area" role="complementary">

<?php do_action( 'tc_top_right_sidebar' ); ?>

<aside class="social-block widget widget_social">

<br/>

<a href="Escuchanos en Vivo!" onclick="window.open('http://localhost/wordpress/en-vivo/','Tarde Pogo en Vivo', 'location=no,status=1,scrollbars=1,width=300,heigh t=400'); return false;"><img src="http://localhost/wordpress/wp-content/uploads/2013/09/375291f3americanhi.jpg" border="0"></a>

<div>&nbsp;</div>

<a href="https://www.facebook.com/TardePogo?fref=ts"><img src="http://localhost/wordpress/wp-content/uploads/2013/09/facebookicono.jpg"></a>
<a href="https://twitter.com/TardePogo"><img src="http://localhost/wordpress/wp-content/uploads/2013/09/twitterimg.png"></a>


<div>&nbsp;</div>

<?php do_action( '__social' , 'tc_social_in_right-sidebar' ); ?>

</aside>

<?php dynamic_sidebar( 'right' ); ?>

<?php do_action( 'tc_bottom_right_sidebar' ); ?>

</div><!-- #secondary -->

<?php endif; ?>

[ArturoGallegos]

el HTML lo puedes ver visitando tu sitio y en el navegador presionas -> Ctrl + u

el PHP no nos sirve de nada en la mayoría de los casos cuando se tiene que ver algún tema relacionado a CSS o HTML

en tu caso se puede apreciar los links

Si tienes acceso y puedes agregar una clase seria lo ideal en caso contrario yo usaría selectores avanzados, en particular este

Código CSS:

a[href="http://www.ejemplo.com"] { color: blue; }
 

[gerard094]

Tengo esta clase css que yo apliqué, pero aparentemente no sirve de nada

<style type="text/css">facebookicono.jpg {
padding-left:10px;
}</style>

Y este es el codigo html de los iconos:

<a href="https://www.facebook.com/TardePogo?fref=ts"><img src="http://localhost/wordpress/wp-content/uploads/2013/09/facebookicono.jpg"></a>
<a href="https://twitter.com/TardePogo"><img src="http://localhost/wordpress/wp-content/uploads/2013/09/twitterimg.png"></a>

[Nekko]

gerard094, necesitás URGENTE ponerte a estudiar CSS.

Mientras, te muevo el tema para el foro correspondiente, ya que nada tiene que ver con WordPress.

[Carlangueitor]

gerard094, no puedes usar ese selector en CSS, te recomiendo este manual: http://librosweb.es/css/ en especial el capitulo de selectores.


Saludos

[pzin]

¿Y por qué no le pones una clase a esos enlaces? Es lo más obvio vaya.

De todas formas, podrían hacer algo así:

Código CSS:

aside.social-block div:first-of-type + a {
  display: inline-block;
  margin-left: 20px;
}
 

No es un selector muy robusto, porque va a fallar cuando metas algún div antes y cosas por el estilo. Mejor aplicar alguna clase, que no sé nada de WP, pero se tendrá que poder hacer.

[Carlangueitor]

Y no funciona en IE8

[gerard094]

Iniciado por pzin

¿Y por qué no le pones una clase a esos enlaces? Es lo más obvio vaya.

De todas formas, podrían hacer algo así:

Código CSS:

aside.social-block div:first-of-type + a {
  display: inline-block;
  margin-left: 20px;
}
 

No es un selector muy robusto, porque va a fallar cuando metas algún div antes y cosas por el estilo. Mejor aplicar alguna clase, que no sé nada de WP, pero se tendrá que poder hacer.

La verdad que no sé que es lo que hiciste, pero logró mas o menos lo que quería.
Podrías explicarme mas o menos por que es social-block y div:first of type +a?