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

Sam40

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Abr 2018
Mensajes
902
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!
Desde
30 Nov 2016
Mensajes
186
@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

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Abr 2018
Mensajes
902
@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!
Desde
30 Nov 2016
Mensajes
186
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.017
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.017
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

Eta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 May 2019
Mensajes
1.436
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.
 

Sam40

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Abr 2018
Mensajes
902
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.

Gracias pero lo necesito en html y gratis
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba