Alterar a aparência do grupo

4 participantes

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

Tópico resolvido Alterar a aparência do grupo

Mensagem por LucianoMicle 19.03.22 18:35

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
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por pedxz 21.03.22 11:55

Olá @LucianoMicle,

O melhor que consigo fazer usando CSS é o seguinte

Alterar - Alterar a aparência do grupo Image29

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.
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7068
Pontos ativos : 8297

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 21.03.22 14:58

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

Spoiler:
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por pedxz 27.03.22 18:04

@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

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7068
Pontos ativos : 8297

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 27.03.22 18:27

@Pedxz,
Spoiler:
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por pedxz 30.03.22 12:04

@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}
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7068
Pontos ativos : 8297

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 30.03.22 16:34

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.
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 04.04.22 0:39

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! Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 04.04.22 1:35

@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:
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 04.04.22 2:27

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! Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 04.04.22 2:45

@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:
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 04.04.22 3:04

Boa noite @LucianoMicle!

Algo semelhante igual está imagem abaixo?!
Alterar - Alterar a aparência do grupo 50APxgg

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

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 04.04.22 3:08

@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)
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 04.04.22 4:01

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! Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 04.04.22 4:09

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

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 04.04.22 4:25

Boa madrugada @LucianoMicle!

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

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! Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 04.04.22 4:34

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

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 04.04.22 4:48

@LucianoMicle, entendi sua questão colega! Muito feliz

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! Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 04.04.22 4:52

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
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 22.04.22 14:46

Bom dia @LucianoMicle!

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

Alterar - Alterar a aparência do grupo E6YSbYp

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

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

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 22.04.22 21:01

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

Saudações.
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 22.04.22 22:05

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! Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 22.04.22 22:28

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
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Musashi 22.04.22 23:34

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)! Muito feliz

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

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por LucianoMicle 23.04.22 0:48

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

Alterar - Alterar a aparência do grupo Vergru10


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
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos ativos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar a aparência do grupo

Mensagem por Mpezin 27.04.22 21:28

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
Mpezin

Mpezin
Nível 9

Masculino
Membro desde : 28/05/2020
Mensagens : 183
Pontos ativos : 172

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos