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

Blocos informativos em todas as páginas

brunowdbrunowd Usuário
editado February 2014 em Blocos Estáticos
Olá,

Estou querendo fazer um popup,lightobox ou algo assim como no site :
http://www.partydelights.co.uk/default.aspx?pmo=pa

Que fica logo abaixo do menu deles,eu queria fazer algo parecido com dicas de como comprar no site,frete pagamento,personalização e outras dicas, e que apareça em todas as páginas.

Pensando talvez fazer com esse tutorial do SAM http://mariosam.com.br/magento/janelas-popups/, ou tem outra ideia?
Obrigado.
«1

Comentários

  • Jonatan Machado Moderador Global, Administrador
    Ola Bruno
    Isso pode ser feito com qualquer tutorial de lightbox o resultado sera quase o mesmo, pode ate utilizar aquele lightbox que voce utilizou na pagina do produto
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Bah !

    Fiz um bloco ,só não funcionou o lightbox

    <p>Como Comrprar</p>
    <script type=\"text/javascript\" src=\"{{skin url='js/modernizr.custom.js'}}"\"></script>
    <div class=\"wrapper\">
    <div class=\"image-row\"><a class=\"example-image-link\" href=\"{{skin url='images/PAGAMENTO.jpg'}}\" data-lightbox=\"example-1\"><img src=\"{{skin url='images/money.png'}}\" alt=\"\" />Formas de Pagamento </a> <a class=\"example-image-link\" title=\"Optional caption.\" href=\"{{skin url='images/entrega.jpg'}}"\" data-lightbox=\"example-2\"><img src=\"{{skin url='images/truck.png'}}\" alt=\"\" />Formas de Entrega</a></div>
    <h3 style=\"clear: both;\">
    <script type=\"text/javascript\" src=\"{{skin url='js/jquery-1.10.2.min.js'}}\"></script>
    <script type=\"text/javascript\" src=\"{{skin url='js/lightbox-2.6.min.js'}}\"></script>
    <script type=\"text/javascript\">// <![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-2196019-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    // ]]></script>
    </h3>
    </div>






    Talvez tenha q arrumar s url dos js,pq subi os arquivos via FTP :? sl
  • Jonatan Machado Moderador Global, Administrador
    Se você não subir os js nunca vai funcionar.
    Outra coisa que voce tem que fazer para funcionar e utilizar o noConflict jQuery para nao dar conflito entre o jquery e o prototype
    http://wbruno.com.br/jquery/noconflict- ... ipt-alias/
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Eu vou fazer em css como no llightbox da página do produto! Tudo em css essas parada de jquery,são um mistério pra eu :D
  • Já consegui fazer

    html:

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

    <html xmlns=\"http://www.w3.org/1999/xhtml\">

    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" />
    <meta name=\"author\" content=\"The CSS Ninja\" />
    <meta name=\"keywords\" content=\"CSS, CSS3, CSS pseudo selectors, Futurebox\" />
    <meta name=\"description\" content=\"Futurebox, lightbox without the javascript\" />
    <meta name=\"robots\" content=\"all\" />
    <meta name=\"copyright\" content=\"The CSS Ninja\" />

    <link rel=\"stylesheet\" type=\"text/css\" href=\"_styles.css\" media=\"screen\" />


    <script type=\"text/css\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>



    <title>Futurebox, lightbox without the javascript | The CSS Ninja</title>

    </head>
    <body>



    <div class=\"clear\"> </div>

    <h2>Como Comprar</h2>
    <ul>
    <li title=\"Static content example 1\">
    <label for=\"futurebox06\"><img src=\"../teste lighbox compras/escolhaproduto.jpg\" width=\"371\" height=\"83\" alt=\"The CSS Ninja\" /></label>
    <input type=\"radio\" id=\"futurebox06\" name=\"gallery\" />
    <div class=\"overlay\">
    <label for=\"close\" title=\"Close futurebox\">
    <span class=\"content01\">
    <strong class=\"closebutton\" title=\"Close futurebox\">X</strong>
    <span class=\"inner_content\">
    <img src=\"http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif\" width=\"100\" height=\"102\" alt=\"The CSS Ninja\" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>

    <img src=\"http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif\" width=\"100\" height=\"102\" alt=\"The CSS Ninja\" />
    <span>Duis risus erat, vestibulum sollicitudin tincidunt vel, ultricies at lacus. Vestibulum pharetra tristique tortor at eleifend. Nulla facilisi. Cras quis nulla nibh. Nullam fermentum dapibus nulla id convallis. Nam aliquam lectus vitae magna rhoncus quis pellentesque risus vehicula. Maecenas laoreet suscipit placerat. Mauris ut leo ac odio semper scelerisque at quis velit. Integer pellentesque magna at ligula condimentum in molestie dolor laoreet. Curabitur nec nisl ut nisl pretium hendrerit vel quis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque et eros eu orci porttitor dignissim. Proin tempus erat sit amet mi accumsan at imperdiet lorem blandit. Vestibulum sit amet facilisis tortor. Phasellus venenatis vestibulum enim, nec fringilla nunc egestas quis. Morbi eu urna dui. </span>
    <span>Praesent bibendum condimentum congue. Fusce orci lorem, euismod vitae pellentesque dapibus, faucibus eu dui. Vivamus mauris est, accumsan consectetur pellentesque et, lobortis ac felis. Nulla condimentum facilisis urna, quis bibendum dui ultricies sed. Nunc interdum massa vel est vulputate vel volutpat velit pharetra. Donec fermentum massa viverra diam ullamcorper porta. Morbi convallis orci sed est rhoncus ullamcorper. Nam ante quam, ornare sed lacinia eget, cursus nec metus. Pellentesque vehicula viverra iaculis. Ut consequat viverra libero, nec iaculis erat vestibulum nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales pellentesque erat, id consequat eros fermentum ac. Suspendisse porta vehicula vehicula. Etiam eleifend, dolor a blandit rhoncus, quam lacus volutpat libero, in volutpat justo sapien quis ante. Nunc nec lorem porttitor purus bibendum vulputate. Suspendisse ultrices arcu non erat eleifend adipiscing. Phasellus pretium volutpat orci, a dapibus velit gravida quis. Nunc aliquam gravida tellus. </span>
    </span>
    </span>
    </label>
    </div>
    </li>
    <li title=\"Static content example 2\">
    <label for=\"futurebox07\"><img src=\"../teste lighbox compras/producao.jpg\" width=\"280\" height=\"83\" alt=\"The CSS Ninja\" /></label>
    <input type=\"radio\" id=\"futurebox07\" name=\"gallery\" />
    <div class=\"overlay\">
    <label for=\"close\" title=\"Close futurebox\">
    <span class=\"content01\">
    <strong class=\"closebutton\" title=\"Close futurebox\">X</strong>
    <span class=\"inner_content\">
    <img src=\"http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif\" width=\"100\" height=\"102\" alt=\"The CSS Ninja\" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
    </span>
    </span>
    </label>
    </div>
    </li>

    <li title=\"Iframe content example 1\">
    <label for=\"futurebox08\"><img src=\"../teste lighbox compras/forma_entrega.jpg\" width=\"407\" height=\"83\" alt=\"The CSS Ninja\" /></label>
    <input type=\"radio\" id=\"futurebox08\" name=\"gallery\" />
    <div class=\"overlay\">
    <label for=\"close\" title=\"Close futurebox\">
    <span class=\"content01 content02\">
    <strong class=\"closebutton\" title=\"Close futurebox\">X</strong>
    <iframe src=\"http://www.thecssninja.com/contact\" width=\"800\" height=\"500\"></iframe>
    </span>
    </label>
    </div>
    </li>
    <li title=\"Iframe content example 2\">
    <label for=\"futurebox09\"><img src=\"../teste lighbox compras/forma_pagamento.jpg\" width=\"406\" height=\"83\" alt=\"The CSS Ninja\" /></label>
    <input type=\"radio\" id=\"futurebox09\" name=\"gallery\" />
    <div class=\"overlay\">
    <label for=\"close\" title=\"Close futurebox\">
    <span class=\"content01 content02\">
    <strong class=\"closebutton\" title=\"Close futurebox\">X</strong>
    <iframe src=\"http://www.google.com.au/search?q=futurebox\" width=\"800\" height=\"500\" ></iframe>
    </span>
    </label>
    </div>
    </li>
    </ul>

    <div class=\"clear\"> </div>



    <input type=\"radio\" id=\"close\" name=\"gallery\" />

    </body>
    </html>



    CSS:

    /* Just some base styles not needed for example to function */
    *, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
    html, body { height: 100%; }

    body, form, ul, li, p, h1, h2, h3, h4, h5
    {
    margin: 0;
    padding: 0;
    }
    body { background-color: #606061; color: #ffffff; }
    img { border: none; }
    p
    {
    font-size: 12px;
    margin: 0 0 1em 0;
    }
    h2 { padding: 10px 0 0 20px; }
    .clear + h2 { padding: 0 0 0 20px; }
    .clear
    {
    height: 0 !important;
    line-height: 0 !important;
    clear: both !important;
    font-size: 1px !important;
    margin: 0;
    padding: 0;
    float: none !important;
    }

    /* Futurebox styles */
    ul
    {
    padding: 20px 0 20px 20px;
    float: left;
    }
    ul li
    {
    display: inline-block;
    float: left;
    list-style: none;
    margin: 0 10px 0 0;
    border: 3px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    ul li:hover { border: 3px solid #1E528C; }

    ul li img, ul li label
    {
    display: block;
    cursor: pointer;
    }

    ul li input { display: none; }
    ul li input:checked + .overlay { display: table; }

    .overlay
    {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 999;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.7);
    }
    .overlay label
    {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
    .overlay img,
    .overlay iframe
    {
    display: inline;
    border: none;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffff;
    }

    .theme01 .overlay
    {
    background: none;
    }
    .theme01 .overlay label > img,
    .theme01 .overlay iframe,
    .theme01 .content01
    {
    border: 1px solid #ccc;
    -moz-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
    -webkit-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
    box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
    }

    .content01
    {
    display: block;
    width: 460px;
    padding: 20px;
    background: #fff;
    color: #000;
    margin: 0 auto;
    text-align: left;
    cursor: auto;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    .content01 .inner_content
    {
    display: block;
    height: 500px;
    overflow-y: auto;
    }
    .content01 .inner_content span { display: block; margin-bottom: 12px; font-size: 12px; }
    #futurebox07 + .overlay .inner_content { height: 265px; }
    .content01 img:first-child { float: left; display: block; margin: 0 10px 0 0; }
    .content01 img { float: right; margin: 0 10px; padding: 0; }

    .content02
    {
    width: 820px;
    padding: 0;
    }

    #close { display: none; }
    .closebutton
    {
    background: #606061;
    color: #FFFFFF;
    cursor: pointer;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -12px;
    width: 24px;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    }
    .closebutton:hover
    {
    background: #318DF2;
    text-shadow: 1px 1px 1px #ccc;
    }



    Mas só que no bloco eu não consigo linkar ele com o _style.css e se eu coloco junto com o css do meu tema fica bugado,pq ele pega as configurações do lightboz e coloca no menu e em outras partes.


    BLOCO:

    <script type=\"text/css\" src=\"{{skin url='css/_styles.css'}}\"></script>
    <div class=\"clear\"> </div>
    <h2>Como Comprar</h2>
    <ul>
    <li title=\"Static content example 1\"><label for=\"futurebox06\"><img src=\"teste lighbox compras/escolhaproduto.jpg\" alt=\"The CSS Ninja\" width=\"371\" height=\"83\" /></label> <input id=\"futurebox06\" type=\"radio\" name=\"gallery\" />
    <div class=\"overlay\"><label title=\"Close futurebox\" for=\"close\"> <span class=\"content01\"> <strong class=\"closebutton\" title=\"Close futurebox\">X</strong> <span class=\"inner_content\"> <img src=\"http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif\" alt=\"The CSS Ninja\" width=\"100\" height=\"102\" /> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span> <img src=\"http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif\" alt=\"The CSS Ninja\" width=\"100\" height=\"102\" /> <span>Duis risus erat, vestibulum sollicitudin tincidunt vel, ultricies at lacus. Vestibulum pharetra tristique tortor at eleifend. Nulla facilisi. Cras quis nulla nibh. Nullam fermentum dapibus nulla id convallis. Nam aliquam lectus vitae magna rhoncus quis pellentesque risus vehicula. Maecenas laoreet suscipit placerat. Mauris ut leo ac odio semper scelerisque at quis velit. Integer pellentesque magna at ligula condimentum in molestie dolor laoreet. Curabitur nec nisl ut nisl pretium hendrerit vel quis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque et eros eu orci porttitor dignissim. Proin tempus erat sit amet mi accumsan at imperdiet lorem blandit. Vestibulum sit amet facilisis tortor. Phasellus venenatis vestibulum enim, nec fringilla nunc egestas quis. Morbi eu urna dui. </span> <span>Praesent bibendum condimentum congue. Fusce orci lorem, euismod vitae pellentesque dapibus, faucibus eu dui. Vivamus mauris est, accumsan consectetur pellentesque et, lobortis ac felis. Nulla condimentum facilisis urna, quis bibendum dui ultricies sed. Nunc interdum massa vel est vulputate vel volutpat velit pharetra. Donec fermentum massa viverra diam ullamcorper porta. Morbi convallis orci sed est rhoncus ullamcorper. Nam ante quam, ornare sed lacinia eget, cursus nec metus. Pellentesque vehicula viverra iaculis. Ut consequat viverra libero, nec iaculis erat vestibulum nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales pellentesque erat, id consequat eros fermentum ac. Suspendisse porta vehicula vehicula. Etiam eleifend, dolor a blandit rhoncus, quam lacus volutpat libero, in volutpat justo sapien quis ante. Nunc nec lorem porttitor purus bibendum vulputate. Suspendisse ultrices arcu non erat eleifend adipiscing. Phasellus pretium volutpat orci, a dapibus velit gravida quis. Nunc aliquam gravida tellus. </span> </span> </span> </label></div>
    </li>
    <li title=\"Static content example 2\"><label for=\"futurebox07\"><img src=\"teste lighbox compras/produção.jpg\" alt=\"The CSS Ninja\" width=\"280\" height=\"83\" /></label> <input id=\"futurebox07\" type=\"radio\" name=\"gallery\" />
    <div class=\"overlay\"><label title=\"Close futurebox\" for=\"close\"> <span class=\"content01\"> <strong class=\"closebutton\" title=\"Close futurebox\">X</strong> <span class=\"inner_content\"> <img src=\"http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif\" alt=\"The CSS Ninja\" width=\"100\" height=\"102\" /> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span> </span> </span> </label></div>
    </li>
    <li title=\"Iframe content example 1\"><label for=\"futurebox08\"><img src=\"teste lighbox compras/forma_entrega.jpg\" alt=\"The CSS Ninja\" width=\"407\" height=\"83\" /></label> <input id=\"futurebox08\" type=\"radio\" name=\"gallery\" />
    <div class=\"overlay\"><label title=\"Close futurebox\" for=\"close\"> <span class=\"content01 content02\"> <strong class=\"closebutton\" title=\"Close futurebox\">X</strong> <iframe src=\"http://www.thecssninja.com/contact\" width=\"800\" height=\"500\"></iframe> </span> </label></div>
    </li>
    <li title=\"Iframe content example 2\"><label for=\"futurebox09\"><img src=\"teste lighbox compras/forma_pagamento.jpg\" alt=\"The CSS Ninja\" width=\"406\" height=\"83\" /></label> <input id=\"futurebox09\" type=\"radio\" name=\"gallery\" />
    <div class=\"overlay\"><label title=\"Close futurebox\" for=\"close\"> <span class=\"content01 content02\"> <strong class=\"closebutton\" title=\"Close futurebox\">X</strong> <iframe src=\"http://www.google.com.au/search?q=futurebox\" width=\"800\" height=\"500\"></iframe> </span> </label></div>
    </li>
    </ul>
    <div class=\"clear\"> </div>
    <p><input id=\"close\" type=\"radio\" name=\"gallery\" /></p>
  • Jonatan Machado Moderador Global, Administrador
    Como eu ja tinha te falado uma vez voce nao pode colocar assim
    p{
    font-size: 12px;
    margin: 0 0 1em 0;
    }

    Voce tem que criar class nos elementos html
    p.paragrafo{
    font-size: 12px;
    margin: 0 0 1em 0;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Vou tentar aqui,obrigado!
  • Jonatan Machado Moderador Global, Administrador
    Da uma lida aqui você vai entender melhor o CSS
    http://desenvolvimentoparaweb.com/css/d ... e-classes/
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan da uma olhada lá na minha página inicial, coloquei um bloco com as imagens e seus respectivos blocos,copiei o mesmo bloco das categorias que fica embaixo do banner,mas ele não se alinha as imagens uma do lado do outro,será que tenho que fazer um código css pra ele?
  • Jonatan Machado Moderador Global, Administrador
    Para alinhar você tem que utilizar o float:left;
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Oi consegui fazer o bloco,mas na página do produto e nas categorias ele fica errado por causo que é com 2 colunas,alguma ideia de como arrumar?
  • Jonatan Machado Moderador Global, Administrador
    Nao reparei em erro, qual seria o erro ?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • página do produto:



    página lista

  • Jonatan Machado Moderador Global, Administrador
    Por onde você adicionou esses banner como comprar etc?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • fiz um widget...assim:

  • Jonatan Machado Moderador Global, Administrador
    Como voce adicionou o widget na pagina?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Pela atualização de layout;

    Display on : Todas as páginas.

    Bloco de Referência: Área de conteúdo

    só isso.
  • Jonatan Machado Moderador Global, Administrador
    Ola Brunowd
    Acho que a melhor e mais fácil e você chamar o bloco estatico com php em um arquivo no header.
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • alteraria o catalog.xml

    coloco

       
    <reference name=\"content\">

    <block type=\"cms/block\" name=\"featured-category-carstore\">

    <action method=\"setBlockId\"><id>featured-category-carstore</id></action>

    </block>

    </reference>


    só que ao invés de : <reference name="content"> colocar <reference name="header">

    certo??
  • Assim ?

      &lt;reference name=\"header\"&gt;

    &lt;block type=\"cms/block\" name=\"featured-category-carstore\"&gt;

    &lt;action method=\"setBlockId\"&gt;&lt;id&gt;featured-category-carstore&lt;/id&gt;&lt;/action&gt;

    &lt;/block&gt;

    &lt;/reference&gt;
  • Jonatan Machado Moderador Global, Administrador
    Melhor voce chamar o bloco com PHP voce coloca no arquivo do header
    viewtopic.php?f=21&t=8
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • é funcionou,ele ficou atrás do top.menu :)

    agora mudar o css?
  • Ficou assim o código:

    ?&gt;
    &lt;div class=\"header-container\"&gt;
    &lt;div class=\"header\"&gt;
    &lt;div class=\"welcome-logo\"&gt;
    &lt;p class=\"welcome-msg\"&gt;&lt;?php echo $this-&gt;getWelcome()?&gt;&lt;/p&gt;
    &lt;h1 class=\"logo\"&gt;&lt;strong&gt;&lt;?php echo $this-&gt;getLogoAlt() ?&gt;&lt;/strong&gt;&lt;a href=\"&lt;?php echo $this-&gt;getUrl('') ?&gt;\" title=\"&lt;?php echo $this-&gt;getLogoAlt() ?&gt;\" class=\"logo\"&gt;&lt;img src=\"&lt;?php echo $this-&gt;getLogoSrc() ?&gt;\" alt=\"&lt;?php echo $this-&gt;getLogoAlt() ?&gt;\" /&gt;&lt;/a&gt;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class=\"quick-access\"&gt;
    &lt;?php echo $this-&gt;getChildHtml('topLinks') ?&gt;
    &lt;div class=\"language-curreny\"&gt;
    &lt;?php echo $this-&gt;getChildHtml('store_currency') ?&gt;
    &lt;?php echo $this-&gt;getChildHtml('store_language') ?&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;?php echo $this-&gt;getChildHtml('topSearch') ?&gt;
    &lt;?php echo $this-&gt;getChildHtml('topContainer'); ?&gt;
    &lt;?php echo $this-&gt;getChildHtml('topMenu') ?&gt;

    &lt;?php echo $this-&gt;getLayout()-&gt;createBlock('cms/block')-&gt;setBlockId('featured-category-carstore')-&gt;toHtml() ?&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  • Jonatan Machado Moderador Global, Administrador
    Para posicionar voce pode utilizar CSS
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Tentei colocar ele abaixo do top.menu,alterei os margin do nav - container e do main-container,mas nada.
  • Jonatan Machado Moderador Global, Administrador
    Voce vai ter que desfazer as alterações do css e retirar o featured-category-carstore eo topMenu de dentro <div class="header-container">
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Mas altero só o style.css ou algum arquivo .xml ou .phtml :?:
  • Jonatan Machado Moderador Global, Administrador
    phtml, o css voce vai so desfazer as alterações.
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan valeu por ajudar! Mostrei para o chefe ele curtiu assim,só tenho que substituir pela cor branca aquelas imagens .
    Obrigado. :D
Entre ou Registre-se para fazer um comentário.