O layout deste estilo é diferente. Ao posicionar o mouse sobre o nome do usuário, aparece um menu deslizante vertical com as opções, conforme a imagem abaixo:
img.jpg
Se mesmo assim quiser adicionar os botões, teremos de mudar a classe
profile-icons para
contact-icons, porque os ícones acabam "invadindo" o menu deslizante vertical, pegando as definições do estilo.
Vamos ao procedimento.
1- Abra o arquivo
/styles/art_helion/template/viewtopic_body.html, ache as linhas...
Código: Selecionar todos
<!-- BEGIN custom_fields -->
<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
<!-- END custom_fields -->
e
adicione após, em uma nova linha:
Código: Selecionar todos
<!-- IF not S_IS_BOT -->
<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
<dd>
<ul class="contact-icons">
<!-- IF postrow.U_PM --><li class="pm_icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_EMAIL --><li class="email_icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_WWW --><li class="web_icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_MSN --><li class="msnm_icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_ICQ --><li class="icq_icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_YIM --><li class="yahoo_icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_AIM --><li class="aim_icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_JABBER --><li class="jabber_icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
</ul>
</dd>
<!-- ENDIF -->
<!-- ENDIF -->
2- Abra o arquivo
/styles/art_helion/imageset/imageset.cfg e
adicione no final, em uma nova linha:
Código: Selecionar todos
# Icons
img_icon_contact_aim = icon_contact_aim.gif*20*20
img_icon_contact_email = icon_contact_email.gif*20*20
img_icon_contact_icq = icon_contact_icq.gif*20*20
img_icon_contact_jabber = icon_contact_jabber.gif*20*20
img_icon_contact_msnm = icon_contact_msnm.gif*20*20
img_icon_contact_www = icon_contact_www.gif*20*20
img_icon_contact_yahoo = icon_contact_yahoo.gif*20*20
img_icon_contact_pm = icon_contact_pm.gif*20*28
:arrow:
Copie o arquivo
/styles/prosilver/imageset/pt_br/icon_contact_pm.gif e
cole-o na pasta
/styles/art_helion/imageset.
3- Abra o arquivo
/styles/art_helion/theme/common.css e
adicione no final, em uma nova linha:
Código: Selecionar todos
/* Contact icons
----------------------------------------*/
ul.contact-icons {
padding-top: 10px;
list-style: none;
}
/* Rollover state */
ul.contact-icons li {
float: left;
margin: 0 6px 3px 0;
background-position: 0 100%;
}
/* Rolloff state */
ul.contact-icons li a {
display: block;
width: 100%;
height: 100%;
background-position: 0 0;
}
/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
ul.contact-icons li span { display:none; }
ul.contact-icons li a:hover { background: none; }
/* Set contact icons dimensions */
ul.contact-icons li.email_icon { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; }
ul.contact-icons li.aim_icon { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; }
ul.contact-icons li.yahoo_icon { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; }
ul.contact-icons li.web_icon { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; }
ul.contact-icons li.msnm_icon { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }
ul.contact-icons li.icq_icon { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; }
ul.contact-icons li.jabber_icon { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; }
ul.contact-icons li.pm_icon { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; }
/* Contact & navigation icons */
.email_icon, .email_icon a { background: none top left no-repeat; }
.aim_icon, .aim_icon a { background: none top left no-repeat; }
.yahoo_icon, .yahoo_icon a { background: none top left no-repeat; }
.web_icon, .web_icon a { background: none top left no-repeat; }
.msnm_icon, .msnm_icon a { background: none top left no-repeat; }
.icq_icon, .icq_icon a { background: none top left no-repeat; }
.jabber_icon, .jabber_icon a { background: none top left no-repeat; }
.pm_icon, .pm_icon a { background: none top left no-repeat; }
/* Contact & navigation icons */
.email_icon, .email_icon a { background-image: url("{IMG_ICON_CONTACT_EMAIL_SRC}"); }
.aim_icon, .aim_icon a { background-image: url("{IMG_ICON_CONTACT_AIM_SRC}"); }
.yahoo_icon, .yahoo_icon a { background-image: url("{IMG_ICON_CONTACT_YAHOO_SRC}"); }
.web_icon, .web_icon a { background-image: url("{IMG_ICON_CONTACT_WWW_SRC}"); }
.msnm_icon, .msnm_icon a { background-image: url("{IMG_ICON_CONTACT_MSNM_SRC}"); }
.icq_icon, .icq_icon a { background-image: url("{IMG_ICON_CONTACT_ICQ_SRC}"); }
.jabber_icon, .jabber_icon a { background-image: url("{IMG_ICON_CONTACT_JABBER_SRC}"); }
.pm_icon, .pm_icon a { background-image: url("{IMG_ICON_CONTACT_PM_SRC}"); }
/* Contact icons icons
----------------------------------------*/
/* Rollover state */
.rtl .contact-icons ul.contact-icons li {
float: right;
margin: 0 0 3px 6px;
}
/* Positioning of moderator icons */
.rtl .contact-icons ul.contact-icons {
float: left;
}
OBS: Caso queira retirar o menu deslizante vertical que abre ao posicionar o mouse sobre o nome do usuário, então, no arquivo
/styles/art_helion/template/viewtopic_body.html, ache e
exclua as linhas:
Código: Selecionar todos
<div class="popup popup-list">
<ul>
<li class="popup-link"><a href="{postrow.U_PROFILE}">{L_READ_PROFILE}</a></li>
<!-- IF postrow.U_PM --><li class="popup-link pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_EMAIL --><li class="popup-link email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_WWW --><li class="popup-link web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_MSN --><li class="popup-link msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_ICQ --><li class="popup-link icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_YIM --><li class="popup-link yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_AIM --><li class="popup-link aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_JABBER --><li class="popup-link jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
</ul>
</div>
Abraço.
