ArtigosNova página Grupos
5 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Nova página Grupos
por TappedOut 20.05.14 16:23
- 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ódigo | Tags: | página,Grupos |
Última edição por PerdaTotal em 07.06.14 18:21, editado 1 vez(es)
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Alex Habilidade- Hiper Membro
- Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774 -
Re: Nova página Grupos
por TappedOut 21.05.14 0:03
Não é exatamente um forum é um site e eu editei pelo F12 os textos.
http://www.battlefieldheroes.com/br/groups
http://www.battlefieldheroes.com/br/groups
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Re: Nova página Grupos
por Roevs 21.05.14 0:08
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é
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é
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Re: Nova página Grupos
por Kyo Panda 26.05.14 20:17
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?
P.S: O layout dos indivíduos também é protegido por direitos autorais, logo teremos que fazer diferente.
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?
P.S: O layout dos indivíduos também é protegido por direitos autorais, logo teremos que fazer diferente.
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Re: Nova página Grupos
por Kyo Panda 27.05.14 2:14
Poderia passar o seu template Grupos › groupcp_user_body?
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Nova página Grupos
por TappedOut 27.05.14 3:34
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} » <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} <input type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
</dl>
</fieldset>
</div>
</form>
<!-- END switch_groups_remaining -->
</div>
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Re: Nova página Grupos
por Kyo Panda 07.06.14 14:59
Yo, coff, coff *pó*
Desculpe a demora, mas esta alteração foi radical.
Vamos lá, direi o que deve alterar para cada ponto. Troque o template por esse:
No template, o que deve ser alterado é essa parte:
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:
Aqui o que deve ser alterado é:
O background: url(https://i.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:
› 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:
Assim você adiciona uma imagem e descrição para cada grupo do seu fórum:
O resultado é mais ou menos esse: http://ajuda-punbb.forumeiros.com/groups
Qualquer alteração é só falar.
Abraços.
Desculpe a demora, mas esta alteração foi radical.
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} » <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(https://i.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.
Kyo Panda- Hiper Membro
- Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939 -
Re: Nova página Grupos
por TappedOut 07.06.14 18:07
Teria como arredondar a parte que escreve "Oque é grupo?"
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Re: Nova página Grupos
por Lima 3005 07.06.14 18:11
poderia dizer o link da página html?
Última edição por lima21 em 07.06.14 18:14, editado 2 vez(es)
Lima 3005- Membro
- Membro desde : 08/02/2013
Mensagens : 631
Pontos : 885 -
Re: Nova página Grupos
por TappedOut 07.06.14 18:13
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
Mas mesmo assim obrigado por tentar ajudar
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Re: Nova página Grupos
por Lima 3005 07.06.14 18:14
Penso que seja isto
Modifique isto
por 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;
}
Lima 3005- Membro
- Membro desde : 08/02/2013
Mensagens : 631
Pontos : 885 -
TappedOut- Membro
- Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756 -
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos