prompt

Firefox 4 homepage prompt

On 04.02.11, In phpBB3 Tutorials, by

This light script displays a notice to Firefox users prompting them to make your site the homepage in their browser. Complete with “Don’t show again” feature. Inspired by Facebook.

What we’re trying to achieve

Recently Facebook added a prompt in the upper-right of Firefox browsers prompting them to make Facebook the homepage by dragging an icon over the home button. Using some Firefox specific CSS and jQuery we’ll learn how to add said feature to a phpBB3 forum.

ff4-home-prompt.zip

Preparation

To complete this tutorial you’ll need a decent Source Code Editor. You also need to download the ff4-home-prompt.zip archive by clicking the button above. Then:

Copy: /ff4-home-prompt/arrow.png to /styles/prosilver/theme/images/
Copy: /ff4-home-prompt/icon.png to /styles/prosilver/theme/images/
Copy: /ff4-home-prompt/tip.png to /styles/prosilver/theme/images/
Copy: /ff4-home-prompt/jquery.cookie.js to /styles/prosilver/template/

Step 1) HTML Edits

Firstly we need to connect to jQuery. Then place our code.

Open: /styles/prosilver/template/overall_header.html

Find:

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

After, Add:

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

Find:

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

Below, Add:

<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>&larr; 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>

Note: Replace http://www.yoursite.com with the link to your forum’s index page.

Step 2) CSS Edits

Here are the basic styling rules, as well as a Firefox specific rule to only show the prompt in Firefox.

Open: /styles/prosilver/theme/common.css

Find:

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

Below, Add:

.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;}
}

Important: Make sure you replace http://www.yoursite.com with your domain on the following line:

@-moz-document url-prefix(http://www.yoursite.com/)

If using localhost, use http://localhost/

Step 3) The jQuery

A basic function to fade the message out when the “No thanks” link is clicked. Add a cookie to stop the message showing “Don’t show this again” link is clicked.

Open: /styles/prosilver/template/overall_header.html

Find:

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

After, Add:

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

Cookies will expire after 1 month (30 days), at which point the user would need to click the “Don’t show again” link.

Support / Donations

Since this is quite a sensative script, support (if required) can be obtained over on the Support Forum. If you use this script and like it, please consider making a donation. Finally if you find a mistake, contact me and let me know. Thanks!