edit button color and size

[HTZ7]

hi,

 

1.After I installed facebook login module,I would like to edit button as like other buttons.

 

2.I would like to change Facebook Login button ( background: #4862A3 ) color from  AUTHENTICATION page.

 

Please help me stey by step.

Thanks.

[NemoPS]

Can you share your site's url so we can inspect the source code?

[HTZ7]

Can you share your site's url so we can inspect the source code?

 u can see http://productsmyanmar.com/login?back=my-account

[NemoPS]

Ah, too bad, it seems you will have to edit the button manually on the tpl file. What is your prestashop version?

[HTZ7]

Ah, too bad, it seems you will have to edit the button manually on the tpl file. What is your prestashop version?

I used ps 1.6.0.8

/** Button Colors **/
button,
input.button_mini,
input.button_small,
input.button,
input.button_large,
input.exclusive_mini,
input.exclusive_small,
input.exclusive,
input.exclusive_large,
a.button_mini,
a.button_small,
a.button,
a.button_large,
a.exclusive_mini,
a.exclusive_small,
a.exclusive,
a.exclusive_large,
span.button_mini,
span.button_small,
span.button,
span.button_large,
span.exclusive_mini,
span.exclusive_small,
span.exclusive,
span.exclusive_large {
  background: #41AE53;
  border-width: medium medium 3px;
  border-style: none none solid;
  border-color: #2A8438;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  padding: 6px 12px 5px;
  text-decoration: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

button:hover,
input.button_mini:hover,
input.button_small:hover,
input.button:hover,
input.button_large:hover,
input.exclusive_mini:hover,
input.exclusive_small:hover,
input.exclusive:hover,
input.exclusive_large:hover,
a.button_mini:hover,
a.button_small:hover,
a.button:hover,
a.button_large:hover,
a.exclusive_mini:hover,
a.exclusive_small:hover,
a.exclusive:hover,
a.exclusive_large:hover,
span.button_mini:hover,
span.button_small:hover,
span.button:hover,
span.button_large:hover,
span.exclusive_mini:hover,
span.exclusive_small:hover,
span.exclusive:hover,
span.exclusive_large:hover {
  background: #2A8438;
}

button.std-btn,
input.std-btn,
a.std-btn,
span.std-btn {
  background: #888;
  border-color: #666;
}
button.std-btn:hover,
input.std-btn:hover,
a.std-btn:hover,
span.std-btn:hover {background: #666;}

input.button_mini_disabled,
input.button_small_disabled,
input.button_disabled,
input.button_large_disabled,
input.exclusive_mini_disabled,
input.exclusive_small_disabled,
input.exclusive_disabled,
input.exclusive_large_disabled,
span.exclusive_large_disabled {
  color: #777;
  background: #ddd;
  border-color: #999;
  cursor: default;
}
input.button_mini_disabled:hover,
input.button_small_disabled:hover,
input.button_disabled:hover,
input.button_large_disabled:hover,
input.exclusive_mini_disabled:hover,
input.exclusive_small_disabled:hover,
input.exclusive_disabled:hover,
input.exclusive_large_disabled:hover,
span.exclusive_large_disabled:hover {
  background: #999;
}

i.left{margin-right: 7px;}
i.right{margin-left: 7px;}
i.fa-trash-o{font-size: 20px; color: #ff0000;}
i.fa-trash-o:hover{color: #333;}

Edited July 21, 2014 by HTZ7 (see edit history)

[NemoPS]

That would change all buttons, you have to either add a specific class to the fb button there, and style using css, or add style="" tag to it

[HTZ7]

That would change all buttons, you have to either add a specific class to the fb button there, and style using css, or add style="" tag to it

 

Please tell me css code to input.

[NemoPS]

color: #4862a3

[HTZ7]

color: #4862a3

sorry, I am not a programmer. Can u tell me to either add a specific class to the fb button there, and style using css code step by step?

[cjrhoads]

I may be speaking out of turn, but if you are not a programmer, you might not want to be messing with modifying the tpl files manually.  What Nemo is telling you is that it isn't a matter of just changing the CSS.  You have to change the tpl of the module itself.  You'd have to create a new style in the applicable CSS, and then apply that style (using a div or class or an id ) in the appropriate line of the tpl file.  You have to make sure the CSS is not overridden by CSS from another style file, and you have to make sure the tpl file is not overridden by another tpl file.  This is a several level-step process where any one of numerous problems could cause the update to fail.

 

 This may be one of those times when you should just leave the button the color it is rather than risk breaking the code.  Since finding out exactly what the step by step process would be is the time consuming part of the task, the chances that someone is going to spend the time to figure out the steps on a free support board is pretty small, I think.  Though you never know - the moderators and other supporters here are really nice and try really hard to help everyone out.

 

I'm not really a programmer either, and when I tried to implement what I thought would be some pretty simple code changes to one of the tpl files, the whole site would not come up.  CSS - fine, I've made many changes there without any problems.  But tpl is another thing entirely, so I suggest that you might want to consider hiring someone already familiar with Prestashop or leave the button the color it is.

 

 

 

Just my opinion

CJ Rhoads

Edited July 21, 2014 by cjrhoads (see edit history)