Сделать сайт домашней страницей

21 апр 2011, 16:13

Этот простой скрипт отображает уведомления пользователям Firefox, предлагая им сделать ваш сайт домашней страницей в браузере. В комплекте имеется кнопка "Не показывать снова".
Вдохновленный Facebook.

УСТАНОВКА:
1 - СКАЧАТЬ: ff4-home-prompt.zip
2 - СКОПИРОВАТЬ файлы из архива:
/ff4-home-prompt/arrow.png в /styles/prosilver/theme/images/
/ff4-home-prompt/icon.png в /styles/prosilver/theme/images/
/ff4-home-prompt/tip.png в /styles/prosilver/theme/images/
/ff4-home-prompt/jquery.cookie.js в /styles/prosilver/template/
3 - HTML правка
Открыть: /styles/prosilver/template/overall_header.html
Найти:

Код: Выделить всё

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Добавить после:

Код: Выделить всё

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

Найти:

Код: Выделить всё

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Ниже добавляем:

Код: Выделить всё

<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>Сделайте наш сайт Домашним!</strong>
            <br /><span>&larr; Drag the icon over your Home button</span>
        </div>
        <div class="hp-links">
            <a href="#" class="noshow">Не показывать снова</a> | <a href="#" class="close">Нет спасибо</a>
        </div>
    </div>
</div>

Не забудьте заменить http://www.yoursite.com на адрес вашего сайта.
4 - CSS правка
Открыть: /styles/prosilver/theme/common.css
Найти:

Код: Выделить всё

.clear {
    display: block;
    clear: both;
    font-size: 1px;
    line-height: 1px;
    background: transparent;
}

Ниже добавить:

Код: Выделить всё

.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на адрес вашего сайта в строке:@-moz-document url-prefix(http://www.yoursite.com/)
Если вы используетеg localhost, напишите http://localhost/
5 - Подключаем jQuery
Открыть: /styles/prosilver/template/overall_header.html
Найти:

Код: Выделить всё

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

После добавить:

Код: Выделить всё

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

Куки хранятся 1 месяц (30 дней), после пользователь должен будет снова нажать “Не показывать снова”.

Добавлено спустя 3 минуты 41 секунду:
Хак предназначен для стиля Prosilver и стилей, созданных на его основе.