Alterar a aparência do grupo

Detalhes da questão

Endereço do fórum: https://divtes.foroactivo.com/groups
Versão do fórum: AwesomeBB

Descrição

Olá a todos, eu estava vendo que existem alguns designs de grupo para adicionar ao fórum.
E eu estava olhando como mudar isso:

Spoiler:

Para isso: (é um design simples, neste caso é um administrador, mas deixe-os assim, mas com os outros grupos e seus ícones)

Spoiler:

---

Aguardo resposta, abraço

Olá @LucianoMicle,

O melhor que consigo fazer usando CSS é o seguinte


Sendo que deve adicionar a folha de estilo (CSS) o seguinte código

Código:

 .group_list.noList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    gap: .25rem;
}
 .group_list.noList li {
    background-color: rgba(226, 226, 226, 0.2);
    border-radius: 3px;
    padding: 1rem;
    flex: auto;
    width: 20%;
    margin: 0;
}
 .group_list.noList a {
    font-size: 14px;
    font-weight: 700;
}
 .group_list.noList a::before {
    content: none;
    background-color: currentColor;
    border-radius: 3px;
    height: 30px;
    width: 30px;
    display: inline-flex;
    vertical-align: baseline;
    margin-right: .25rem;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
}
 .group_list.noList a[href^="/g3-"]::before {
    content: '';
    background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons852.png);
}

Para alterar o ícone basta alterar a url https://i.servimg.com/u/f55/20/40/44/52/icons852.png para adicionar para mais grupos basta duplicar

Código:

 .group_list.noList a[href^="/g3-"]::before {
    content: '';
    background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons852.png);
}

e alterar 3 para o ID do grupo.
Caso não seja o suficiente passe-nos o groupcp_user_body (Template em Grupos).


Atenciosamente,
pedxz.

Olá @Pedxz
Aqui está o modelo apenas no caso. E vamos ver quais modificações fazemos.
Saudações

Spoiler:

@LucianoMicle: Talvez não tenha compreendido a questão. Deseja personalizar a página dos grupos /groups ou a página de um grupo /g(ID)-? O template acima não corresponde ao "groupcp_user_body".

@Pedxz,

Spoiler:

@LucianoMicle: Retire o CSS em cima na folha de estilo e altere para

Código:

[data-group-list-name="Administrador"] > div > span {
  background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons852.png);
}

[data-group-list-name="Creativos"] > div > span {
  background-image: url(https://i.servimg.com/u/f13/19/81/07/80/icons146.png);
}

[data-group-list-name="Moderador"] > div > span {
  background-image: url(https://i.servimg.com/u/f13/19/81/07/80/icons141.png);
}

[data-group-list-name="Programador"] > div > span {
  background-image: url(https://i.servimg.com/u/f13/19/81/07/80/icons140.png);
}

[data-group-list-name="Soporte Técnico"] > div > span {
  background-image: url(https://i.servimg.com/u/f13/19/81/07/80/icons139.png);
}

[data-group-list-name="Usuarios"] > div > span {
  background-image: url(https://i.servimg.com/u/f13/19/81/07/80/icons143.png);
}

e o template para

Código:

<div class="page-header">
    <h1>{L_USERGROUPS}</h1>
</div>

<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<div class="block">
    <div class="block-header">{L_GROUP_MEMBERSHIP_DETAILS}</div>
    <div class="block-content">
        <dl>
            <dt><h4>{L_YOU_BELONG_GROUPS}</h4><br/></dt>
            <dd>{GROUP_MEMBER_SELECT_NEW}</dd>
        </dl>
    </div>
</div>
<!-- END switch_groups_member -->

<!-- BEGIN switch_groups_pending -->
<div class="block">
    <div class="block-content">
        <dl>
            <dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
            <dd>{GROUP_PENDING_SELECT_NEW}</dd>
        </dl>
    </div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->

<!-- BEGIN switch_groups_remaining -->
<div class="block">
    <div class="block-header">{L_JOIN_A_GROUP}</div>
    <div class="block-content">
        <form action="{U_USERGROUP_ACTION}" method="get">
            <fieldset>
                <dl>
                    <dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
                    <dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
                </dl>
            </fieldset>
        </form>
    </div>
</div>
<!-- END switch_groups_remaining -->

<!-- BEGIN switch_display_groups_all -->
<div class="block">
    <div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
    <div class="block-content">
        <dl>
            <dt><h4>{switch_display_groups_all.L_LIST_ALL_GROUPS}</h4><br/></dt>
            <dd>
                <ul class="group_list noList" style="list-style: none;padding: 0;margin: 0;display: flex;justify-content: space-between;flex-flow: row wrap;gap: .25rem;">
                    <!-- BEGIN group_details -->
                  <li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
                    <div style="display: flex;justify-content: flex-start;align-items: center;">
                      <span style="background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons852.png);display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
                    <h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
                    </div>
                    <p style="padding-top: 1rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
                    <div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver todo</a></div>
                  </li>
                    <!-- END group_details -->
                </ul>
            </dd>
        </dl>
    </div>
</div>
<style>
  .noList h2 {
  display: inline-flex;
  background-color: currentColor;
  border-radius: .2rem;
  padding: .25rem .5rem;
  height: 40px;
  align-items: center;
  }
</style>
<script>
         
    (function($) {
        'use strict';

        $(function() {


                $('.group_list li')
                    .filter(function() {
                        return $(this).find('h2').css('color').length;
                    })
                    .each(function() {
                        $(this)
                            .find('h2')
                            .css({'color': '#fff', 'background-color': $(this).find('h2').css('color')})
                            .end()
                            .css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))

                        ;
                    });


        });

    })(jQuery);
</script>
<!-- END switch_display_groups_all -->

{JUMPBOX}


Olá @Pedxz
O botão que diz "Ver mais" Você pode adicionar outro abaixo que diz para entrar no grupo X.
E isso leva a uma mensagem privada para o administrador.

Boa noite @LucianoMicle

Altere seu groupcp_user_body para:

Código:

<div class="page-header">
    <h1>{L_USERGROUPS}</h1>
</div>
 
<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<div class="block">
    <div class="block-header">{L_GROUP_MEMBERSHIP_DETAILS}</div>
    <div class="block-content">
        <dl>
            <dt><h4>{L_YOU_BELONG_GROUPS}</h4><br/></dt>
            <dd>{GROUP_MEMBER_SELECT_NEW}</dd>
        </dl>
    </div>
</div>
<!-- END switch_groups_member -->
 
<!-- BEGIN switch_groups_pending -->
<div class="block">
    <div class="block-content">
        <dl>
            <dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
            <dd>{GROUP_PENDING_SELECT_NEW}</dd>
        </dl>
    </div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->
 
<!-- BEGIN switch_groups_remaining -->
<div class="block">
    <div class="block-header">{L_JOIN_A_GROUP}</div>
    <div class="block-content">
        <form action="{U_USERGROUP_ACTION}" method="get">
            <fieldset>
                <dl>
                    <dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
                    <dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
                </dl>
            </fieldset>
        </form>
    </div>
</div>
<!-- END switch_groups_remaining -->
 
<!-- BEGIN switch_display_groups_all -->
<div class="block">
    <div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
    <div class="block-content">
        <dl>
            <dt><h4>{switch_display_groups_all.L_LIST_ALL_GROUPS}</h4><br/></dt>
            <dd>
                <ul class="group_list noList" style="list-style: none;padding: 0;margin: 0;display: flex;justify-content: space-between;flex-flow: row wrap;gap: .25rem;">
                    <!-- BEGIN group_details -->
                  <li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
                    <div style="display: flex;justify-content: flex-start;align-items: center;">
                      <span style="background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons852.png);display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
                    <h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
                    </div>
                    <p style="padding-top: 1rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
                    <div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver todo</a></div>
                    <div style="text-align: center;margin-top;"><a href="" class="btn btn-flag" style="width: 100;" onclick="enterGroup()">{L_JOIN_A_GROUP}</a></div>
                  </li>
                    <!-- END group_details -->
                </ul>
            </dd>
        </dl>
    </div>
</div>
<style>
  .noList h2 {
  display: inline-flex;
  background-color: currentColor;
  border-radius: .2rem;
  padding: .25rem .5rem;
  height: 40px;
  align-items: center;
  }
</style>
<script>
       
    (function($) {
        'use strict';
 
        $(function() {
 
                $('.group_list li')
                    .filter(function() {
                        return $(this).find('h2').css('color').length;
                    })
                    .each(function() {
                        $(this)
                            .find('h2')
                            .css({'color': '#fff', 'background-color': $(this).find('h2').css('color')})
                            .end()
                            .css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))
 
                        ;
                    });
 
 
        });
 
    })(jQuery);
</script>
<!-- END switch_display_groups_all -->
 
{JUMPBOX}


Abraços,
do seu amigo da comunidade, Musashi!

@Musashi,
Primeiro a parte onde diz "A que grupo pertenço" Essa parte temos que remover.
E outro, o botão "participar do grupo" não alcança nenhuma rota... (também não tem o mesmo design do botão acima que diz "Ver todos")

Spoiler:

Olá @LucianoMicle!

Certo, então modifique seu código para:

Código:

<!-- BEGIN switch_display_groups_all -->
<div class="block">
    <div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
    <div class="block-content">
        <dl>
            <dt><h4>{switch_display_groups_all.L_LIST_ALL_GROUPS}</h4><br/></dt>
            <dd>
                <ul class="group_list noList" style="list-style: none;padding: 0;margin: 0;display: flex;justify-content: space-between;flex-flow: row wrap;gap: .25rem;">
                    <!-- BEGIN group_details -->
                  <li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
                    <div style="display: flex;justify-content: flex-start;align-items: center;">
                      <span style="background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons852.png);display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
                    <h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
                    </div>
                    <p style="padding-top: 1rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
                    <div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver todo</a></div>
                    <div style="text-align: center;"><a href="https://divtes.foroactivo.com/privmsg?mode=post&u=1" class="btn btn-flag" style="width: 100%;" onclick="enterGroup()">{L_JOIN_A_GROUP}</a></div>
                  </li>
                    <!-- END group_details -->
                </ul>
            </dd>
        </dl>
    </div>
</div>
<style>
  .noList h2 {
  display: inline-flex;
  background-color: currentColor;
  border-radius: .2rem;
  padding: .25rem .5rem;
  height: 40px;
  align-items: center;
  }
</style>
<script>
     
    (function($) {
        'use strict';
 
        $(function() {
 
                $('.group_list li')
                    .filter(function() {
                        return $(this).find('h2').css('color').length;
                    })
                    .each(function() {
                        $(this)
                            .find('h2')
                            .css({'color': '#fff', 'background-color': $(this).find('h2').css('color')})
                            .end()
                            .css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))
 
                        ;
                    });
 
 
        });
 
    })(jQuery);
</script>
<!-- END switch_display_groups_all -->
 
{JUMPBOX}


Abraços,
do seu amigo da comunidade, Musashi!

@Musashi,
Consegui corrigir depois de enviar o tópico... Mas te pergunto, como adicionar uma capa ao mesmo grupo e editá-la com o css.
Por exemplo, agora está assim.

Spoiler:

Código:

Boa noite @LucianoMicle!

Algo semelhante igual está imagem abaixo?!


(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi!

@Musashi - Sim, eu realmente gosto dessa imagem, mas pode ocupar tudo em cima? Com o raio da borda.
Que está bem coberto dentro da caixa (não fora)

Boa noite @LucianoMicle!

Certo então, adicione em sua folha de estilo (CSS) o seguinte código:

Código:

#groups-background {
    background-image: url(URL DE FUNDO)!important;
    background-size: 103%!important;
}


Caso você queira alterar para cada um dos grupos, um novo fundo personalizado, basta adicionar o seguinte código neste formato: #groups-background:nth-child(2), o número representa qual dos elementos dentro do id groups-background deverá sofrer alteração, ou seja, o segundo elemento dentro do grupo.

E sobre sua questão em relação ao template, modifique seu template para este seguinte:

Código:

<div class="page-header">
<h1>{L_USERGROUPS}</h1>
</div>

<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<!-- END switch_groups_member -->

<!-- BEGIN switch_groups_pending -->
<div class="block">
<div class="block-content">
<dl>
<dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
<dd>{GROUP_PENDING_SELECT_NEW}</dd>
</dl>
</div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->

<!-- BEGIN switch_groups_remaining -->
<div class="block">
<div class="block-header">{L_JOIN_A_GROUP}</div>
<div class="block-content">
<form action="{U_USERGROUP_ACTION}" method="get">
<fieldset>
<dl>
<dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
<dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
</dl>
</fieldset>
</form>
</div>
</div>
<!-- END switch_groups_remaining -->

<!-- BEGIN switch_display_groups_all -->
<div class="block">
<div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
<div class="block-content">
<dl>
<dt><h4>{switch_display_groups_all.L_LIST_ALL_GROUPS}</h4><br/></dt>
<dd>
<ul class="group_list noList" style="list-style: none;padding: 2px;margin: 1px;display: flex;justify-content: space-between;flex-flow: wrap;gap: 5rem;">
<!-- BEGIN group_details -->
<li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
<div style="background-image: url();background-repeat: no-repeat;background-size: cover;"></div>
<div style="margin: -18px;margin-left: -22px;padding: 2px;background: white;" id="groups-background">
<span style="display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
<h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
</div>
</div>
<p style="padding-top: 3rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
<div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver todo</a></div>
<div style="text-align: center;margin-top;"><a href="" class="btn btn-flat" style="width: 100;" onclick="enterGroup()">{L_JOIN_A_GROUP}</a></div>
</li>
<!-- END group_details -->
</ul>
</dd>
</dl>
</div>
</div>
<style>
.noList h2 {
display: inline-flex;
background-color: currentColor;
border-radius: 0.2rem;
padding: 2px 10px;
height: 30px;
align-items: center;
font-size: 15px;
}


</style>
<script>

(function($) {
'use strict';

$(function() {

$('.group_list li')
.filter(function() {
return $(this).find('h2').css('color').length;
})
.each(function() {
$(this)
.find('h2')
.css({'color': '#fff','position': 'relative','top': '70px', 'background-color': $(this).find('h2').css('color')})
.end()
.css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))

;
});


});

})(jQuery);
</script>
<!-- END switch_display_groups_all -->

{JUMPBOX}


(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi!

- @Musashi -
Não funcionou... vou esperar uma resposta

Boa madrugada @LucianoMicle!

Minhas sinceras desculpas pelo código anterior, acabei que apagando algumas linhas sem querer e não reparei nos erros antes

Enfim, mantenha o código da folha de estilo (CSS) que passei anteriormente para você, apenas modifique o código do template para este seguinte abaixo:

Código:

<div class="page-header">
<h1>{L_USERGROUPS}</h1>
</div>

<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<!-- END switch_groups_member -->

<!-- BEGIN switch_groups_pending -->
<div class="block">
<div class="block-content">
<dl>
<dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
<dd>{GROUP_PENDING_SELECT_NEW}</dd>
</dl>
</div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->

<!-- BEGIN switch_groups_remaining -->
<div class="block">
<div class="block-header">{L_JOIN_A_GROUP}</div>
<div class="block-content">
<form action="{U_USERGROUP_ACTION}" method="get">
<fieldset>
<dl>
<dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
<dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
</dl>
</fieldset>
</form>
</div>
</div>
<!-- END switch_groups_remaining -->

<!-- BEGIN switch_display_groups_all -->
<div class="block">
<div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
<div class="block-content">
<dl>
<dt><h4>{switch_display_groups_all.L_LIST_ALL_GROUPS}</h4><br/></dt>
<dd>
<ul class="group_list noList" style="list-style: none;padding: 2px;margin: 1px;display: flex;justify-content: space-between;flex-flow: wrap;gap: 5rem;">
<!-- BEGIN group_details -->
<li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
<div style="display: flex;align-items: center;flex-direction: column-reverse;">
<div style="margin: -18px;margin-left: -22px;padding: 2px;background: white;" id="groups-background">
<span style="display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
<h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
</div>
</div>
<p style="padding-top: 3rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
<div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver todo</a></div>
<div style="text-align: center;"><a href="https://divtes.foroactivo.com/privmsg?mode=post&u=1" class="btn btn-flat" style="width: 100%;">{L_JOIN_A_GROUP}</a></div>
</li>
<!-- END group_details -->
</ul>
</dd>
</dl>
</div>
</div>
<style>
.noList h2 {
display: inline-flex;
background-color: currentColor;
border-radius: 0.2rem;
padding: 2px 10px;
height: 30px;
align-items: center;
font-size: 15px;
}


</style>
<script>

(function($) {
'use strict';

$(function() {

$('.group_list li')
.filter(function() {
return $(this).find('h2').css('color').length;
})
.each(function() {
$(this)
.find('h2')
.css({'color': '#fff','position': 'relative','top': '70px'; 'background-color': $(this).find('h2').css('color')})
.end()
.css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))

;
});


});

})(jQuery);
</script>
<!-- END switch_display_groups_all -->

{JUMPBOX}


(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi!

Boa noite @Musashi
Quero dizer que a seção de grupos se parece com isso, mas é como indicado acima.
Eu quero o css (ainda vou tentar consertar) mas quero que seja visto na mesma caixa de cada grupo mas que seja visto grande mas por dentro.
Respeitando o raio de fronteira, você me entende?

Spoiler:

Spoiler:

Embora capaz que o nome de cada grupo possa ser movido com o mesmo css.

Aguardo resposta, obrigado!

Edit: Também não consigo resolver o problema dos nomes de cada grupo. Eu adiciono o css da cor, mas ele corrige.

Edito 2: Ejemplo

Spoiler:

@LucianoMicle, entendi sua questão colega!

Cá está os códigos que precisamos modificar:

Pegue o código anterior da sua folha de estilo (CSS) que forneci para ti, em seguida, modifique para este abaixo:

Código:

#groups-background {
    background-image: url(https://i.servimg.com/u/f13/19/81/07/80/icons154.png)!important;
    background-size: 105%!important;
    padding: 4%!important;
    margin: -42px!important;
    width: 113%;
    border-radius: 5px;
}


Logo, após ter feito isto, modifique o template que tinha passado anteriormente para ti por este:

Código:

<div class="page-header">
<h1>{L_USERGROUPS}</h1>
</div>

<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<!-- END switch_groups_member -->

<!-- BEGIN switch_groups_pending -->
<div class="block">
<div class="block-content">
<dl>
<dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
<dd>{GROUP_PENDING_SELECT_NEW}</dd>
</dl>
</div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->

<!-- BEGIN switch_groups_remaining -->
<div class="block">
<div class="block-header">{L_JOIN_A_GROUP}</div>
<div class="block-content">
<form action="{U_USERGROUP_ACTION}" method="get">
<fieldset>
<dl>
<dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
<dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
</dl>
</fieldset>
</form>
</div>
</div>
<!-- END switch_groups_remaining -->

<!-- BEGIN switch_display_groups_all -->
<div class="block">
<div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
<div class="block-content">
<dl>
<dt><h4>{switch_display_groups_all.L_LIST_ALL_GROUPS}</h4><br/></dt>
<dd>
<ul class="group_list noList" style="list-style: none;padding: 2px;margin: 1px;display: flex;justify-content: space-between;flex-flow: wrap;gap: 5rem;">
<!-- BEGIN group_details -->
<li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
<div style="display: flex;align-items: center;flex-direction: column-reverse;">
<div style="background: white;" id="groups-background">
<span style="display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
<h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
</div>
</div>
<p style="padding-top: 3rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
<div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver todo</a></div>
<div style="text-align: center;"><a href="https://divtes.foroactivo.com/privmsg?mode=post&u=1" class="btn btn-flat" style="width: 100%;">{L_JOIN_A_GROUP}</a></div>
</li>
<!-- END group_details -->
</ul>
</dd>
</dl>
</div>
</div>
<style>
.noList h2 {
display: inline-flex;
background-color: currentColor;
border-radius: 0.2rem;
padding: 2px 10px;
height: 30px;
align-items: center;
font-size: 15px;
}


</style>
<script>

(function($) {
'use strict';

$(function() {

$('.group_list li')
.filter(function() {
return $(this).find('h2').css('color').length;
})
.each(function() {
$(this)
.find('h2')
.css({'color': '#fff','position': 'relative','top': '70px', 'background-color': $(this).find('h2').css('color')})
.end()
.css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))

;
});


});

})(jQuery);
</script>
<!-- END switch_display_groups_all -->

{JUMPBOX}


(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi!

Boa noite @Musashi, lá em cima no "edit 2". Deixo-vos um exemplo mais ou menos como quero em cada grupo com a sua capa.
A isso é adicionado o nome do grupo e sua descrição.

Deixo-vos o código da última atualização que fiz:

Spoiler:

Abraços, aguardo resposta

Bom dia @LucianoMicle!

Acredito que este seja um modelo que foi o máximo que consegui fazer para ti:



Podemos dar continuidade em sua questão em caso de aprovação desse modelo supracitado acima.

(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi!

Olá @Musashi
Você pode centralizar o conteúdo de "Desenvolvedor" etc.

Saudações.

Boa tarde @LucianoMicle

Modifique seu template para o seguinte código:

Código:

<div class="page-header">
    <h1>{L_USERGROUPS}</h1>
</div>
 
<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<!-- END switch_groups_member -->
 
<!-- BEGIN switch_groups_pending -->
<div class="block">
    <div class="block-content">
        <dl>
            <dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
            <dd>{GROUP_PENDING_SELECT_NEW}</dd>
        </dl>
    </div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->
 
<!-- BEGIN switch_groups_remaining -->
<div class="block">
    <div class="block-header">{L_JOIN_A_GROUP}</div>
    <div class="block-content">
        <form action="{U_USERGROUP_ACTION}" method="get">
            <fieldset>
                <dl>
                    <dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
                    <dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
                </dl>
            </fieldset>
        </form>
    </div>
</div>
<!-- END switch_groups_remaining -->
 
<!-- BEGIN switch_display_groups_all -->
<div class="block">
    <div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
    <div class="block-content">
        <dl>
            <dd>
                <ul class="group_list noList" style="list-style: none;padding-bottom: 20px;margin-right:15px !important;display: flex;justify-content: center;flex-flow: wrap;gap: 5rem;">
                    <!-- BEGIN group_details -->
                  <li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
                    <div class="background-groups" style="width: 100%;height: 100%;overflow: hidden;position: absolute;background-repeat: no-repeat;background-size: 43% 10%;margin: -17px;"></div>
               <div style="display: flex;align-items: center;flex-direction: column-reverse;">
                      <span style="display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
                    <h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
                    </div>
                    <p style="padding-top: 1rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
                    <div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver Grupo</a></div>
                    <div style="text-align: center;margin-top;"><a href="https://divtes.foroactivo.com/privmsg?mode=post&u=1" class="btn btn-flat" style="width: 100%;" onclick="enterGroup()">{L_JOIN_A_GROUP}</a></div>
                  </li>
                    <!-- END group_details -->
                </ul>
            </dd>
        </dl>
    </div>
</div>
<style>
.noList h2 {
    display: inline-flex;
    background-color: currentColor;
    border-radius: 4px;
    padding: 0 30px;
    height: 25px;
    font-size: 15px;
    align-items: center;
    text-transform: uppercase;
    font-family: monospace;
    text-shadow: 0 0 8px #acacac;
   position: relative;
    top: 2rem;
   margin: auto;
}
</style>
<script>
   
    (function($) {
        'use strict';
 
        $(function() {
 
                $('.group_list li')
                    .filter(function() {
                        return $(this).find('h2').css('color').length;
                    })
                    .each(function() {
                        $(this)
                            .find('h2')
                            .css({'color': '#fff', 'background-color': $(this).find('h2').css('color')})
                            .end()
                            .css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))
 
                        ;
                    });
 
 
        });
 
    })(jQuery);
</script>
<!-- END switch_display_groups_all -->
 
{JUMPBOX}


E adicione em sua Folha de Estilo (CSS) o seguinte código:

Código:

.background-groups {
        background-image: url(https://i.servimg.com/u/f28/11/40/02/06/scre1839.png)!important;
}


O mesmo pode modificar sua imagem pela sua folha de estilo (CSS), em caso de tamanho não sendo encaixável dentro dos seus padrões, o mesmo pode modificar pelo style presente no template que contém a class background-groups:

Código:

<div class="background-groups" style="width: 100%;height: 100%;overflow: hidden;position: absolute;background-repeat: no-repeat;background-size: TAMANHO AO SEU GOSTO;margin: -17px;"></div>

(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi!

Olá @Musashi
Eu consulto você, na parte CSS, aquele código que você me passou. Aplica-se a todos? ou como configuro para que cada um tenha um diferente.

vou esperar saudações

Boa noite @LucianoMicle!

Isto mesmo, mas caso seja uma capa em específico para cada grupo, modifique seu template novamente para:

Código:

<div class="page-header">
    <h1>{L_USERGROUPS}</h1>
</div>
 
<!-- BEGIN switch_groups_joined -->
<!-- BEGIN switch_groups_member -->
<!-- END switch_groups_member -->
 
<!-- BEGIN switch_groups_pending -->
<div class="block">
    <div class="block-content">
        <dl>
            <dt><h4>{L_PENDING_GROUPS}</h4><br/></dt>
            <dd>{GROUP_PENDING_SELECT_NEW}</dd>
        </dl>
    </div>
</div>
<!-- END switch_groups_pending -->
<!-- END switch_groups_joined -->
 
<!-- BEGIN switch_groups_remaining -->
<div class="block">
    <div class="block-header">{L_JOIN_A_GROUP}</div>
    <div class="block-content">
        <form action="{U_USERGROUP_ACTION}" method="get">
            <fieldset>
                <dl>
                    <dt><h4>{L_SELECT_A_GROUP}</h4><br/></dt>
                    <dd>{GROUP_LIST_SELECT}&nbsp;<input class="btn btn-default" type="submit" value="{L_VIEW_INFORMATION}" />{S_HIDDEN_FIELDS}</dd>
                </dl>
            </fieldset>
        </form>
    </div>
</div>
<!-- END switch_groups_remaining -->
 
<!-- BEGIN switch_display_groups_all -->
<div class="block">
    <div class="block-header">{switch_display_groups_all.L_ALL_GROUPS}</div>
    <div class="block-content">
        <dl>
            <dd>
                <ul class="group_list noList" style="list-style: none;padding-bottom: 20px;margin-right:15px !important;display: flex;justify-content: center;flex-flow: wrap;gap: 5rem;">
                    <!-- BEGIN group_details -->
                  <li style="padding: 1rem;flex: auto;width: 20%;margin: 0;" data-group-list-name="{switch_display_groups_all.group_details.GROUP_NAME}">
                    <div id="background-groups" style="width: 100%;height: 100%;overflow: hidden;position: absolute;background-repeat: no-repeat;background-size: 43% 10%;margin: -17px;"></div>
              <div style="display: flex;align-items: center;flex-direction: column-reverse;">
                      <span style="display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 1.5rem;border-radius: .75rem;"></span>
                    <h2 {switch_display_groups_all.group_details.GROUP_STYLE}>{switch_display_groups_all.group_details.GROUP_NAME}</h2>
                    </div>
                    <p style="padding-top: 1rem;padding-bottom: 1rem;text-align: center;">{switch_display_groups_all.group_details.GROUP_STATUS} {switch_display_groups_all.group_details.NB_GROUP_MEMBERS}</p>
                    <div style="text-align: center;"><a href="{switch_display_groups_all.group_details.U_GROUP}" class="btn btn-flat" style="width: 100%;">Ver Grupo</a></div>
                    <div style="text-align: center;margin-top;"><a href="https://divtes.foroactivo.com/privmsg?mode=post&u=1" class="btn btn-flat" style="width: 100%;" onclick="enterGroup()">{L_JOIN_A_GROUP}</a></div>
                  </li>
                    <!-- END group_details -->
                </ul>
            </dd>
        </dl>
    </div>
</div>
<style>
.noList h2 {
    display: inline-flex;
    background-color: currentColor;
    border-radius: 4px;
    padding: 0 30px;
    height: 25px;
    font-size: 15px;
    align-items: center;
    text-transform: uppercase;
    font-family: monospace;
    text-shadow: 0 0 8px #acacac;
  position: relative;
    top: 2rem;
  margin: auto;
}
</style>
<script>
 
    (function($) {
        'use strict';
 
        $(function() {
 
                $('.group_list li')
                    .filter(function() {
                        return $(this).find('h2').css('color').length;
                    })
                    .each(function() {
                        $(this)
                            .find('h2')
                            .css({'color': '#fff', 'background-color': $(this).find('h2').css('color')})
                            .end()
                            .css('background-color', $(this).find('h2').css('color').replace(')', ', 0.07)'))
 
                        ;
                    });
 
 
        });
 
    })(jQuery);
</script>
<!-- END switch_display_groups_all -->
 
{JUMPBOX}


E pode modificar em sua folha de estilo (CSS) para este:

Código:

#background-groups:nth-child(1) {
        background-image: url(https://i.servimg.com/u/f28/11/40/02/06/scre1839.png)!important;
}


Lembrando que o mesmo pode modificar para qual grupo o mesmo deseja apenas modificando o número presente dentro do nth-child(1)!

Abaços,
do seu amigo da comunidade, Musashi!

Olá @musashi
Estou com esse problema com as imagens, é como se fossem redigitadas dentro de todas as imagens.
É um problema de código ou é porque tenho que terminar de adicionar o css de cada imagem que tem?

Vou esperar por uma resposta.

Spoiler:

Editar tópico: "Visualizar grupo" Os botões "Entrar em um grupo" não funcionam para mim

---

Editar tópico 2: Adicionando uma imagem como capa de cada grupo.
Aplica-se a todos.

Código:

  #background-groups:nth-child(1) {
        background-image: url(https://i.servimg.com/u/f55/20/40/44/52/icons869.png)!important;
}
  #background-groups:nth-child(2) {
        background-image: url(https://i.servimg.com/u/f28/11/40/02/06/scre1839.png)!important;
}
Exemplo de duas imagens diferentes, mas vale para todas com o número 1