¿Cómo subir esta línea y ponerle color?

Sam40 Seguir

Eta
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Abr 2018
Mensajes
1.441
Estoy intentando insertar mediante html un extra a mis publicaciones, pero soy bastante patoso con html y no me queda bien.

Lo que quiero haces es subir un poco la barra inferior para que esté más pegada al icono y el texto, también cambiar el color de esa barra si es posible. El icono y el texto los he puesto así mediante una tabla sencilla de WP y borrando el color de los márgenes (no se si hay alguna forma más sencilla de hacerlo).

También me gustaría si se puede, alinear el texto con el icono para que quede mejor (ahora está mal).

Este es el código html que he utilizado:

Insertar CODE, HTML o PHP:
<table style="width: 100%; border-collapse: collapse; border-style: hidden;">
<tbody>
<tr>
<td style="width: 15.9483%; border-style: hidden; text-align: center;"><img class="alignnone " src="https://w7.pngwing.com/pngs/759/843/png-transparent-computer-icons-encapsulated-postscript-iconos-de-whatsapp-text-trademark-vector-icons.png" width="48" height="25" /></td>
<td style="width: 84.0517%;"><span style="font-size: 8pt;">Ver más contenidos </span><a href="https://muyintresante.com"><span style="font-size: 8pt;">INTERESANTES</span></a></td>
</tr>
</tbody>
</table>

<hr />

&nbsp;

Se ve así, y he anotado los cambios que me gustarían con las fechas rojas:

Sin-título-1.jpg
 

sevilla666

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 Nov 2016
Mensajes
192
@Sam40
Para subir la linea, cambiar de color y hacerla mas fina, puedes jugar con estos valores:
<hr width="70%" style="margin-top: 0px;"; size="20" color="blue">
También es posible que la para subir la linea le este afectando el border-bottom de la imagen que tiene arriba.

Para la tabla de whatssap alineada con el texto, con los valores que das tiene que estar alineada, otra cosa es que tengas mas codigo por ahi que no vemos.
 

Sam40

Eta
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Abr 2018
Mensajes
1.441
@Sam40
Para subir la linea, cambiar de color y hacerla mas fina, puedes jugar con estos valores:
<hr width="70%" style="margin-top: 0px;"; size="20" color="blue">
También es posible que la para subir la linea le este afectando el border-bottom de la imagen que tiene arriba.

Para la tabla de whatssap alineada con el texto, con los valores que das tiene que estar alineada, otra cosa es que tengas mas codigo por ahi que no vemos.
Muchas gracias! No hay más codigo, pero fijo que la tabla me está molestando... Se puede hacer sin tabla?
 

sevilla666

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 Nov 2016
Mensajes
192
Nunca he usado WP, siempre he programados web "a pelo", Se puede hacer sin tabla, sobre todo si usas algo como bootstrap, o similares, ahora si no estas muy puesto en el tema dejalo con la tabla...
La tabla que tienes esta bien, pero para corregir el icono tendrias que fijarte en los margenes del elemento que tienes encima de ella (la imagen o la tabla que contiene la imagen). Una buena forma de empezar seria en firefox --> menu --> desarrollador web --> Inspector --> (Derecha)Deisposicion-->Modelo de caja,,,,,,,, es muy intuitivo.
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.309
También podría darle un padding-top al icono para que baje y se alinee con el texto.
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.309
El icono debe teenr una clase, una vez que la identificas, puedes poner:

.clase-icono{
paddín-top: 10px;
}

La cantidad de pixeles es algo que debes afinar tú mismo.
 

grandes dominios

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 May 2019
Mensajes
1.878
Hola! Te recomiendo que uses el plugin yellow pencil. Lo modificas y luego copias el css generado (en yellow pencil lo vas a encontrar en el icono "</>" y lo colocas en apariencia-->> personalizar->>Custom css.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba