Jump to content

Alterar CSS módulo pagseguro

patridecarv
 Share

Recommended Posts

patridecarv Newbie

patridecarv

Posted
Posted

Olá pessoal, boa tarde, instalei o último módulo do pagseguro, porém a página de confirmação de pagamento (payment) não segue o estilo do site, ficou feio, eu gostaria que fosse no estilo padrão do prestashop, igual o módulo bankwire, como eu poderia mudar para esse estilo ?

 

Gostaria de aproveitar também e tirar uma dúvida do lightbox, quando eu clico no botão "X" para fechar a compra aparece uma pop up perguntando se eu realmente quero cancelar esta compra, quando clico no botao "cancelar a compra" sou redirecionado para a página de pagamentos do pagseguro e ao voltar ao meu site os produtos do carrinho de compra somem. 

Eu gostaria que ao clicar no botao de cancelar a compra eu fosse redirecionado para a página inicial do meu site e sim, fossem eliminados os produtos do carrinho.

 

site de teste: http://www.shurahuizin.com.br

 

Login para testes:

 

user: [email protected]

senha: teste123

 

Fico no aguardo.

 

Att.

Patrick De Carvalho

 

Uso prestashop 1.6.0.9

Link to comment
Share on other sites
patridecarv Newbie

patridecarv

Posted
  • Author
Posted

Amigo,

 

O CSS das fontes seguem o padrão Global na pasta

global.css

 

O layout da página você pode alterar em 

public_html/modules/pagseguro/views/templates/front/payment_execution.tpl

 

Att.

Josué

 

Ok, Josué, obrigado pelas informações, mas eu já havia tentado anteriormente modificar essa tpl, tentei de novo sem sucesso, até copiei o código do payment_execution.tpl do módulo "bankwire" para ver se mudava alguma coisa do jeito que eu queria, mas só transferiu o texto mesmo e imagens, o layout ficou o mesmo do pagseguro.

 

Coloquei uma imagem aqui com o jeito que eu queria que ficasse (lado direito).

 

Mais uma vez obrigado pela ajuda.

jMjPFM.jpg

Link to comment
Share on other sites
selectshop.at Newbie

selectshop.at

Posted
Posted (edited)

Vc. vai ter que adaptar mais código do que simplesmente o tpl. O pagseguro nao possue um css próprio. Se vc, sabe codar é fácil. 

 

Vc. vai ter que criar um css próprio no ficheiro global.css do seu tema e integrar estas classes ao módulo pagseguro (nada para pessoas que nao sabem codar...).

Edited by selectshop.at (see edit history)
  • Like 1
Link to comment
Share on other sites
patridecarv Newbie

patridecarv

Posted
  • Author
Posted

Vc. vai ter que adaptar mais código do que simplesmente o tpl. O pagseguro nao possue um css próprio. Se vc, sabe codar é fácil. 

 

Vc. vai ter que criar um css próprio no ficheiro global.css do seu tema e integrar estas classes ao módulo pagseguro (nada para pessoas que nao sabem codar...).

 

Ok selectshop.at, obrigado pelas informações, já tinha imaginado que teria que fazer isso, mas foi bom reforçar a idéia porque agora já tenho certeza.

 

Isso ai...

 

Vai ter criar uma classe de estilos na Global.css ou copiar algum box de css colar e renomear com as adaptações para esta tela do PagSeguro e na tpl colocar todo conteúdo dentro de uma div class chamando esta classe de estilos.

 

Olha como a minha ficou.

 

telapagseguro.png

 

JosueAlvesMoreira, ficou maravilhoso!, você trabalha diretamente com o prestashop ?, gostaria de estar deixando a página minha do pagseguro igual esta sua, e tenho uma outra dúvida que está me matando que ninguém do fórum gringo me respondeu ainda também, mas teria que abrir outro tópico, se você puder me atender e quiser cobrar alguma coisa nos códigos podemos conversar.

 

Agradeço a ajuda.

Link to comment
Share on other sites
JosueAlvesMoreira Newbie

JosueAlvesMoreira

Posted
Posted (edited)

Que isso amigo, sou apenas curioso rsrs..

 

Um segredo, utilize o Chrome, selecione algum elemento de sua loja, clique com botão direito do mouse e clique em "inspecionar elemento", com isso você pode simular a edição da sua página ao vivo, assim você vai descobrindo onde deve modificar e como modificar, errando e acertando na simulação você terá certeza do que deve mudar.

 

Vou colar aqui a classe de estilos pra colocar o conteúdo dentro deste box, copie e adicione na global.css

.boxpagseguro {
  margin-right: -15px;
  padding-left: 20px;
  background: #f6f6f6;
  border: 5px solid #f0f0f0; }

Depois na pasta payment_execution.tpl chame esta classe de estilos.

 

No inicio do tpl após os créditos do desenvolvedor...

 

<div class="boxpagseguro">

 

AQUI FICA TODO CONTEÚDO

 

e no final da tpl feche a </div>

 

 

 

A fonte das letras você modifica direto no tpl com um p style, exemplo:

<p style="font-size:11px;" "font-family: Open Sans" > *Parcela miníma R$ 5,00</p>

Os botões é o mesmo esquema, clique sobre ele, inspecione e verá onde deve modificar, assim poderá criar uma nova classe de estilos personalizada e chamá-la para o botão.

 

Faço tudo meio que na gambiarra, mais funciona certinho, tá valendo!

 

 

CUIDADO! Sempre faça uma cópia ou backup do conteúdo da pasta antes de modificá-la, assim se der algum problema, você poderá voltar para o padrão original.

 

 

Bons estudos e principalmente, vendas!

Edited by JosueAlvesMoreira (see edit history)
  • Like 1
Link to comment
Share on other sites
patridecarv Newbie

patridecarv

Posted
  • Author
Posted (edited)

Que isso amigo, sou apenas curioso rsrs..

 

Um segredo, utilize o Chrome, selecione algum elemento de sua loja, clique com botão direito do mouse e clique em "inspecionar elemento", com isso você pode simular a edição da sua página ao vivo, assim você vai descobrindo onde deve modificar e como modificar, errando e acertando na simulação você terá certeza do que deve mudar.

 

Vou colar aqui a classe de estilos pra colocar o conteúdo dentro deste box, copie e adicione na global.css

.boxpagseguro {
  margin-right: -15px;
  padding-left: 20px;
  background: #f6f6f6;
  border: 5px solid #f0f0f0; }

Depois na pasta payment_execution.tpl chame esta classe de estilos.

 

No inicio do tpl após os créditos do desenvolvedor...

 

<div class="boxpagseguro">

 

AQUI FICA TODO CONTEÚDO

 

e no final da tpl feche a </div>

 

 

 

A fonte das letras você modifica direto no tpl com um p style, exemplo:

<p style="font-size:11px;" "font-family: Open Sans" > *Parcela miníma R$ 5,00</p>

Os botões é o mesmo esquema, clique sobre ele, inspecione e verá onde deve modificar, assim poderá criar uma nova classe de estilos personalizada e chamá-la para o botão.

 

Faço tudo meio que na gambiarra, mais funciona certinho, tá valendo!

 

 

CUIDADO! Sempre faça uma cópia ou backup do conteúdo da pasta antes de modificá-la, assim se der algum problema, você poderá voltar para o padrão original.

 

 

Bons estudos e principalmente, vendas!

 

JosueAlvesMoreira trabalho exatamente desta forma hehe, é uma grande mão na roda ainda mais pra mim que não sou programador, mas tenho uma boa noção de programação, depois que tentei apenas modificar o tpl do pagseguro percebi que iria precisar talvez criar um estilo a parte e depois chamar esse estilo, porém como não entendo muito no assunto preferi a ajuda de um expert no assunto, agradeço muito a sua ajuda!, obrigado!.

 

Irei abrir outro tópico com o outro "a mais" que estou tendo problema e acho que ajudaria muita gente também e quem sabe poderia até ser incluso em alguma futura atualização do prestashop, porque modifica os arquivos core e seria de grande valia para e-commerces com grande rotação de venda e estoque. (link do post gringo do que eu preciso fazer: http://www.prestashop.com/forums/topic/377881-shopping-cart-product-out-of-stockremaining-error/?do=findComment&comment=1859468)

Edited by patridecarv (see edit history)
Link to comment
Share on other sites
  • 4 months later...
jefmachia Newbie

jefmachia

Posted
Posted

Pessoal, estou com um probleminha aqui. Uso o módulo do pagseguro na prestashop 1.6.11 e quando vai escolher o pagamento ele fica essa telinha que segue no link para vocês verem http://gyazo.com/fdb8316ca494f51580e6564f441cbbec     Beleza, gostara de mudar essa escrita paguem em 18x e colocar uma imagem única do pagseguro, ou mesmo mudar esse texto. Alguém sabe onde da pra fazer isso? Obrigado.

Link to comment
Share on other sites
jefmachia Newbie

jefmachia

Posted
Posted

Ok, mas a intenção na realidade é deixar uma imagem única sem nada escrito. Bom também poderia alterar a imagem somente e deixar sem nada na tradução... É uma boa ideia também.... vou ver o que vou fazer aqui... .Mais uma vez obrigado.

Link to comment
Share on other sites
jefmachia Newbie

jefmachia

Posted
Posted

Na tradução não encontrei a escrita, e já desconfiava que não iria encontrar, pois esse texto é do pagseguro que já é Brasileiro acredito que esteja direto lá na pagina mesmo, só não sei se fui no lugar certo, mas no ADM eu fui em Localização e Traduções ai entrei lá para ver, a menos que precise ser direto em algum arquivo e não usando esse caminho que eu usei.... Vou tentar a alteração do arquivo mesmo....

Link to comment
Share on other sites
jefmachia Newbie

jefmachia

Posted
Posted

Carlos, eu reparei que onde tem a imagem tem um css pelo firefox coloquei em inspecionar mas não identifica qual css que comanda essa pagina. Uso bastente dessa forma para identificar, mas nessa pagina não aparece, eu gostaria de deixar uma imagem um pouco maior do que o padrão que está lá. Você sabe onde fica o css que controla a payment.tpl ?

E se puder me passar qual software usa para identificar os css. Obrigado.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...