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

Editar Categorias

brunowdbrunowd Usuário
editado January 2014 em Dúvida Temas / Templates
Olá Pessoal,

Alguém sabe como faço pra trocar o background do site de acordo com a categoria selecionada :?:

Comentários

  • Jonatan Machado Moderador Global, Administrador
    Ola Bruno
    A forma que eu conheço você teria que fazer um layout personalizado para cada categoria.
    Abraço
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Ola Bruno
    A forma que eu conheço você teria que fazer um layout personalizado para cada categoria.
    Abraço

    Olá, Jonatan seria na opção Atualização de Leiaute ?
  • Jonatan Machado Moderador Global, Administrador
    Achei uma forma mais facil

    especione o elemento de cada categoria no body vai ter as seguntes class nesse caso eu peguei do category-aniversarios

    <body class=\" catalog-category-view categorypath-aniversarios-html category-aniversarios\">


    voce apenas adicionara o css segundo a orden dessa class category-aniversarios assim nesse caso estou editando apenas o main-container

    body.category-aniversarios div.main-container{
    background-color: #5122B4;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Achei uma forma mais facil

    especione o elemento de cada categoria no body vai ter as seguntes class nesse caso eu peguei do category-aniversarios

    <body class=\" catalog-category-view categorypath-aniversarios-html category-aniversarios\">


    voce apenas adicionara o css segundo a orden dessa class category-aniversarios assim nesse caso estou editando apenas o main-container

    body.category-aniversarios div.main-container{
    background-color: #5122B4;
    }

    Bah me confundi agora :D , eu coloco no style.css o código:
    body.category-aniversarios div.main-container{ background-color: #5122B4;}


    :?:

    Eu achei o
    <body class=\" catalog-category-view categorypath-aniversarios-html category-aniversarios\">
    usando o inspetor do chrome,qual arquivo que carrega isso!? :lol:
  • Jonatan Machado Moderador Global, Administrador
    Chei mais facil ainda rsrs smile_rofl

    Voce seleciona a categoria desejada na aba Design Personalizado>Atualizaçao de layout personalizado voce coloca o css desejado nesse caso alterar o background da class .main-container os tem mais forrmas de fazer isso mais essa e a mais facil

    div.main-container{
    background-color: #5122B4;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan Machado Moderador Global, Administrador
    disse:

    disse:

    Achei uma forma mais facil

    especione o elemento de cada categoria no body vai ter as seguntes class nesse caso eu peguei do category-aniversarios

    <body class=\" catalog-category-view categorypath-aniversarios-html category-aniversarios\">


    voce apenas adicionara o css segundo a orden dessa class category-aniversarios assim nesse caso estou editando apenas o main-container

    body.category-aniversarios div.main-container{
    background-color: #5122B4;
    }

    Bah me confundi agora :D , eu coloco no style.css o código:
    body.category-aniversarios div.main-container{ background-color: #5122B4;}


    :?:

    Eu achei o
    <body class=\" catalog-category-view categorypath-aniversarios-html category-aniversarios\">
    usando o inspetor do chrome,qual arquivo que carrega isso!? :lol:
    Voce apenas colocava no arquivo style.css o css.
    No inspetor do chrome era apenas para achar qual class erra de cada categoria

    <body class=\" catalog-category-view categorypath-aniversarios-html category-ACATEGORIA SELECIONADA>


    erra so alterar o css
    body.category-ACATEGORIA SELECIONADA div.main-container{
    background-color: #5122B4;
    }


    dessa forma tambem da certo mais e mais complicado e demorado.
    Abraço
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Chei mais facil ainda rsrs smile_rofl

    Voce seleciona a categoria desejada na aba Design Personalizado>Atualizaçao de layout personalizado voce coloca o css desejado nesse caso alterar o background da class .main-container os tem mais forrmas de fazer isso mais essa e a mais facil

    div.main-container{
    background-color: #5122B4;
    }
    Dessa forma mais fácil aqui não apareceu,só aparece por milésimos de segundo quando carrego a página :(
  • Jonatan Machado Moderador Global, Administrador
    Coloca apenas assim
    div.main-container{
    background-color: #5122B4;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Coloca apenas assim

    div.main-container{
    background-color: #5122B4;
    }

    Sim coloquei isso na atualização de layout e nada :?
  • Jonatan Machado Moderador Global, Administrador
    Em qual categoria voce adicionou?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Em qual categoria voce adicionou?

    Adicionei na aniversários. :D
  • Jonatan o Mario Sam me respondeu o seguinte:

    oi brunowd,

    uma maneira de fazer isso seria usando CSS.
    em cada categoria vc adiciona (se nao tiver ainda) um .class no elemento body da pagina.

    depois no styles.css basta usar o background para inserir uma imagem diferente para cada class de categoria.

    sucesso ai.

    :D
  • Jonatan Machado Moderador Global, Administrador
    disse:

    Jonatan o Mario Sam me respondeu o seguinte:

    oi brunowd,

    uma maneira de fazer isso seria usando CSS.
    em cada categoria vc adiciona (se nao tiver ainda) um .class no elemento body da pagina.

    depois no styles.css basta usar o background para inserir uma imagem diferente para cada class de categoria.

    sucesso ai.

    :D

    E a mesma coisa que eu tinha te falado no começo.
    viewtopic.php?f=32&t=439#p1428

    Mais fácil seria fazer como eu te falei colocando direto na categoria
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    disse:

    Jonatan o Mario Sam me respondeu o seguinte:

    oi brunowd,

    uma maneira de fazer isso seria usando CSS.
    em cada categoria vc adiciona (se nao tiver ainda) um .class no elemento body da pagina.

    depois no styles.css basta usar o background para inserir uma imagem diferente para cada class de categoria.

    sucesso ai.

    :D

    E a mesma coisa que eu tinha te falado no começo.
    viewtopic.php?f=32&t=439#p1428

    Mais fácil seria fazer como eu te falei colocando direto na categoria
    Sim eu vi que ele disse a mesma coisa quee tu tinha me dito antes,mas eu fiz da maneira fácil(pela atualização do layout)
    e pela dificil (direto no style.css), mas nada rolou. :?
  • Jonatan Machado Moderador Global, Administrador
    As duas formas dão certo!

    Qual código você esta colocando e aonde esta colocando a forma mais facil?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    As duas formas dão certo!

    Qual código você esta colocando e aonde esta colocando a forma mais facil?

    em categorias > design personalizado > atualização de layout

  • Jonatan Machado Moderador Global, Administrador

    Tenta assim

    <style type="text/css">
    div.main-container{
    background-color: #5122B4;
    }
    </style>

    Esquece esse jeito boiei legal nessa rsrs nao tem como assim vai tqer que fazer do jeito mais difícil mesmo
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan Machado Moderador Global, Administrador
    Coloca isso no styles.css seu

    body.category-aniversarios div.main-container{ background-color: #5122B4;}
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Coloca isso no styles.css seu

    body.category-aniversarios div.main-container{ background-color: #5122B4;}

    Tbm não rolou... :?
  • Jonatan Machado Moderador Global, Administrador
    Achei o problema
    Tinha uma imagem encima da cor no BG

    body.category-aniversarios div.main-container {
    background-color: #5122B4 !important;
    background-image: none !important;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Achei o problema
    Tinha uma imagem encima da cor no BG

    body.category-aniversarios div.main-container {
    background-color: #5122B4 !important;
    background-image: none !important;
    }

    FUNCIONOU ! smile_rofl

    Agora... como faço para mudar a cor somente do header e do footer? e colocar uma imagem no main?
  • Jonatan Machado Moderador Global, Administrador
    Seria a mesma coisa mais agora envés de colocar a class main-container você coloca a class do foder ou do header
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Seria a mesma coisa mais agora envés de colocar a class main-container você coloca a class do foder ou do header


    Yeah! Também funcionou, mas tem aquela imagem em azul atras que seria o background do header e do footer,eu poderia em vez da cor colocar aquela imagem em vez de azul colocar roxo somente nessa categoria?
  • Jonatan Machado Moderador Global, Administrador
    pode sim e sempre a mesma coisa a fazer achar a class correspondente e a div

    body.category-aniversarios div.CLASS {
    background-image: url(URL NOVA CATEGORIA) !important;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    pode sim e sempre a mesma coisa a fazer achar a class correspondente e a div

    body.category-aniversarios div.CLASS {
    background-image: url(URL NOVA CATEGORIA) !important;
    }


    OK! Muito Obrigado Jonatan,aprendi bastante cntg,valeu mesmo!
  • Jonatan Machado Moderador Global, Administrador
    Que bom que ajudei brunowd qualquer coisa pode postar no forum
    Abraço
    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.