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

Customização Tema Free - Car Parts Store Template

brunowdbrunowd Usuário
editado December 2013 em CSS
Olá alguem podeira me dar dicas de como customizar esse tema Car Parts Store Template http://www.magentocommerce.com/magento-connect/car-parts-store-template-7654.html sei que te o guia de customização,mas ele ta um pouco confuso pra mim, deve se por ser o primeiro tema que tento editar.
Por favor, preciso de um help! HAHAHAH smile_clapping
«1

Comentários

  • Alessandra Moderador Global
    Olá Bruno!
    O que você quer customizar nesse tema?
  • disse:

    Olá Bruno!
    O que você quer customizar nesse tema?

    Oi Alessandra,como vai? Obrigado pelo retorno...
    Então o mais importante pra mim agora ,o que tenho em mente é mudar a página do produto.. por exemplo
    1. O produto Latinha Mint to be http://www.mezzbrin.bravunet.com/magentomezz/index.php/latinha-mint-to-be-personalizada.htmlestá nesse novo template e está todo desconfigurado,deve ser o css ,mas eu não alterei o css deste tema.

    2 Na pagina do produto Latinha Mint to be tem que ficar com as mesmas configurações do produto água mineral http://www.mezzbrin.bravunet.com/magentomezz/index.php/agua-mineral-personalizada.html mas com o tema novo,na pagina da agua tem aquele personalizar produto que abre um lightbox com as opções personalizadas,tipo no default eu consegui fazer funcionar com a ajuda do Jonatan , mas nesse novo template não estou conseguindo editar o view.phtml
  • Alessandra Moderador Global
    Bruno, você alterou o view.phtml do novo tema?
    Esse tema foi construído para ter a página do produto com 2 colunas e menu a esquerda, se você deixar apenas 1 coluna, ele fica desconfigurado mesmo (o que é errado).
    Se você quiser manter com 1 coluna, pode alterar o css para que não fique desconfigurado.
    Testei aqui e vi que se você abrir o styles.css e alterar a largura da classe:

    .catalog-product-view  .col-main .sidebarblock-content { 


    De 756px; para 100%; ele já melhora o alinhamento.
  • disse:

    Bruno, você alterou o view.phtml do novo tema?
    Esse tema foi construído para ter a página do produto com 2 colunas e menu a esquerda, se você deixar apenas 1 coluna, ele fica desconfigurado mesmo (o que é errado).
    Se você quiser manter com 1 coluna, pode alterar o css para que não fique desconfigurado.
    Testei aqui e vi que se você abrir o styles.css e alterar a largura da classe:

    .catalog-product-view  .col-main .sidebarblock-content { 


    De 756px; para 100%; ele já melhora o alinhamento.
    Sim eu alterei o view mas não resultou talvez se eu fazer essas alterações que tu mepassou .Vou mudar o css aqui Alessandra,já posto o resultado.
  • Aparentemente deu tudo certo só o botão azul que ta super alto sobrepondo os detalhes do produto.
    Não achei pelo inspetor
  • Alessandra Moderador Global
    Poderia postar como está o código do seu view.phtml?
  • Jonatan Machado Moderador Global, Administrador
    Ola pessoal so uma dica
    e so colocar display inline no id #persona acho que nao vai ficar mais sobreposto

    #persona {
    display: inline;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • É Alessandra a dica do Jonatan funcionou,muito obrigado aos dois, agora quero colocar icones nos menus/ categorias,alguma ideia? Já tenho os icones prontos só não sei se devo e como colocar eles no CSS.
  • Alessandra Moderador Global
    disse:

    Ola pessoal so uma dica
    e so colocar display inline no id #persona acho que nao vai ficar mais sobreposto

    #persona {
    display: inline;
    }

    Oi Jonatan!
    Era isso mesmo! smile_clapping
  • Alessandra Moderador Global
    Bruno, essa é uma das maneiras de colocar os ícones.
    Ainda prefiro que tudo seja feito mais "automático", para que o desenvolvedor não tenha que ficar editando toda hora o menu quando precisar inserir uma categoria nova.
    Tentei "puxar" as imagens das categorias cadastradas no painel, mas ainda não consegui... :?

    Vou testar mais alguns códigos e, qualquer coisa, posto aqui!
  • disse:

    Bruno, essa é uma das maneiras de colocar os ícones.
    Ainda prefiro que tudo seja feito mais "automático", para que o desenvolvedor não tenha que ficar editando toda hora o menu quando precisar inserir uma categoria nova.
    Tentei "puxar" as imagens das categorias cadastradas no painel, mas ainda não consegui... :?

    Vou testar mais alguns códigos e, qualquer coisa, posto aqui!


    OK Alessandra, olha só a pagina do checkout deste tema está conflitando com o onepagehorizontal vou desativar pra ver se funciona.
  • Jonatan Machado Moderador Global, Administrador
    Ola
    Nao sei se vocês viram esse post mais acho que pode ajudar
    http://www.h-o.nl/blog/using_category_i ... avigation/
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Alessandra Moderador Global
    Bruno, como você quer deixar exatamente o menu?
    Os ícones só serão exibidos nas categorias que ficam no primeiro nível (aparecem no topo)?
  • disse:

    Bruno, como você quer deixar exatamente o menu?
    Os ícones só serão exibidos nas categorias que ficam no primeiro nível (aparecem no topo)?

    Isso isso nas categorias "principais", com no site das lojasamericanas! :D
  • Alessandra Moderador Global
    disse:

    Ola
    Nao sei se vocês viram esse post mais acho que pode ajudar
    http://www.h-o.nl/blog/using_category_i ... avigation/

    Olá Jonatan!
    Eu já tinha visto esse tutorial, mas ele altera muitos arquivos. :?

    Bruno, não sei se a sua loja vai ter mais do que 2 níveis de categorias, mas adaptei um código para listar as categorias e subcategorias:
    http://denisspalenza.com/criando-menus- ... o-magento/

    E acrescentei a chamada da imagem (imagens cadastradas no painel, em Catálogo -> Gerenciar Categorias, campo Imagem) nas categorias de primeiro nível, só que ainda falta arrumar o css. O código ficou assim:


    <?php $_helper = Mage::helper('catalog/category') ?>
    <?php $_categories = $_helper->getStoreCategories() ?>
    <?php $currentCategory = Mage::registry('current_category') ?>
    <?php if (count($_categories) > 0): ?>
    <div class=\"nav-container\">
    <ul id=\"nav\">
    <?php foreach($_categories as $_category): ?>
    <li>
    <?php $categoriaImg = Mage::getModel('catalog/category')->load($_category->getId());
    $img = $categoriaImg->getImageUrl();?>

    <a href=\"<?php echo $_helper->getCategoryUrl($_category) ?>\">
    <img src=\"<?php echo $img ?>\" width=\"60px\" height=\"60px\" alt=\"<?php echo $_category->getName() ?>\" />
    </a>
    <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
    <?php $_subcategories = $_category->getChildrenCategories() ?>
    <?php if (count($_subcategories) > 0): ?>
    <ul id=\"nav\">
    <?php foreach($_subcategories as $_subcategory): ?>
    <li>
    <a href=\"<?php echo $_helper->getCategoryUrl($_subcategory) ?>\">
    <?php echo $_subcategory->getName() ?>
    </a>
    </li>
    <?php endforeach; ?>
    </ul>
    <?php endif; ?>
    </li>
    <?php endforeach; ?>
    </ul>
    </div>
    <?php endif; ?>



    Ele deve ser usado para substituir o atual código do seu menu.
  • disse:

    disse:

    Ola
    Nao sei se vocês viram esse post mais acho que pode ajudar
    http://www.h-o.nl/blog/using_category_i ... avigation/

    Olá Jonatan!
    Eu já tinha visto esse tutorial, mas ele altera muitos arquivos. :?

    Bruno, não sei se a sua loja vai ter mais do que 2 níveis de categorias, mas adaptei um código para listar as categorias e subcategorias:
    http://denisspalenza.com/criando-menus- ... o-magento/

    E acrescentei a chamada da imagem (imagens cadastradas no painel, em Catálogo -> Gerenciar Categorias, campo Imagem) nas categorias de primeiro nível, só que ainda falta arrumar o css. O código ficou assim:


    <?php $_helper = Mage::helper('catalog/category') ?>
    <?php $_categories = $_helper->getStoreCategories() ?>
    <?php $currentCategory = Mage::registry('current_category') ?>
    <?php if (count($_categories) > 0): ?>
    <div class=\"nav-container\">
    <ul id=\"nav\">
    <?php foreach($_categories as $_category): ?>
    <li>
    <?php $categoriaImg = Mage::getModel('catalog/category')->load($_category->getId());
    $img = $categoriaImg->getImageUrl();?>

    <a href=\"<?php echo $_helper->getCategoryUrl($_category) ?>\">
    <img src=\"<?php echo $img ?>\" width=\"60px\" height=\"60px\" alt=\"<?php echo $_category->getName() ?>\" />
    </a>
    <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
    <?php $_subcategories = $_category->getChildrenCategories() ?>
    <?php if (count($_subcategories) > 0): ?>
    <ul id=\"nav\">
    <?php foreach($_subcategories as $_subcategory): ?>
    <li>
    <a href=\"<?php echo $_helper->getCategoryUrl($_subcategory) ?>\">
    <?php echo $_subcategory->getName() ?>
    </a>
    </li>
    <?php endforeach; ?>
    </ul>
    <?php endif; ?>
    </li>
    <?php endforeach; ?>
    </ul>
    </div>
    <?php endif; ?>



    Ele deve ser usado para substituir o atual código do seu menu.


    Olá Alessandra apareceu o os icones ,ta tudo bagunçado acho q tenho q arrumar o css mesmo,hahaah ,e os icones só ficam visiveis quando estou numa categoria quanto estou na página inicial elas não apaarecem.
  • Nesse tema só tem o arquivo top.phtml que é esse:


    <?php
    /**
    * Magento
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Academic Free License (AFL 3.0)
    * that is bundled with this package in the file LICENSE_AFL.txt.
    * It is also available through the world-wide-web at this URL:
    * http://opensource.org/licenses/afl-3.0.php
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to license@magentocommerce.com so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade Magento to newer
    * versions in the future. If you wish to customize Magento for your
    * needs please refer to http://www.magentocommerce.com for more information.
    *
    * @category design
    * @package base_default
    * @copyright Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
    * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
    */
    ?>
    <?php
    /**
    * Top menu for store
    *
    * @see Mage_Catalog_Block_Navigation
    */
    ?>
    <?php
    /**
    * $this->renderCategoriesMenuHtml() supports optional arguments:
    * int Level number for list item class to start from
    * string Extra class of outermost list items
    * string If specified wraps children list in div with this class
    */
    ?>
    <?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
    <?php if($_menu): ?>
    <div class=\"nav-container\">
    <ul id=\"nav\">


    <?php $_helper = Mage::helper('catalog/category') ?>
    <?php $_categories = $_helper->getStoreCategories() ?>
    <?php $currentCategory = Mage::registry('current_category') ?>
    <?php if (count($_categories) > 0): ?>
    <div class=\"nav-container\">
    <ul id=\"nav\">
    <?php foreach($_categories as $_category): ?>
    <li>
    <?php $categoriaImg = Mage::getModel('catalog/category')->load($_category->getId());
    $img = $categoriaImg->getImageUrl();?>

    <a href=\"<?php echo $_helper->getCategoryUrl($_category) ?>\">
    <img src=\"<?php echo $img ?>\" width=\"60px\" height=\"60px\" alt=\"<?php echo $_category->getName() ?>\" />
    </a>
    <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
    <?php $_subcategories = $_category->getChildrenCategories() ?>
    <?php if (count($_subcategories) > 0): ?>
    <ul id=\"nav\">
    <?php foreach($_subcategories as $_subcategory): ?>
    <li>
    <a href=\"<?php echo $_helper->getCategoryUrl($_subcategory) ?>\">
    <?php echo $_subcategory->getName() ?>
    </a>
    </li>
    <?php endforeach; ?>
    </ul>
    <?php endif; ?>
    </li>
    <?php endforeach; ?>
    </ul>
    </div>
    <?php endif; ?>




    <?php echo $_menu ?>
    </ul>
    <ul class=\"cart-nav\">
    <?php
    $_quote = Mage::getSingleton('checkout/session')->getQuote();
    $_cartQty = $_quote->getItemsQty() * 1;
    ?>
    <li class=\"first\"><a href=\"<?php echo $this->getUrl('checkout/cart') ?>\"><strong> <span>Cart</span></strong></a></li>
    <li class=\"last\"><a href=\"<?php echo $this->getUrl('checkout/cart') ?>\"><strong><?php echo $_cartQty;?><span>ITEMS</span></strong></a></li>
    </ul>
    </div>
    <?php endif ?>




    talvez seguindo o que tu me passou consiga. :?
  • Estou tentando customizar este tema para fiar parecido com esse site:

    http://www.partydelights.co.uk/default.aspx
  • Alessandra Moderador Global
    O arquivo para alterar é o top.phtml mesmo, mas você deve substituir todo o conteúdo por aquele que eu citei.
    Testei aqui no mesmo tema e está funcionando, sendo necessário apenas arrumar o css.
  • disse:

    O arquivo para alterar é o top.phtml mesmo, mas você deve substituir todo o conteúdo por aquele que eu citei.
    Testei aqui no mesmo tema e está funcionando, sendo necessário apenas arrumar o css.

    Ok , Alessandra Obrigado.
    Vou testar depois que resolver o menu passo a próxima pergunta. beleza
  • Olá estou fazendo o menu com este tuto: http://referenciamagento.blogspot.com.br/2013/06/topmenu-com-css-menu-maker.html#comment-form

    mas não aparece continua com o menu padrão do tema car parts store, coloquei o css na pasta skin,e alterei page xml,e tbm o to.phtml,mas nada e a estrutura (html) onde coloco??
  • Jonatan Machado Moderador Global, Administrador
    Ola Bruno
    O cache do magento esta desabilitado?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Ola Bruno
    O cache do magento esta desabilitado?

    Sim sim smile_nod
  • Jonatan Machado Moderador Global, Administrador
    Creio que no passo 5 do tutorial voce esteja fazendo alguma cosia errada talvez o arquivo que você esta alterando nao e o mesmo que voce deve alterar. utilize o debug para saber qual arquivo do menu e é do seu tema.
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Creio que no passo 5 do tutorial voce esteja fazendo alguma cosia errada talvez o arquivo que você esta alterando nao e o mesmo que voce deve alterar. utilize o debug para saber qual arquivo do menu e é do seu tema.

    Já alterei o topphtml no app/design/frontend/default/car_store/template/catalog/navigation/top.phtml que seria o que monta o meu,mas da uma olhada na imagem talvez eu nõ esteja prestando atenção. :?


    http://img202.imageshack.us/img202/3378/lg54.jpg
  • Jonatan Machado Moderador Global, Administrador
    O arquivo e esse mesmo porem presta atenção no caminho também, não é o mesmo

    O que você esta alterando seria o

    app/design/frontend/default/car_store/template/catalog/navigation/top.phtml

    mas o que o magento esta imprimindo seria

    app/design/frontend/default/default/template/xmllinks/catalog/navigation/top.phtm

    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    O arquivo e esse mesmo porem presta atenção no caminho também, não é o mesmo

    O que você esta alterando seria o

    app/design/frontend/default/car_store/template/catalog/navigation/top.phtml

    mas o que o magento esta imprimindo seria

    app/design/frontend/default/default/template/xmllinks/catalog/navigation/top.phtm


    Ufaaa, agora sim, obrigado,sabia que eu estava alterando no lugar errado, olha só a página inicial sumiu do menu,pq será !?
  • Jonatan Machado Moderador Global, Administrador
    Deve ser porque o tutorial que Alessandra fez não tem link da home

    Mas você pode adicionar um link em cima da linha
    <?php foreach($_categories as $_category): ?>


    adicione uma <li> com um link

    &lt;li class=\"has-sub\"&gt;
    &lt;a href=\"/\"&gt;
    Home
    &lt;/a&gt;
    &lt;/li&gt;
    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.