Bem vindo ao brockdev.com, não seja tímido compartilhe suas duvidas e conhecimento. :D

Alterar cor background

Bom dia!!!

Encontrei alguns tutoriais sobre alteração de cor do background da loja, mas não consegui altera-la.

Alguns falaram para alterar no arquivo box.css, no meu caso não localizei este arquivo, apenas o tinybox.css.

/home/ofangels/public_html/skin/frontend/default/lingerie-pink/css/tinybox.css

este foi o caminho que fiz, mas qd alterei as cores, não obtive resultado nenhum (talvez por não ser o arquivo correto).

Observando outros tutoriais e arquivos, o style.css é o que traz toda a estrutura que eu acho que devo alterar, mas para não fazer coisa errada acho melhor aguardar alguma dica.

Alguém pode me dar um auxílio?

Gostaria de alterar a cor do background. Seria uma cor para a coluna e outra para a parte externa.

Desde já, agradeço a atenção!!

Comentários

  • Jonatan Machado Moderador Global, Administrador
    Olá dieguinhovm
    Na maioria dos template que eu já trabalhei e acho o mais correto editava o styles.css porem tem vários templates que alteram os arquivos creio que o seu seja também o style.css. Voce terá que alterar o BG de algumas class, a responsável pelo fundo do site é.

    .page {
    background: #000;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Olá Jonatan,

    alterei o style.css da seguinte forma:

    /* Layout ================================================================================ */
    .wrapper { min-width:954px; }
    .page {}
    .page-print { background:#FFFFFF; padding:25px 30px; text-align:left; }
    .page-empty { background:#FFFFFF; padding:20px; text-align:left; }
    .page-popup { background:#FFFFFF; padding:25px 30px; text-align:left; }

    Para

    /* Layout ================================================================================ */
    .wrapper { min-width:954px; }
    .page {}
    .page-print { background:#f0eada; padding:25px 30px; text-align:left; }
    .page-empty { background:#f0eada; padding:20px; text-align:left; }
    .page-popup { background:#f0eada; padding:25px 30px; text-align:left; }

    Não alterou a cor de fundo. Andei vasculhando outros arquivos mas sem sucesso. Você tem alguma dica ou sabe outro arquivo que necessita de alteração?
  • Alessandra Moderador Global
    Diego, você quer alterar o fundo branco da sua loja ou o que é meio bege (que fica no topo e no footer)?
  • Alessandra, Boa tarde!!

    Gostaria de alterar o fundo, deixando a coluna onde tem os produtos da home da cor atual (branco).
    A cor que eu quero colocar é a mesma do cabeçalho e rodapé.
  • Jonatan Machado Moderador Global, Administrador
    Voce tera que alterar o BG da class
    .cms-index-index .main-container .main-bg{
    background: none repeat scroll 0 0 #EFEBDB;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Alessandra Moderador Global
    Só uma coisa, o plano de fundo do topo da sua loja e do rodapé é composto por essa imagem:

    http://sexofangels.com.br/skin/frontend ... ter-bg.gif

    Meu navegador não ajuda muito, mas deu para notar que a cor vai esbranquiçando no final da imagem. Se você colocar ela como plano de fundo em um pedaço maior, vai ficar uma "falha" (linha branca) entre a repetição da imagem. Meu conselho é que, se você quiser deixar o fundo inteiro daquela cor, não use uma imagem no background e sim uma cor sólida.
  • Jonatan... era isso mesmo... Só uma coisa.

    Quando fiz a alteração, ele assumiu a cor (que eu coloquei) em toda a loja, incluindo na coluna central, onde tenho os produtos da home. Teria como manter esta coluna na cor branca?
    Por exemplo, na left bar, ficou da cor original, branca.
  • Alessandra Moderador Global
    Só mais uma coisa: verifica se o plano de fundo foi alterado nas outras páginas também, porque essa classe:

    .cms-index-index .main-container .main-bg{


    Parece ser só usada na home...
  • Não foi alterado nas outras. Apenas na home.
  • Alessandra Moderador Global
    Para alterar o plano de fundo em todas as páginas, altere o valor da propriedade background na classe:

    body          {


    Para deixar o centro com a cor branca, acrescente a propridade background:#FFFFFF; na classe:

    .main {
  • Alessandra, isso mesmo. Trata-se de uma imagem que vai ficando mais clara. Minha intenção é usar o branco na coluna central e no restante da loja usar uma cor mais clara, próximo ao cinza ou bege mesmo.
  • Jonatan Machado Moderador Global, Administrador
    Rsrsrs verdade nao tinha percebido isso tenta assim

    .page {
    background: none repeat scroll 0 0 #EFEBDB;
    }


    .cms-index-index .main-container .main-bg{
    background: none repeat scroll 0 0 transparent;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Alessandra Moderador Global
    rsrs.. Geralmente os temas não possuem uma classe exclusiva na home, por isso acaba confundindo mesmo!
  • Jonatan Machado Moderador Global, Administrador
    disse:

    rsrs.. Geralmente os temas não possuem uma classe exclusiva na home, por isso acaba confundindo mesmo!

    Verdade. :mrgreen:
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Pessoal, desculpa mas estou atrapalhado.

    Se eu deixo o código assim:

    .page {
    background: none repeat scroll 0 0 #EFEBDB;
    }

    .cms-index-index .main-container .main-bg{
    background: none repeat scroll 0 0 transparent;
    }

    A loja fica com a cor indicada em todas as páginas, incluindo na coluna central.

    A Alessandra postou que se eu acrescentar a propriedade backgraund:#FFFFFF; na classe .main{, ficaria do jeito que eu quero. Mas não localizer a classe .main, apenas este trecho, que fiz o teste e não deu certo.

    .main-container { min-height:800px; height:auto !important;height:800px; position:relative; }
  • Alessandra Moderador Global
    Estranho, porque quando eu vejo daqui a classe aparece assim:

    .main { width:950px; margin:0 auto; min-height:400px; padding:0 0 27px 0;text-align:left; margin-top:25px;}
  • Alessandra Moderador Global
    Se você não encontrar, pode adicionar assim no seu styles.css:

    .main { background:#FFFFFF; }
  • Jonatan Machado Moderador Global, Administrador
    Talves essa class esteja em outro arquivo. Voce pode desabilitar o Juntar Arquivos CSS
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Alessandra, em qualquer lugar ou tem um local específico?
  • Alessandra Moderador Global
    disse:

    Talves essa class esteja em outro arquivo. Voce pode desabilitar o Juntar Arquivos CSS

    Verdade, eu não consigo ver aqui que arquivo é por causa dessa junção...
    disse:

    Alessandra, em qualquer lugar ou tem um local específico?

    Qualquer lugar, mas pode colocar depois do .page { para ficar mais fácil de alterar depois!
  • Exatamente isso!!!!

    :D

    Só vou alterar as cores pra um tom que não destoe tanto do restante da loja!!!

    Posso aproveitar e fazer mais uma pergunta referente ao mesmo caso????

    A left bar tem como se fosse um contorno sombreado, eu consigo copiar isto e fazer com a coluna principal??
  • Jonatan Machado Moderador Global, Administrador
    Pra colocar a sombra igual a da lateral foi feita com background eu particularmente não gosto disso rsrs
    Pra voce fazer com BG voce tera que criar uma imagem com efeito de sombra e colocar no BG da div que voce vai alterar. Recomendo voce a retirar o background e fazer sombra com CSS3 utilize esse tutorial para saber mais sobre CSS3
    http://www.css3.info/preview/box-shadow/
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan, muito bom este tutorial!!

    No meu caso, gostaria de colocar o efeito box-shadow na coluna central da minha página.

    #Exemplo_F {
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
    }

    Dentro dos exemplos citados no tutorial, acredito que o exemplo F é o que se encaixa no que eu quero. Uma pergunta, onde devo acrescentar este código e em qual arquivo?

    OBS: Localizei este tutorial em português.
    http://www.mijadinhapost.com/2012/05/bo ... lguns.html

    Grande abraço!!!
  • Jonatan Machado Moderador Global, Administrador
    Olá dieguinhovm
    Utilize o firebug para identificar a class ou id a ser alterada
    https://addons.mozilla.org/pt-br/firefox/addon/firebug/

    O arquivo geralmente e styles.css mais vai depender do seu template beleza
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
Entre ou Registre-se para fazer um comentário.