Fórum OpenCart Brasil

[jeanrl]

Fala pessoal!

Não tenho muita experiência em modificações de temas, mas estou conseguindo fazer algumas coisas que preciso.

Não achei na net nenhuma dica de como adicionar efeitos javascript, por exemplo, um efeito hover nos produtos expostos na Home, como muitos temas tem.

Alguém pode me dar alguma dica ou caminho das pedras de como eu adiciono isto?

Estou com a versão 2.0.1.1 e estou modificando o tema padrão.

Muito obrigado.

[reds]

Bom dia Jean,

Se você entende um pouco de css e sabe utilizar o depurador do navegador F12 no firefox e IE, pode analisar o código e colocar os efeitos onde quiser, a exemplo.

Código: Selecionar todos

Se temos classes na linha 1:
stylesheet.csss

.product-thumb {
          valor: valores;
}
acrescente:HOVER 

.container product:hover {
          box-shadow: 0 0 5px #000;
}

Com esta linha de exemplo, você tem sombra na caixa do produto.

[jeanrl]

Bom dia Reds!

Entendo um pouco sim, inclusive já consegui mudar algumas coisas e tá ficando bem legal.

Apesar de a versão 2.0 ter ainda poucos módulos ela é (pelo q percebi até agora) muuuuuuuuito melhor do que a 1.5..., por isso estou remontando a loja do zero.

Vou usar sua dica para aplicar os outros efeitos que quero.

Muito obrigado pela resposta e atenção.

Abraços.

[jeanrl]

Boa tarde Reds!

Sem querer abusar e já abusando, hehe, eu queria fazer algo semelhante a este: (No hover dos produtos da home.)

http://estilomotocar.com.br/2015/

Acho que deve ser com jquery, mas não tenho certeza nem se é e nem como fazer.

Vc pode me dar uma dica nesse sentido.

Valeu.

[reds]

De uma olhada no código que compõe este efeito:

Código: Selecionar todos

.product-block .img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  border-width: 0;
  border-style: solid;
  border-color: #505050;
  border-color: rgba(79,79,79,0.5);
  zoom: 1;
  border-color: transparent \9;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f);
  -webkit-transition: all 0.6s ease-in-out 0s;
  transition: all 0.6s ease-in-out 0s;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}
.product-block .pav-colorbox {
  background: #FFFFFF;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  line-height: 33px;
  overflow: auto;
  display: block !important;
  z-index: 10;
  color: #000000;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  width: 100px;
  height: 33px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
  transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
  position: absolute;
  display: none;
}
.product-block .pav-colorbox span {
  margin-right: 5px;
}
.product-block .pav-colorbox .icon-eye {
  margin: 0 5px 0 0;
  display: inline-block;
  *display: inline;
  zoom: 1;
}
.product-block .info-view {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
  transition: transform 0.4s ease-in 0.2s, opacity 0.4s ease-in-out 0s;
  position: absolute;
}
.product-block .info-view .icon-eye {
  margin: 0 5px 0 0;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

Abaixo o efeito de hover do produto

Código: Selecionar todos

.product-block:hover {
  -webkit-box-shadow: 0 0 7px #cccccc;
  box-shadow: 0 0 7px #cccccc;
}
.product-block:hover .img-overlay {
  border-width: 140px;
  border-style: solid;
  border-color: #505050;
  border-color: rgba(79,79,79,0.5);
  zoom: 1;
  border-color: transparent \9;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f4f4f4f, endColorstr=#7f4f4f4f);
  opacity: 1;
  filter: alpha(opacity=100);
}
.product-block:hover .info-view {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.product-block:hover .pav-colorbox {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;

[jeanrl]

Valeu Reds, vou estudá-lo com calma.

Muito obrigado mesmo.

Abração.