Nova página Grupos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Nova página Grupos

Mensagem por TappedOut em 20/05/14, 12:23 pm

  • Descrição:
Queria que minha pagina de grupos ficasse assim:


  • Informações:
Fórum:http://battlefield4.forumeiros.com/Versão:PUNBB
Tipo:Pedido de códigoTags:página,Grupos



Última edição por PerdaTotal em 07/06/14, 02:21 pm, editado 1 vez(es)
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por Alex Habilidade em 20/05/14, 07:51 pm

Em qual fórum o senhor viu isto?
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 20/05/14, 08:03 pm

Não é exatamente um forum é um site e eu editei pelo F12 os textos.
http://www.battlefieldheroes.com/br/groups
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por iPrompt em 20/05/14, 08:08 pm

Olá,

Talvez até seja possível com muita edição de Templates, CSS e JS eu acho talvez não seja possível mais se for vai demorar muito e eu não iria conseguir

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 20/05/14, 08:13 pm

Grato, mesmo assim irei aguardar respostas.
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 22/05/14, 02:46 pm

UP
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 25/05/14, 08:47 am

UP
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por Kyo Panda em 26/05/14, 04:17 pm

Olá,

Ao contrário do site que nos passou, o grupos dos fóruns Forumeiros funcionam de uma maneira diferente. Além dos usuários não poderem criar grupos, como no fórum passado, o número de grupos é limitado e controlados pelos administradores.

Dessa página, o que podemos fazer é:

- A descrição no topo, com uma imagem customizada (já que não podemos usar o Flash, por causa de direitos autorais).
- A lista de grupos que o usuário participa, grupos pendentes e grupos remanescentes, na mesma estrutura do fórum passado, com exceção da descrição do grupo, que não está disponível no template.
- As imagens do grupo, mas você terá que configurar uma a uma, manualmente.

A paginação e filtro de grupos não é possível, pois não são funções da Forumeiros.

Tudo bem? Feliz

P.S: O layout dos indivíduos também é protegido por direitos autorais, logo teremos que fazer diferente.
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 26/05/14, 06:07 pm

Perfeito, não há problema.
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por Kyo Panda em 26/05/14, 10:14 pm

Poderia passar o seu template Grupos › groupcp_user_body? Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 26/05/14, 11:34 pm

Aqui está amigo:
Código:
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<div class="pun-crumbs">
   <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}&nbsp;»&nbsp;<strong>{L_USERGROUPS}</strong>
   </p>
</div>

<div class="main">
<!-- BEGIN switch_groups_joined -->
   <!-- BEGIN switch_groups_member -->
   <div class="main-head">
      <h1 class="page-title">{L_GROUP_MEMBERSHIP_DETAILS}</h1>
   </div>

   <div class="main-content">
      <fieldset class="frm-set">
         <dl>
            <dt><label>{L_YOU_BELONG_GROUPS}</label></dt>
            <dd>{GROUP_MEMBER_SELECT_NEW}</dd>
         </dl>
      </fieldset>
   </div>
   <!-- END switch_groups_member -->

   <!-- BEGIN switch_groups_pending -->
   <div class="main-head">
      <h2>{L_USERGROUPS}</h2>
   </div>

   <div class="main-content">
      <fieldset class="frm-set">
         <dl>
            <dt><label>{L_PENDING_GROUPS}</label></dt>
            <dd>{GROUP_PENDING_SELECT_NEW}</dd>
         </dl>
      </fieldset>
   </div>
   <!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->

<!-- BEGIN switch_groups_remaining -->
   <form action="{S_USERGROUP_ACTION}" method="get" class="frm-form">
   <div class="main-head">
      <h2>{L_JOIN_A_GROUP}</h2>
   </div>

   <div class="main-content">
      <fieldset class="frm-set">
         <dl>
            <dt><label>{L_SELECT_A_GROUP}</label></dt>
            <dd>{GROUP_LIST_SELECT}&nbsp;<input type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
         </dl>
      </fieldset>
   </div>
   </form>
<!-- END switch_groups_remaining -->
</div>
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 03/06/14, 06:20 pm

UP
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por Kyo Panda em 07/06/14, 10:59 am

Yo, coff, coff *pó*

Desculpe a demora, mas esta alteração foi radical. Feliz

Vamos lá, direi o que deve alterar para cada ponto. Troque o template por esse:

Código:
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
    <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->

<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<div class="pun-crumbs">
 <p class="crumbs">
 <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}&nbsp;»&nbsp;<strong>{L_USERGROUPS}</strong>
 </p>
</div>

<div class="main group-description">
    <h2>O que são grupos?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam imperdiet commodo. Praesent ac rhoncus nibh, quis scelerisque diam.</p>
    <ul>
        <li>Nulla ac leo ut purus euismod sollicitudin. Nam lacinia odio ut suscipit suscipit.</li>
        <li>Curabitur eleifend arcu ut leo euismod, ut semper est tempor. Suspendisse tortor lectus.</li>
    </ul>
</div>

<div class="main group-wrapper">
    
    <div class="group-content">
    
        <!-- BEGIN switch_groups_joined -->
      
       <!-- BEGIN switch_groups_member -->
        <div class="group-title">
            <h1>{L_GROUP_MEMBERSHIP_DETAILS}</h1>
        </div>
        
        <div class="group-block">
            <div class="group-label">{L_YOU_BELONG_GROUPS}</div>
            {GROUP_MEMBER_SELECT_NEW}
            <div class="group-list"></div>            
        </div>
        <!-- END switch_groups_member -->

        <!-- BEGIN switch_groups_pending -->
        <div class="group-title">
            <h1>{L_USERGROUPS}</h1>
        </div>
        
        <div class="group-block">
            <div class="group-label">{L_PENDING_GROUPS}</div>
            {GROUP_PENDING_SELECT_NEW}
            <div class="group-list"></div>            
        </div>
        <!-- END switch_groups_pending -->
        
        <!-- END switch_groups_joined -->
        
        <!-- BEGIN switch_groups_remaining -->        
        <div class="group-title">
            <h1>{L_JOIN_A_GROUP}</h1>
        </div>
        
        <div class="group-block">
            <div class="group-label">{L_SELECT_A_GROUP}</div>
            {GROUP_LIST_SELECT}
            <div class="group-list"></div>            
        </div>        
        <!-- END switch_groups_remaining -->
    </div>    
</div>

<script type="text/javascript">
    $(function() {
      $('.group-block a').each(function() {
        var self;
        self = $(this);
        self.closest('.group-block').find('.group-list').append('<div class="group-unit group-' + self.attr('href').replace(/[^\d+]/g, '') + '"><a href="' + self.attr('href') + '" class="group-title">' + self.text() + '</a></div>');
      });
      $('.group-block option').each(function() {
        var self;
        self = $(this);
        self.closest('.group-block').find('.group-list').append('<div class="group-unit group-' + self.attr('value') + '"><a href="/g' + self.attr('value') + '-" class="group-title">' + self.text() + '</a></div>');
      });
      $('.group-block select, .group-block .noList').remove();
    });
</script>

No template, o que deve ser alterado é essa parte:

Código:
<div class="main group-description">
    <h2>O que são grupos?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam imperdiet commodo. Praesent ac rhoncus nibh, quis scelerisque diam.</p>
    <ul>
        <li>Nulla ac leo ut purus euismod sollicitudin. Nam lacinia odio ut suscipit suscipit.</li>
        <li>Curabitur eleifend arcu ut leo euismod, ut semper est tempor. Suspendisse tortor lectus.</li>
    </ul>
</div>

Insira a descrição e pontos dos grupos do seu fórum. Essa é a parte do topo, que possui a imagem dos personagens.

E então adicione ao CSS:

Código:
/**
 * Grupos
 */

.group-description {
  position: relative;
  padding: 20px 60px;
  line-height: 1.5em;
  background: url(http://i39.servimg.com/u/f39/18/84/43/39/back10.jpg);
}

.group-description > * {
  position: relative;
  z-index: 1;
}

.group-description h2 {
  display: inline-block;
  font-weight: 700;
  font-size: 18px !important;
  line-height: 1.5em;
  color: #fff;
  text-shadow: 0 -3px 1px #000, 3px 0 1px #000, 0 3px 1px #000, -3px 0 1px #000;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  transform: rotate(-2deg);
  padding-bottom: 10px;
}

.group-description p {
  width: 400px;
  color: #fff;
}

.group-description ul {
  padding: 10px 0 0 20px;
  color: #fff;
}

.group-description ul,
.group-description li {
  list-style-type: square !important;
}

.group-content {
  padding: 20px 60px;
  background: #D3C7A8;
  border-radius: 5px;
  box-shadow: 0 0 0 3px #000;
  border: 1px #fff solid;
}

.group-title {
  font-size: 16px;
  line-height: 1.5em;
  padding-bottom: 10px;
  display: block;
}

.group-label {
  padding-bottom: 20px;
}

.group-list {
  overflow: hidden;
  padding: 30px 3px 3px 3px;
}

.group-unit {
  position: relative;
  border-radius: 5px;
  margin: 0 30px 30px 33px;
  padding: 10px 10px 10px 50px;
  box-shadow: 0 0 0 3px #000;
  background: #F3EBDA;
  float: left;
  width: 200px;
 height: 80px;
}

.group-title {
  font-weight: 700;
}

.group-unit:before {
  content: " ";
  position: absolute;
  display: block;
  width: 60px;
  height: 60px;
  top: -25px;
  left: -25px;
  border: 1px #fff solid;
  border-radius: 5px;
  box-shadow: 0 0 0 3px #000;
  background-color: #fff;
}

Aqui o que deve ser alterado é:

Código:
.group-description {
  position: relative;
  padding: 20px 60px;
  line-height: 1.5em;
  background: url(http://i39.servimg.com/u/f39/18/84/43/39/back10.jpg);
}

O background: url(http://i39.servimg.com/u/f39/18/84/43/39/back10.jpg); é a imagem do fundo da descrição. Fiz uma padrão, já que a do site possui direitos autorais. Para uma melhor, faça um pedido na área de criação gráfica.

E para cada grupo, deverá adicionar um desse:

Código:
.group-id:before {
  background: url(http://pile.randimg.net/0/99/24974/visual-kei.png);
}

.group-id:after {
  content: "Minha descrição especial.";
}

› Nos .group-id, altere o ID para o ID do grupo.
› O background: url(http://pile.randimg.net/0/99/24974/visual-kei.png); é a imagem do grupo, que fica no quadradinho.
› O content: "Minha descrição especial."; é a descrição do grupo, que fica abaixo do nome.

Logo, supomos que configuremos o grupo de ID 4, o CSS ficaria assim:

Código:
.group-4:before {
  background: url(http://pile.randimg.net/0/99/24974/visual-kei.png);
}

.group-4:after {
  content: "Descrição do grupo de ID 4.";
}

Assim você adiciona uma imagem e descrição para cada grupo do seu fórum:

Código:
.group-4:before {
  background: url(http://pile.randimg.net/0/99/24974/visual-kei.png);
}

.group-4:after {
  content: "Descrição do grupo de ID 4.";
}

.group-5:before {
  background: url(http://pile.randimg.net/0/99/24974/visual-kei.png);
}

.group-5:after {
  content: "Descrição do grupo de ID 5.";
}

.group-6:before {
  background: url(http://pile.randimg.net/0/99/24974/visual-kei.png);
}

.group-6:after {
  content: "Descrição do grupo de ID 6.";
}

O resultado é mais ou menos esse: http://ajuda-punbb.forumeiros.com/groups

Qualquer alteração é só falar.

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 07/06/14, 02:07 pm

Teria como arredondar a parte que escreve "Oque é grupo?"
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com
  • 0

Resolvido Re: Nova página Grupos

Mensagem por Lima 3005 em 07/06/14, 02:11 pm

poderia dizer o link da página html?




Última edição por lima21 em 07/06/14, 02:14 pm, editado 2 vez(es)
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 07/06/14, 02:13 pm

lima não é pagina html recomendo eu esperar o Kyo, pois ele ja sabe das coisas e doque se trata.
Mas mesmo assim obrigado por tentar ajudar
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com
  • 0

Resolvido Re: Nova página Grupos

Mensagem por Lima 3005 em 07/06/14, 02:14 pm

Penso que seja isto

Modifique isto

Código:
.group-description {
  position: relative;
  padding: 20px 60px;
  line-height: 1.5em;
  background: url(http://i39.servimg.com/u/f39/18/84/43/39/back10.jpg);
}

por isto:

Código:
.group-description {
background: url(http://i39.servimg.com/u/f39/18/84/43/39/back10.jpg);
line-height: 1.5em;
padding: 20px 60px;
position: relative;
border-radius: 10px;
}
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Nova página Grupos

Mensagem por TappedOut em 07/06/14, 02:18 pm

Isto mesmo, Grato á todos.
#Resolvido
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum