Ícone antes do membro do grupo

Item: Ícone antes do membro do grupo
Rating: 1

por gpassos em 06.01.20 20:20

Detalhes da questão

Endereço do fórum: http://policiacms.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá, gostaria de saber como posso deixar meu fórum com isso nos nomes/grupos, mas eu queria mudando pra várias cores, exemplos:

https://prnt.sc/qk44qv

https://prnt.sc/qk4wj6

https://prnt.sc/qk4wtp

por **Pedxz** em 06.01.20 20:32

Olá @gpassos,

Vá aos templates e edite o overall_header localize a variável {CSS} e em baixo adicione:

Código:: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

O código adicionado é relativo ao tutorial instalação do FontAwesome no fórum e serve para adicionar os ícones ao fórum. Após isso o Senhor deverá ceder acesso ao seu fórum aos convidados ou passar uma conta teste para que possa lhe ajudar com a adição do ícone ao grupo!

Aguardo uma resposta sua,
pedxz.

por gpassos em 06.01.20 22:07

Olá, eu crie uma conta no Font Awesome, mas estou um pouco perdido, pode me ajudar no que tenho que fazer agora?

Aqui está a conta:

Login: ConvidadoForumeiros
Senha: convidado123

por gpassos em 08.01.20 21:25

upppp

por **Pedxz** em 09.01.20 17:16

@gpassos escreveu:Olá, eu crie uma conta no Font Awesome

Não existe necessidade para a criação de uma conta no Font Awesome, basta fazer as etapas que eu apresentei.
Após fazer isso o Senhor deve adicionar na sua folha de estilo o seguinte código:

Código:: a[style="color: #00B0F0"].gensmall[href^="/g"]::before, a[href^="/u"] span[style="color:#00B0F0"]::before { content: '\f21b'; font-family: 'fontawesome'; padding-right: 3px; }

Como funciona?
O código em cima vai adicionar o ícone a qualquer membro do grupo cujo a cor é #00B0F0 para adicionar para outro grupo basta duplicar o código e alterar o #00B0F0 para a cor do grupo pretendido. O Senhor pode encontrar a listagem de ícones em https://fontawesome.com/v4.7.0/icons/ e basta copiar o código em frente de 'Unicode:" por exemplo: https://fontawesome.com/v4.7.0/icon/address-book o seu código é f2b9 e alterar content: '\f21b'; para content: '\f2b9';

Não sei se ajudou, diga se tiver dúvidas Rindo

por gpassos em 09.01.20 20:23

Olá, fiz o que disse mas ficou dessa forma:

https://prnt.sc/qli3l2

por **Pedxz** em 09.01.20 20:49

O Senhor deve realizar este tutorial:

@Pedxz escreveu:Vá aos templates e edite o overall_header localize a variável {CSS} e em baixo adicione:
Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

por gpassos em 09.01.20 23:46

De CSS só achei isso aí e coloquei

https://prnt.sc/qlkb1b

por -Xerox- em 10.01.20 2:42

Olá!

Procure por: "{CSS}" e adicione o código que meu companheiro passou:

@Pedxz escreveu:Olá @gpassos,

Vá aos templates e edite o overall_header localize a variável {CSS} e em baixo adicione:
Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
O código adicionado é relativo ao tutorial instalação do FontAwesome no fórum e serve para adicionar os ícones ao fórum. Após isso o Senhor deverá ceder acesso ao seu fórum aos convidados ou passar uma conta teste para que possa lhe ajudar com a adição do ícone ao grupo!

Aguardo uma resposta sua,
pedxz.

Aguardo respostas! Tchau

por **Pedxz** em 10.01.20 7:50

@gpassos escreveu:De CSS só achei isso aí e coloquei

https://prnt.sc/qlkb1b

Basta publicar o template clicando em ( Certo

)

por gpassos em 10.01.20 13:59

@-Xerox- escreveu:Olá!

Procure por: "{CSS}" e adicione o código que meu companheiro passou:

@Pedxz escreveu:Olá @gpassos,

Vá aos templates e edite o overall_header localize a variável {CSS} e em baixo adicione:
Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
O código adicionado é relativo ao tutorial instalação do FontAwesome no fórum e serve para adicionar os ícones ao fórum. Após isso o Senhor deverá ceder acesso ao seu fórum aos convidados ou passar uma conta teste para que possa lhe ajudar com a adição do ícone ao grupo!

Aguardo uma resposta sua,
pedxz.

Aguardo respostas!

https://prnt.sc/qlubjq não aparece

por gpassos em 10.01.20 14:05

@Pedxz escreveu:
@gpassos escreveu:De CSS só achei isso aí e coloquei

https://prnt.sc/qlkb1b
Basta publicar o template clicando em ( )

Fiz isso mas continua a mesma coisa :/

https://prnt.sc/qlug0c

https://prnt.sc/qlufr0

por **Roger123** em 10.01.20 14:12

Olá,

Atenção!

Você não pode postar mensagens consecutivas ou UP's antes de se completarem 24 horas desde a sua última mensagem em um tópico.

Por este motivo, pedimos que leia as regras do Setor de Suporte e as regras do Fórum dos Fóruns para não cometer novos erros.

Passe o template neste tópico, se faz favor.
Cordialmente.

por gpassos em 10.01.20 20:31

Código:: <!DOCTYPE HTML> <html lang="{L_LANG_HTML}"> <head> <meta charset="{S_CONTENT_ENCODING}" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <title>{SITENAME_TITLE}{PAGE_TITLE}</title> {T_HEAD_STYLESHEET} <meta name="theme-color" content="{GG_THEME_COLOR}" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { Ticker.start({ height : {switch_ticker.HEIGHT}, spacing : {switch_ticker.SPACING}, speed : {switch_ticker.SPEED}, direction : '{switch_ticker.DIRECTION}', pause : {switch_ticker.STOP_TIME} }); }); //]]> </script>  {RICH_SNIPPET_GOOGLE} {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <style> #logo-text { max-width: calc(100% - 150px); } .forum-description img { max-width: calc(100% - 15px); } </style> </head> <body id="top"> <header> <div id="main-menu-btn"> <i class="material-icons">menu</i> </div> <a id="logo-link" href="{U_INDEX}"> <div id="logo">  <img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" />  </div>  <span id="logo-text">{switch_h1.MAIN_SITENAME}</span>  </a>  <a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>   <a href="javascript:void(0)" id="header-user"></a> <a href="javascript:void(0)" id="header-notif"><i class="material-icons">notifications</i></a>  <form method="get" action="{ACTION_SEARCH}" id="search-main"> <input type="text" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}" /> <button type="submit"><i class="material-icons">search</i></button> </form> <ul id="header-navigation"> <li><a id="navigation-home" href="{NAVIGATION_HOME}"><i class="material-icons">apps</i>{L_FORUM}</a></li> <li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li> </ul> </header> <div id="main-menu" class="hidden"> <div class="main-menu-headline">{SITENAME}</div> </div> <div id="main-user-menu" class="hidden"> </div> <div id="notif-menu" class="hidden"> <div class="main-menu-headline" data-text="_lang['Notifications']"></div> <ul id="notif_list"> <li id="notif-view-all"><a href="/profile?mode=editprofile&page_profil=notifications" data-text="_lang['Notif_see_all']"></a></li> </ul> <div id="live_notif"> </div> </div> <div id="header-banner"> <div class="wrap">  <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>  </div> </div> <div id="site_widgets" style="display: none">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="wrap">  <div id="fa_ticker_block"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>   </div> </body> </html>

por **Pedxz** em 10.01.20 20:40

Altere o template para:

Código:: <!DOCTYPE HTML> <html lang="{L_LANG_HTML}"> <head> <meta charset="{S_CONTENT_ENCODING}" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <title>{SITENAME_TITLE}{PAGE_TITLE}</title> {T_HEAD_STYLESHEET} <meta name="theme-color" content="{GG_THEME_COLOR}" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { Ticker.start({ height : {switch_ticker.HEIGHT}, spacing : {switch_ticker.SPACING}, speed : {switch_ticker.SPEED}, direction : '{switch_ticker.DIRECTION}', pause : {switch_ticker.STOP_TIME} }); }); //]]> </script>  {RICH_SNIPPET_GOOGLE} {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <style> #logo-text { max-width: calc(100% - 150px); } .forum-description img { max-width: calc(100% - 15px); } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body id="top"> <header> <div id="main-menu-btn"> <i class="material-icons">menu</i> </div> <a id="logo-link" href="{U_INDEX}"> <div id="logo">  <img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" />  </div>  <span id="logo-text">{switch_h1.MAIN_SITENAME}</span>  </a>  <a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>   <a href="javascript:void(0)" id="header-user"></a> <a href="javascript:void(0)" id="header-notif"><i class="material-icons">notifications</i></a>  <form method="get" action="{ACTION_SEARCH}" id="search-main"> <input type="text" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}" /> <button type="submit"><i class="material-icons">search</i></button> </form> <ul id="header-navigation"> <li><a id="navigation-home" href="{NAVIGATION_HOME}"><i class="material-icons">apps</i>{L_FORUM}</a></li> <li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li> </ul> </header> <div id="main-menu" class="hidden"> <div class="main-menu-headline">{SITENAME}</div> </div> <div id="main-user-menu" class="hidden"> </div> <div id="notif-menu" class="hidden"> <div class="main-menu-headline" data-text="_lang['Notifications']"></div> <ul id="notif_list"> <li id="notif-view-all"><a href="/profile?mode=editprofile&page_profil=notifications" data-text="_lang['Notif_see_all']"></a></li> </ul> <div id="live_notif"> </div> </div> <div id="header-banner"> <div class="wrap">  <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>  </div> </div> <div id="site_widgets" style="display: none">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="wrap">  <div id="fa_ticker_block"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>   </div> </body> </html>

por gpassos em 12.01.20 0:35

Como faço para deixar trocando de cor?

Está desse jeito:

https://prnt.sc/qmg84a

por **Pedxz** em 12.01.20 11:39

Basta adicionar color: cor_desejada; ao código, por exemplo:

Código:: a[style="color: #00B0F0"].gensmall[href^="/g"]::before, a[href^="/u"] span[style="color:#00B0F0"]::before { content: '\f21b'; font-family: 'fontawesome'; padding-right: 3px; color: black; }

por gpassos em 12.01.20 14:02

Não deu resultados :/

https://prnt.sc/qmlvpe

https://prnt.sc/qmlvw7

por **Pedxz** em 13.01.20 18:40

Pela sua folha de estilo, reparei alguns erros; Poderia passar a mesma?

por gpassos em 14.01.20 11:38

Aqui está:

Código:: a[style="color: #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff"].gensmall[href^="/g"]::before, a[href^="/u"] span[style="color:#FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff"]::before { content: '\f21b'; font-family: 'fontawesome'; padding-right: 3px; color: black; }

por zKayke em 14.01.20 14:45

Olá, não é possivel botar varios cores para por o icone antes do grupo.
Somente a cor do grupo desejado!

Vejo que o que realmente que você queria é um efeito "rainbow" crie outro tópico que irão le ajudar.

por gpassos em 14.01.20 18:59

@zKayke escreveu:Olá, não é possivel botar varios cores para por o icone antes do grupo.
Somente a cor do grupo desejado!

Vejo que o que realmente que você queria é um efeito "rainbow" crie outro tópico que irão le ajudar.

Sabe de algum tópico já resolvido para que eu possa olhar?

por gpassos em 15.01.20 20:34

upppppp

por **Pedxz** em 16.01.20 9:24

@gpassos escreveu:
@zKayke escreveu:Olá, não é possivel botar varios cores para por o icone antes do grupo.
Somente a cor do grupo desejado!

Vejo que o que realmente que você queria é um efeito "rainbow" crie outro tópico que irão le ajudar.

Sabe de algum tópico já resolvido para que eu possa olhar?

Então, o Senhor terá que abrir outro tópico, visto que o tema principal neste tópico é a adição de um ícone a frente do nome de usuário e o regulamento de suporte só permite uma questão por tópico!

por gpassos em 16.01.20 13:24

@Pedxz escreveu:
@gpassos escreveu:
@zKayke escreveu:Olá, não é possivel botar varios cores para por o icone antes do grupo.
Somente a cor do grupo desejado!

Vejo que o que realmente que você queria é um efeito "rainbow" crie outro tópico que irão le ajudar.

Sabe de algum tópico já resolvido para que eu possa olhar?
Então, o Senhor terá que abrir outro tópico, visto que o tema principal neste tópico é a adição de um ícone a frente do nome de usuário e o regulamento de suporte só permite uma questão por tópico!

Eu tinha colocado com dúvida isso também, mas pode fechar, por favor, obrigado!

por **Pedxz** em 16.01.20 15:14

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.

Ícone antes do membro do grupo