Fórum OpenCart Brasil

[svincenzo]

Pessoal, Boa Tarde!

Estou com uma duvida referente a mudar o radio buttom por quadradinhos, por exemplo:


Estou montando um ecommerce para minha esposa, ela irá vender roupas, sapatos, etc e ela queria colocar aquelas opções de quadradinhos com P/M/G para roupas e tamanhos de 35 / 37 / 40 para sapatos.

Consegui fazer o CSS para conseguir modificar o Radio Buttom, porém não estou conseguindo colocar essa informação na pagina do produto.

Segue o CSS:

Código: Selecionar todos

body {
    padding: 25px;
}

.payment-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payment-methods:after {
  content: "";
  clear: both;
}

.payment-method {
  border: 1px solid #ccc;
  box-sizing: border-box;
  float: left;
  height: 70px;
  position: relative;
  width: 120px;
}

.payment-method label {
  background: #fff no-repeat center center;
  bottom: 1px;
  cursor: pointer;
  display: block;
  font-size: 0;
  left: 1px;
  position: absolute;
  right: 1px;
  text-indent: 100%;
  top: 1px;
  white-space: nowrap;
}

.payment-method + .payment-method {
  margin-left: 25px;
}

.pagseguro label {
  background-image: url(https://dl.dropbox.com/s/yvzrr9o54s2llkr/uol.png);
}

.paypal label {
  background-image: url(https://dl.dropbox.com/s/i4z39zy2mtb7xq1/paypal.png);
}

.bankslip label {
  background-image: url(https://dl.dropbox.com/s/myj41602bom0g8p/bankslip.png);
}

.payment-methods input:focus + label {
  outline: 2px dotted #21b4d0;
}

.payment-methods input:checked + label {
  outline: 4px solid #21b4d0;
}

.payment-methods input:checked + label:after {
  background: url(https://dl.dropbox.com/s/vm6hpxjqbupy1xv/checked.png);
  bottom: -10px;
  content: "";
  display: inline-block;
  height: 20px;
  position: absolute;
  right: -10px;
  width: 20px;
}

@-moz-document url-prefix() {
  .payment-methods input:checked + label:after {
    bottom: 0;
    right: 0;
    background-color: #21b4d0;
  }
}

fonte: http://simplesideias.com.br/usando-css3 ... io-buttons

Onde eu peguei estas informações a pessoa estava trocando os radio buttons com botoes para pagamento.


Estou fazendo em vqMod, ja consegui colocar o .css para o OC utilizar na pagina, agora não consigo fazer o sistema identificar que é para trocar o Radio Button pelo quadradinho.


Alguém poderia me ajudar a elucidar este ponto?

Agradeço desde já, tão logo consiga fazer funcionar estarei liberando no site Opencart.com de graça para quem quiser utilizar.


Abraços

svincenzo

[svincenzo]

Bom dia Pessoal.


Ninguém, consegue me ajudar?

Abraços.

[Manoel Vidal]

Olá.

Segue o link para uma dica que dei mas para a versão 1.5.6.4, que pode lhe ajudar:
http://forum.opencartbrasil.com.br/view ... 12&t=10508

Espero ter ajudado.

[svincenzo]

OPa Manoel,

Obrigado pela dica, vou tentar fazer funcionar no OC 2.0.1.1.


Valew