cambiar tamaño y color en llámenos

[albertotactik]

buenos días,

llevo investigando la forma de cambiar el color y tamaño  de la palabra llámenos... y  no acabo de encontrar la línea de código a modificar.

entiendo que he de modificar código del archivo theme.css que está en la siguiente ruta... es así...   o debería ser fichero custom?

/web/themes/classic/assets/css

ahí he podido cambiar el color de toda la cabecera... pero no sé cómo cambiar sólo la palabra "llámanos"

también quisiera añadir una pequeña imagen... al lado.

hasta una respuesta... Sigo investigando...

gracias

alberto

[Luisejo]

Hola, puedes hacerlo mediante css.
Para ello, tendrás que añadir estas líneas a tu fichero: tutienda.com/themes/classic/assets/css/theme.css

div#contact-link a {
    color: red;
}

Este será el resultado.

Espero que te sirva, saludos.

 

[albertotactik]

buenos días Luisejo,

primeramente, gracias por contestarme tan rápido... (todavía estoy buscando la manera ...)

me surgen 2 dudas:

• no visualizo el código, tal como tú me lo envías... utilizo dreamviewer, para editar ficheros... y me sale todo apelotonado. (adjunto imagen del fichero editado con dreamviewer) entiendo que hay 7 líneas, y una más con mucho código...
• y sobre el código que me envías... ´lo he insertado... al final, por probar...  y no marca en rojo...  (entiendo que algo haré mal, sobre este fichero, nada estructurado... en pantalla)

gracias y disculpas por mi torpeza... (estoy enfrentándome, por primera vez con CSS.... soy más de php.

PD.: Para insertar una imagen (icono) de teléfono o whatsapp... debería ser sobre algún fichero *.tpl  ??  si es así... te agradezco, que me indiques el archivo y ruta... y miro de investigar..

muy agradecido

[Luisejo]

Lo de ver el CSS apelotonado sucede porque está minificado, si quieres verlo bien, tienes que pasarlo por un formater tipo: https://codebeautify.org/css-beautify-minify
Este será el resultado...

 

En cuanto a que no lo marca en rojo, asegúrate de que tienes esto así...

Y además, borra caché tras subir el cambio.

Por último, la imagen la puedes añadir también por CSS, pero si, si no te apañas puedes hacerlo modificando la tpl o contratando los servicios de un profesional.

Saludos.

[albertotactik]

buenos días,

gracias por tu ayuda...

lo resolví gracias a tu mensaje...

quedo muy agradecido, por el cable !!!

añadiendo el siguiente código en theme.css para que se visualice en "negrita" y color "negro"  en la línea 11080 aprox. del fichero theme.css

div#contact-link {
 font-weight: bold;
    color: black;
 }

 

y  añadiendo en negrita el siguiente código del fichero TPL... para mostrar icono whasap + icono teléfono.

es posible que no es la mejor manera... pero ya me vale

<div id="_desktop_contact_link">
  <div id="contact-link">
  <img src="/img/tfnofijo.png" />
    {if $contact_infos.phone}
      {* [1][/1] is for a HTML tag. *}
      {l
        s='Call us: [1]%phone%[/1]'
        sprintf=[
          '[1]' => '<span>',
          '[/1]' => '</span>',
          '%phone%' => $contact_infos.phone
           
        ]
       
        d='Shop.Theme.Global'
    
      }
    {else}
      <a href="{$urls.pages.contact}">{l s='Contact us' d='Shop.Theme.Global'}</a>
    {/if}

   <img src="/img/whatsapp.png" />

[albertotactik]

On 1/10/2021 at 1:08 AM, Luisejo said:

Lo de ver el CSS apelotonado sucede porque está minificado, si quieres verlo bien, tienes que pasarlo por un formater tipo: https://codebeautify.org/css-beautify-minify
Este será el resultado...

 

En cuanto a que no lo marca en rojo, asegúrate de que tienes esto así...

Y además, borra caché tras subir el cambio.

Por último, la imagen la puedes añadir también por CSS, pero si, si no te apañas puedes hacerlo modificando la tpl o contratando los servicios de un profesional.

Saludos.

por cierto Luisejo...

una duda...

observo que en el explorer, sí se visualizan los cambios... pero en el chrome... no se visualizan los cambios...

he borrado caché del prestashop y también del propio chrome...

que raro... puede ser por que no le guste el código a "chrome" 

div#contact-link {
    color: #000000;
    font-weight: bold;

 

gracias de nuevo