Click to Tweet: Cambiar el aspecto de este plugin WordPress

Esta semana hemos instalado el plugin Click to Tweet en varios blogs. Este plugin nos permite introducir un recuadro con un texto para tuitear dentro de una entrada de WordPress.

Se selecciona el texto y pinchando sobre el pájaro de Twitter de la barra de herramientas de edición de nuestro WordPress, se inserta un recuadro con ese texto y la opción de tuitearlo directamente.

Esto por lo que hemos comprobado aumenta bastante la cantidad de tweets lanzados por los lectores de la entrada. Os invitamos a probarlo.

[bctt tweet=»Click to Tweet: Recuadros con texto para tuitear directamente desde #WordPress»]

El problema es que su diseño es estándar y nosotros queríamos modificarlo. Sobre todo el tamaño del texto que para nuestro guesto es muy grande. Aquí os dejamos los estilos CSS que hay que modificar para cambiar el aspecto de Click To Tweet.

Por otro lado lo hemos traducido al castellano, le hemos añadido la opción de tuitear los enlaces acortados de la entrada y cambiar el texto de «Click To Tweet». Si os interesa tenerlo, dejarnos un comentario con vuestro email y os lo haremos llegar.

OJO: Presuponemos que ya tenéis instalado el plugin Click To Tweet en vuestro WordPress. Sino, ahora es un buen momento para instalarlo.

El código CSS hay que pegarlo en el recuadro de vuestro tema para incluir CSS personalizado.

Para editar el color de la fuentede de Click to Tweet:

.tm-click-to-tweet .tm-ctt-text a { color: #5798CD; }

Se cambia #5798CD al color elegido. Si no sabéis como generar el código de color, os puede ayudar www.colorpicker.com que os generará el código de color a poner detrás del la #.

Para editar el tamaño de la fuente de Click to Tweet:

.tm-click-to-tweet .tm-ctt-text a { font-size: 20px; }

Solo hay que cambiar el número al tamaño deseado.

Cambiar color y tamaño de la fuente de Click to Tweet:

Estas dos líneas también se pueden combinar para tener un código más eficiente:

.tm-click-to-tweet .tm-ctt-text a { color: #5798CD; font-size: 20px; }

Para editar el fondo del recuadro de Click to Tweet:

.tm-click-to-tweet { background-color: #eeeeee; }

Otra vez hay que cambiar el código detrás de la # por el color deseado.

Para editar el borde de Click to Tweet:

.tm-click-to-tweet { border: 1px solid #eeeeee; }

Esto nos crea un borde de 1 píxel, de trazo sólido con el color que sigue a la #. Si se incrementa el número, el borde se hará más grueso. Si no queremos un trazo sólido, sino rayado o punteado, hay que sustituir solid por dashed o dotted. Si queremos cambiar el color, al igual que en los ejemplos anteriores, hay que sustituir el código de color detrás de la # por el deseado.

Cambiar fondo y borde de Click to Tweet:

Si cambiamos el fondo y el borde, se puede combinar en una única instrucción:

.tm-click-to-tweet { border: 1px solid #eeeeee; background-color: #eeeeee; }

Esperamos que os haya parecido interesante.

P.D. Si queréis que os pasemos el plugin traducido al español, incluyendo la opción de cambiar el texto de «Click To Tweet» y la opción de tuitear el enlace de la entrada acortado, dejarnos un comentario. Os lo enviaremos al email del mismo.

[ ACTUALIZACIÓN 27/DIC/2014 ] Acabamos de publicar una nueva entrada presentando «Better Click To Tweet», un plugin del repositorio de plugins de WordPress, que tiene la traducción a castellano, además de otras mejoras interesantes. Aquí tenéis toda la información: Better Click to Tweet: Plugin mejorado y publicado. [ /ACTUALIZACIÓN ]

23 comentarios en “Click to Tweet: Cambiar el aspecto de este plugin WordPress”

  1. Pedro Martín

    Interesantísimo el artículo, pero, sinceramente, no he encontrado donde está alojado el código css donde debo pegarlo. De cualquier manera si me lo envías en Español, me vendría de perlas. Suerte y gracias por tus aportes…

    Responder ↓
    1. Ramón Rautenstrauch Autor

      Buenos días Santiago, Te lo acabamos de enviar. Siento el retraso, pero tu comentario se había perdido en la carpeta de Spam que no hemos revisado a fondo hasta hoy.

      Responder ↓
    1. Ramón Rautenstrauch Autor

      Buenos días David, Te lo acabamos de enviar. Siento el retraso, pero tu comentario se había perdido en la carpeta de Spam que no hemos revisado a fondo hasta hoy.

      Responder ↓
  6. Angel

    Hola,
    Muchas gracias por vuestro trabajo, me parece muy útil e interesante.
    Si podéis mandarme el plugin customizado por vosotros os lo agradecería.

    Buen fin de semana

    Responder ↓
  7. Jose

    Muy interesante la entrada. Lo que proponéis es precisamente lo que estaba buscando.
    Si podéis mandarme esa joyita de plugin traducido os estaré agradecido.

    Responder ↓
  8. RaMGoN

    Hola, la verdad es que me resulta muy interesante la personalización que proponéis. Estoy poniéndolo en mi blog y me interesaría también la traducción, si es posible aunque ya hace tiempo que se publicó este post.

    Saludos.

    Responder ↓
  9. Daniel

    Ramón, funcionó perfecto. Solo agregue una linea para dejarlo en negrita:

    .tm-click-to-tweet .tm-ctt-text a { font-weight:bold; }

    Por si a alguien le sirve 🙂

    Gracias!

    Saludos
    Daniel

    Responder ↓

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Los comentarios de esta página se procesan por un sistema automático de moderación por lo cual no siempre se publican de forma instantánea. Por favor respeta a los demás y ciñete al tema del post. Nos reservamos el derecho de eliminar cualquier comentario o enlace que nos parezca inadecuado o tenga una expresión de grosería, insulto, odio, hostilidad o negatividad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.