[Pedido] Modificar Página de Loja

Olá,

Vou ver se alguém é capaz de me fazer este pequeno trabalho, que já ando a pensar nele a algum tempo.

Eu estou a utilizar o código:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


Vamos começar por pontos, na parte do topo onde diz Loja, em baixo queria retirar tudo e apenas colocar texto para depois eu poder modificar à minha maneira.

Onde diz Itens queria retirar tudo e apenas queria como está no primeiro exemplo, queria colocar a esquerda um banner mais ou menos daquele tamanho que coloquei e ao lado direito a descrição, queria esse 1º exemplo em 5 espaços abaixo.

Isto certamente queria para as Parcerias se me perceberem, se conseguirem agradecia imenso !

Olá,

Pare de fazer tópicos em áreas incorretas, só vou te ajudar depois de um administrador mover o tópico.

Até!

Olá!
Vou ver se consigo editar para que faça um efeito parecido com este.
Só tenho uma dúvida: você quer remover os produtos da loja e adicionar banners de parceiros no lugar? Ou quer deixar igual ao print?


Até!

Remover os produtos e adicionar 5 banners chegam.

Olá, para facilitar o seu trabalho, poderia nos passar os códigos dos banners desejados?
Assim você não precisa editar depois.

Abraço!
Blue.

Olá,

Coloque uma imagem que desejar que depois eu modifico sem problemas nenhum

Eu reduzi o código e adicionei 2 banners.

Aqui está o resultado:

Código:


<div class="main">
   <div class="main-content cont">
      <div class="LayoutLeft clearfix">
         <div id="usercp_content">
            <div class="box_r">
               <div class="box_t">
                  <!--  Início aba 1  -->
                  <div class="abas" id="abas1">
                     <div class="box_r">
                        <div class="main-head">
                           <div class="page-title">
                              <h2>
                              Ítens </h2>
                           </div>
                        </div>
                        <table class="table" cellspacing="0">
                        <tbody class="statused">
                        <tr class="item" id="item1">
                           <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                           </td>

                           <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                           </td>
                        </tr>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>


Eu também organizei em tabifier o código, e alinhei para evitar erros.
Além disso, também comprimi o mesmo para evitar demora no carregamento.

Abraços!
Aguardo print do resultado.

BlueM.

Olá,

Ficou ao contrário uma coisa o footer é que ficou dentro da zona de ITENS, poderia trocar?
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Estranho...
Vou dar uma olhada e mando o resultado novo.

Olá,

Irei aguardar então, mas está quase lá é desse género que desejo mas no lado direito depois quero texto que vai ser a descrição do banner.

Aqui está o novo código:

Código:


<div class="main-head">
   <div class="page-title">
      <h2>
      Banners </h2>
   </div>
</div>
<table class="table" cellspacing="0">
<tbody class="statused">
<tr class="item" id="item1">
   <td style="text-align:center;width:49%;margin:5px" class="row2">
      <img src="http://i.imgur.com/rhp9w1C.png"/>
   </td>
   <td style="text-align:center;width:49%;margin:5px" class="row2">
      <img src="http://i.imgur.com/rhp9w1C.png"/>
   </td>
</tr>
</table>

Obs: Não usei seu código como base, fiz um novo mais simples.
Abraço!

BlueMan.

Olá,

Já está quase amigo e já está como queria só que falta uns pontos a acrescentar se não se importar como:

- Queria que coloca-se a direita algum texto, que vai servir para uma pequena descrição e deixar estar o banner à esquerda.
- Queria que acrescenta-se mais 4 banners para baixo e se possível uma linha a separar ambos.
- Como está na print da dúvida onde diz "Loja" queria algo daquele género e depois em baixo para por uma pequena informação e também em cima dos banner's creia aquela barra azul a dizer "Parcerias".

Aqui fica uma print +/- como desejava a página de HTML:


Se conseguir finalizar isso, fica perfeito!

Aqui está um novo código:

Código:

<div class="main">
   <div class="main-content cont">
      <div class="LayoutLeft clearfix">
         <div id="usercp_content">
            <div class="box_r">
               <div class="box_t">
                  <!--  Início aba 1  -->
                  <div class="abas" id="abas1">
                     <div class="box_r">
                        <div class="main-head">
                           <div class="page-title">
                              <h2>
                              Banners </h2>
                           </div>
                        </div>
                        <table class="table" cellspacing="0">
                        <tbody class="statused">
                        <tr class="item" id="item1">
                           <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                           </td>
                           <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                           </td>
                        </tr>
                        </table>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

BlueM.

Olá,

Sim era isso, agora colocar outra em cima como está na print e colocar mais 4 banner's para baixo e ao lado direito texto, e está pronto caro amigo!

Aqui fica como ficou:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Aqui está um novo código:

Código:


<div class="main">
  <div class="main-content cont">
      <div class="LayoutLeft clearfix">
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
                  <!--  Início aba 1  -->
                  <div class="abas" id="abas1">
                    <div class="box_r">
                        <div class="main-head">
                          <div class="page-title">
                              <h2>
                              Banners 1 </h2>
                          </div>
                        </div>
                        <table class="table" cellspacing="0">
                        <tbody class="statused">
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        </table>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</div>

<div class="main">
  <div class="main-content cont">
      <div class="LayoutLeft clearfix">
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
                  <!--  Início aba 1  -->
                  <div class="abas" id="abas1">
                    <div class="box_r">
                        <div class="main-head">
                          <div class="page-title">
                              <h2>
                              Banners 2 </h2>
                          </div>
                        </div>
                        <table class="table" cellspacing="0">
                        <tbody class="statused">
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        </table>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</div>


Abraço!
BlueM.

Olá,

Meu deus está ficar mesmo como desejava só falta uma pequena coisinha era na zona de "Banner 1" apenas deixar o texto e não centrado, colocar em modo justificado da esquerda para a direita e o resto está muito bom!

Aqui está como ficou:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Aqui está minha nova tentativa:

Código:


<div class="main">
  <div class="main-content cont">
      <div class="LayoutLeft clearfix">
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
                  <!--  Início aba 1  -->
                  <div class="abas" id="abas1">
                    <div class="box_r">
                        <div class="main-head">
                          <div class="page-title">
                              <h2>
                              Banners 1 </h2>
                          </div>
                        </div>
                        <table class="table" cellspacing="0">
                        <tbody class="statused">
                        <tr class="item" id="item1">
                          <td style="text-align:justify;width:100%;" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        </table>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</div>

<div class="main">
  <div class="main-content cont">
      <div class="LayoutLeft clearfix">
        <div id="usercp_content">
            <div class="box_r">
              <div class="box_t">
                  <!--  Início aba 1  -->
                  <div class="abas" id="abas1">
                    <div class="box_r">
                        <div class="main-head">
                          <div class="page-title">
                              <h2>
                              Banners 2 </h2>
                          </div>
                        </div>
                        <table class="table" cellspacing="0">
                        <tbody class="statused">
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        <tr class="item" id="item1">
                          <td style="text-align:center;width:49%;margin:5px" class="row2">
                              <img src="http://i.imgur.com/rhp9w1C.png"/>
                          </td>
                          <td style="text-align:left;width:49%;margin:5px" class="row2">
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                          </td>
                        </tr>
                        </table>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</div>


BlueM.

Olá,

É isso mesmo, mas reparei numa situação que na parte dos títulos tem um espaço logo em cima não da para colocar a barra azul logo em cima colado ?


E de resto está perfeito !

Adicione isto ao seu CSS:

Código:


.main .main-head {margin-bottom: 0px !important;}


BlueM.

Olá,

Continua na mesma caro amigo.