Autore:christian bullock
Descrizione:Recentemente Facebook ha aggiunto un prompt in alto a destra del browser Firefox spingendoli a far la home page di Facebook trascinando un'icona sopra il pulsante home. Utilizzando alcuni Firefox specifiche CSS e jQuery impareremo come aggiungere funzionalità ha detto in un forum phpBB3.
Copia: /ff4-home-prompt/arrow.png in
/styles/prosilver/theme/images/Copia: /ff4-home-prompt/icon.png in
/styles/prosilver/theme/images/Copia: /ff4-home-prompt/tip.png in
/styles/prosilver/theme/images/Copia: /ff4-home-prompt/jquery.cookie.js in
/styles/prosilver/template/Fase 1) Modifica HTML
Apri: /styles/prosilver/template/overall_header.html
Trova:
Codice: Seleziona tutto
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>Codice: Seleziona tutto
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again) -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>Codice: Seleziona tutto
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">Qui di seguito, Aggiungi:
Codice: Seleziona tutto
<div class="hp-container">
<div class="hp-tip"></div>
<div class="hp-inner">
<div class="hp-content">
<a href="http://www.yoursite.com" class="hp-icon"><img src="{T_THEME_PATH}/images/icon.png" width="32" height="32" alt="" /></a>
<strong>Make us your Homepage!</strong>
<br /><span>← Drag the icon over your Home button</span>
</div>
<div class="hp-links">
<a href="#" class="noshow">Don't show again</a> | <a href="#" class="close">No thanks</a>
</div>
</div>
</div>www.yoursite.com Sostituire con il link alla pagina per indicizzare il tuo forum.
Fase 2) Modifica CSS
Apri: /styles/prosilver/theme/common.css
Trova:
Codice: Seleziona tutto
.clear {
display: block;
clear: both;
font-size: 1px;
line-height: 1px;
background: transparent;
}Codice: Seleziona tutto
.hp-container {
width: 301px;
height: 103px;
background-color: rgba(39,107,178,0.4);
position: absolute;
top: 0;
right: 30px;
z-index: 9999;
display: none; /* hide from non FF browsers */
}
.hp-tip {
width: 301px;
height: 10px;
background: url("{T_THEME_PATH}/images/tip.png") no-repeat left top;
}
.hp-inner {
background-color: #eaf5ff;
margin: 5px;
padding: 5px;
height: 73px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.hp-content {
background: url("{T_THEME_PATH}/images/arrow.png") no-repeat right top #e0effd;
border: 1px solid #9bcfff;
height: 26px;
padding: 10px;
}
.hp-content strong {
color: #0c233b;
}
.hp-content span {
font-size: 11px;
color: #364c62;
}
.hp-icon {
float: left;
margin: -2px 6px 0 -4px;
}
.hp-links {
color: #1d4e82;
text-align: right;
height: 18px;
margin-top: 7px;
}
.hp-links a {
color: #276bb2;
}
.hp-links a:hover {
color: #3080d3;
}
/* Display to Firefox only */
@-moz-document url-prefix(http://www.yoursite.com/)
{
.hp-container {display: block;}
}http://www.yoursite.com con il tuo dominio nella riga seguente:@-moz-document url-prefix
(http://www.yoursite.com/)Se si usa localhost,
http://localhost/
Fase 3) Il jQuery
Apri: /styles/prosilver/template/overall_header.html
Trova:
Codice: Seleziona tutto
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>Codice: Seleziona tutto
<script type="text/javascript">
$(document).ready(function(){
$("a.close").click(function(){
$(".hp-container").fadeOut();
});
$("a.noshow").click(function(){
$(".hp-container").fadeOut();
$.cookie("hp-state","noshow", {expires: 30, path: '/'});
});
var hpState = $.cookie("hp-state");
if(hpState == 'noshow') {
$(".hp-container").hide();
};
return false;
});
</script>
Informazioni