Jump to content

[SOLUCIONADO] Cambiar el color por defecto al botón "Guardar" en mi tienda

TâGô
 Share

Recommended Posts

TâGô Newbie

TâGô

Posted
Posted (edited)

Hola, lo que deseo hacer es algo muy sencillo, pero mis conocimientos en CSS es nulo, habrá algún colaborador que me pueda explicar, así como a prueba de tontos, como puedo cambiar el color del botón "Guardar" a color rojo, del color por defecto que es como celeste. Así como un paso a paso, lo agradecería mucho, uso la versión PS 1.7.6.9

Acceso rápido arrow_drop_down

search

visibility Ver mi tienda

notifications_none

Web tienda: www.holatimbres.cl

Atento los leo :)

Untitled 1.png

Edited by TâGô (see edit history)
Link to comment
Share on other sites
TâGô Newbie

TâGô

Posted
  • Author
Posted
hace 39 minutos, juanrojas dijo:

hola, si dejas un link lo podremos ver para ayudarte

Te lo agradecería, he buscado y leído mucho, pero no he logrado llegar a la solución y mis conocimientos de css, son menos que un principiante. Lo único que quiero que el botón "GUARDAR"; se por ejemplo en color rojo. Muchas veces los clientes, no lo ven  o lo ignoran, y debemos después de la compra, tenemos que estar contactándolos, con todo la dilatación que eso produce. Nuestra web es www.holatimbres.cl

Estaré al pendiente \o/

Link to comment
Share on other sites
TâGô Newbie

TâGô

Posted
  • Author
Posted
hace 11 horas, juanrojas dijo:

CUANDO Le das inspeccionar elemento lo veras

https://prnt.sc/w0irqm

pero no se ve la ruta exacta por que debes desactivar

https://prnt.sc/w0iszk

cuando veas la ruta la buscas via ftp

Hola, encontré la ruta, pero cuando cambio el color, se cambian todos los botones, y yo solo quiero cambiar a color rojo, el botón "Guardar"; me podrás dar una manito, te adjunto el archivo CSS.

Gracias

theme.css

Link to comment
Share on other sites
TâGô Newbie

TâGô

Posted
  • Author
Posted
En 12/12/2020 a las 5:35 PM, aixos dijo:

Hola

debes leer sobre el Child Theme classic, eso te ayudará mucho

Con un Child Theme podrás hacer esto que pides y mucho más.

La solucuón es trbajar con un Child Theme y además tu web utiliza el Theme Classic

Agradezco tu consejo, y estuve leyendo algo del tema. Pero mis conocimientos son menos que básicos, así que fue como leer chino mandarín XD, no entendí nada. Espero que algún colaborador del la comunidad, me diga un paso a paso, de como cambiar el color de ese único botón. Te deseo una excelente semana \o/

Link to comment
Share on other sites
Gerardo Martinez G Enthusiast

Gerardo Martinez G

Posted
Posted
En 12/9/2020 a las 4:24 PM, TâGô dijo:

Hola, lo que deseo hacer es algo muy sencillo, pero mis conocimientos en CSS es nulo, habrá algún colaborador que me pueda explicar, así como a prueba de tontos, como puedo cambiar el color del botón "Guardar" a color rojo, del color por defecto que es como celeste. Así como un paso a paso, lo agradecería mucho, uso la versión PS 1.6.8

Web tienda: www.holatimbres.cl

Atento los leo :)

Untitled 1.png



es correcta la version Prestashop 1.6 ????

por lo que veo la estructura es otra...

al pareser es la 1.7.x.x
 

para theme classic de la version 1.7.x.x

{your_server}/themes/classic/templates/catalog/_partials/product-customization.tpl
  

          <div class="clearfix">
            <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
          </div>

cambiaras 1 class que es el btn-primary y le daras otro nombre por ejemplo btn-primary2

quedando de esta forma 

<button class="btn btn-primary2 float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>

 

Ahora lo mas importante: no existe btn-primary2 y lo tendras que crear y darle el color que quieres nadamas a ese boton y esto lo agregaras a tu 
{your_server}//themes/classic/assets/css/custom.css 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


.btn-primary2 {
    color: #fff;
    background-color: #ff0000;
    border-color: transparent;
}

guardas los dos archivos
Limpias cache y me comentas
 

Link to comment
Share on other sites
TâGô Newbie

TâGô

Posted
  • Author
Posted (edited)
hace 5 minutos, Gerardo Martinez G dijo:



es correcta la version Prestashop 1.6 ????

por lo que veo la estructura es otra...

al pareser es la 1.7.x.x
 

para theme classic de la version 1.7.x.x

{your_server}/themes/classic/templates/catalog/_partials/product-customization.tpl
  


          <div class="clearfix">
            <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
          </div>

cambiaras 1 class que es el btn-primary y le daras otro nombre por ejemplo btn-primary2

quedando de esta forma 


<button class="btn btn-primary2 float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>

 

Ahora lo mas importante: no existe btn-primary2 y lo tendras que crear y darle el color que quieres nadamas a ese boton y esto lo agregaras a tu 
{your_server}//themes/classic/assets/css/custom.css 


/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


.btn-primary2 {
    color: #fff;
    background-color: #ff0000;
    border-color: transparent;
}

guardas los dos archivos
Limpias cache y me comentas
 

Disculpa, efectivamente es 1.7.6.9, haré la prueba y te cuento, lo agradezco mucho.

Edited by TâGô (see edit history)
Link to comment
Share on other sites
TâGô Newbie

TâGô

Posted
  • Author
Posted
hace 3 horas, Gerardo Martinez G dijo:



es correcta la version Prestashop 1.6 ????

por lo que veo la estructura es otra...

al pareser es la 1.7.x.x
 

para theme classic de la version 1.7.x.x

{your_server}/themes/classic/templates/catalog/_partials/product-customization.tpl
  


          <div class="clearfix">
            <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
          </div>

cambiaras 1 class que es el btn-primary y le daras otro nombre por ejemplo btn-primary2

quedando de esta forma 


<button class="btn btn-primary2 float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>

 

Ahora lo mas importante: no existe btn-primary2 y lo tendras que crear y darle el color que quieres nadamas a ese boton y esto lo agregaras a tu 
{your_server}//themes/classic/assets/css/custom.css 


/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


.btn-primary2 {
    color: #fff;
    background-color: #ff0000;
    border-color: transparent;
}

guardas los dos archivos
Limpias cache y me comentas
 

e.e.e.e.e Lo logré \o/.... Pero, solo una última consulta, pude cambiar el color del botón a rojo, como quería, pero la tipografía de la palabra "Guardar" de estar predeterminada en Bold (negrita), ha quedado en "Regular" (grosor normal); como puedo volver a que la palabra quede en negrilla y mayúscula. Como se ve en la imagen, respecto a la frase "SELECCIONAR ARCHIVO" (adjunto captura). Te estoy muy agradecido, infinitas gracias!!!

Untitled.png

Link to comment
Share on other sites
Gerardo Martinez G Enthusiast

Gerardo Martinez G

Posted
Posted

no tengo mucho conocimiento de CSS, pero intenta ponerlo donde mismo

{your_server}//themes/classic/assets/css/custom.css 

.btn-primary2 {
    color: #fff;
    background-color: #ff0000;
    border-color: transparent;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,.2);
    text-transform: uppercase;
    font-weight: 600;
    padding: .5rem 1.25rem;
}

quedando de esa forma. espero te funcione

Link to comment
Share on other sites
TâGô Newbie

TâGô

Posted
  • Author
Posted (edited)
hace 4 horas, Gerardo Martinez G dijo:

no tengo mucho conocimiento de CSS, pero intenta ponerlo donde mismo

{your_server}//themes/classic/assets/css/custom.css 


.btn-primary2 {
    color: #fff;
    background-color: #ff0000;
    border-color: transparent;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,.2);
    text-transform: uppercase;
    font-weight: 600;
    padding: .5rem 1.25rem;
}

quedando de esa forma. espero te funcione

La solución para poner en negrilla la palabra "GUARDAR"; quedo perfecta, agradezco enormemente tu ayuda.

Finalmente, solucione lo que me afligía hace tiempo. Agradezco a todos los que me orientaron y cooperaron, todo uno crack Gerardo Martinez G.

Infinitas gracias!!!!

Edited by TâGô (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...