Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Ícone antes do membro do grupo
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Ícone antes do membro do grupo
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
Re: Ícone antes do membro do grupo
Olá @gpassos,
Vá aos templates e edite o overall_header localize a variável {CSS} e em baixo adicione:
Aguardo uma resposta sua,
pedxz.
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" />
Aguardo uma resposta sua,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
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
Aqui está a conta:
Login: ConvidadoForumeiros
Senha: convidado123
Re: Ícone antes do membro do grupo
Não existe necessidade para a criação de uma conta no Font Awesome, basta fazer as etapas que eu apresentei.gpassos escreveu:Olá, eu crie uma conta no Font Awesome
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;
}
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
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
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" />
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
Olá!
Procure por: "{CSS}" e adicione o código que meu companheiro passou:
Aguardo respostas!
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: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!
- Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Aguardo uma resposta sua,
pedxz.
Aguardo respostas!
Re: Ícone antes do membro do grupo
Basta publicar o template clicando em ( )
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
-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: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!
- Código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Aguardo uma resposta sua,
pedxz.
Aguardo respostas!
https://prnt.sc/qlubjq não aparece
Re: Ícone antes do membro do grupo
Pedxz escreveu:Basta publicar o template clicando em ( )
Fiz isso mas continua a mesma coisa :/
https://prnt.sc/qlug0c
https://prnt.sc/qlufr0
Re: Ícone antes do membro do grupo
Olá,
Passe o template neste tópico, se faz favor.
Cordialmente.
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. |
Cordialmente.
Convidado- Convidado
Re: Ícone antes do membro do grupo
- 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}" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_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>
<!-- BEGIN switch_recent_jquery -->
<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>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<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>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker -->
<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>
<!-- END switch_ticker -->
{RICH_SNIPPET_GOOGLE}
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(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>
<!-- END google_analytics_code -->
<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">
<!-- BEGIN switch_logo_mob -->
<img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" />
<!-- END switch_logo_mob -->
</div>
<!-- BEGIN switch_h1 -->
<span id="logo-text">{switch_h1.MAIN_SITENAME}</span>
<!-- END switch_h1 -->
</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<a href="javascript:void(0)" id="header-user"></a>
<a href="javascript:void(0)" id="header-notif"><i class="material-icons">notifications</i></a>
<!-- END switch_user_logged_in -->
<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">
<!-- BEGIN switch_desc -->
<h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
<!-- END switch_desc -->
</div>
</div>
<div id="site_widgets" style="display: none">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="wrap">
<!-- BEGIN switch_ticker -->
<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">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<!-- BEGIN html_validation -->
</div><!-- <div id="wrap" /> -->
</body>
</html>
<!-- END html_validation -->
Re: Ícone antes do membro do grupo
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}" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_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>
<!-- BEGIN switch_recent_jquery -->
<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>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<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>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker -->
<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>
<!-- END switch_ticker -->
{RICH_SNIPPET_GOOGLE}
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(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>
<!-- END google_analytics_code -->
<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">
<!-- BEGIN switch_logo_mob -->
<img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" />
<!-- END switch_logo_mob -->
</div>
<!-- BEGIN switch_h1 -->
<span id="logo-text">{switch_h1.MAIN_SITENAME}</span>
<!-- END switch_h1 -->
</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<a href="javascript:void(0)" id="header-user"></a>
<a href="javascript:void(0)" id="header-notif"><i class="material-icons">notifications</i></a>
<!-- END switch_user_logged_in -->
<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">
<!-- BEGIN switch_desc -->
<h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
<!-- END switch_desc -->
</div>
</div>
<div id="site_widgets" style="display: none">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="wrap">
<!-- BEGIN switch_ticker -->
<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">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<!-- BEGIN html_validation -->
</div><!-- <div id="wrap" /> -->
</body>
</html>
<!-- END html_validation -->
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
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;
}
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
Pela sua folha de estilo, reparei alguns erros; Poderia passar a mesma?
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
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;
}
Re: Ícone antes do membro do grupo
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.
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.
Re: Ícone antes do membro do grupo
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?
Re: Ícone antes do membro do grupo
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!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?
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Ícone antes do membro do grupo
Pedxz escreveu: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!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?
Eu tinha colocado com dúvida isso também, mas pode fechar, por favor, obrigado!
Re: Ícone antes do membro do grupo
Questão resolvidaEsta 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. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Tópicos semelhantes
» Ícone antes do nome do grupo
» Efeito RPG no ícone antes do grupo/nome
» Imagem antes do grupo
» Ícone FontAwesome antes do nome
» Ícone no grupo e aos membros do grupo
» Efeito RPG no ícone antes do grupo/nome
» Imagem antes do grupo
» Ícone FontAwesome antes do nome
» Ícone no grupo e aos membros do grupo
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos