Bug 660006: Featured add-ons are now hyperlinked

apps/eol/templates/eol/desktop/firefox/addons.html

@@ -35,8 +35,10 @@
 
     <div class="block block-6">
         {# L10n: Featured add-on name. #}
-        <div class="icon"></div>
-        <span class="title">{{ _('Personas') }}</span>
+        <a href="https://addons.mozilla.org/mobile/addon/personas/" target="_blank">
+            <span class="icon"></span>
+            <span class="title">{{ _('Personas') }}<span class="arrow"></span></span>
+        </a>
         <p>
             {{ _('Dress up your Firefox with thousands of cool designs from <a href="{url}">GetPersonas.com</a>.')|fe(url='#') }}
         </p>
@@ -44,8 +46,10 @@
 
     <div class="block block-7">
         {# L10n: Featured add-on name. #}
-        <div class="icon"></div>
-        <span class="title">{{ _('HootBar') }}</span>
+        <a href="https://addons.mozilla.org/mobile/addon/hootbar/" target="_blank">
+            <span class="icon"></span>
+            <span class="title">{{ _('HootBar') }}<span class="arrow"></span></span>
+        </a>
         <p>
             {{ _('Post messages to Twitter and other social networks from the Awesome Bar.') }}
         </p>
@@ -53,8 +57,10 @@
 
     <div class="block block-8">
         {# L10n: Featured add-on name. #}
-        <div class="icon"></div>
-        <span class="title">{{ _('Adblock Plus') }}</span>
+        <a href="https://addons.mozilla.org/mobile/addon/adblock-plus/" target="_blank">
+            <span class="icon"></span>
+            <span class="title">{{ _('Adblock Plus') }}<span class="arrow"></span></span>
+        </a>
         <p>
             {{ _('Remove ads and regain control of the way you view the web.') }}
         </p>
@@ -62,8 +68,10 @@
 
     <div class="block block-9">
         {# L10n: Featured add-on name. #}
-        <div class="icon"></div>
-        <span class="title">{{ _('Phony') }}</span>
+        <a href="https://addons.mozilla.org/mobile/addon/phony/" target="_blank">
+            <span class="icon"></span>
+            <span class="title">{{ _('Phony') }}<span class="arrow"></span></span>
+        </a>
         <p>
             {{ _('View sites by masquerading as an iPhone, Android, or desktop browser.') }}
         </p>

media/css/firefox-2.css

@@ -85,6 +85,15 @@
     width:30px;
     float:left;
     margin:5px 10px 0 0;
+    display:block;
+}
+
+#layer-2 .arrow {
+    height:13px;
+    width:13px;
+    background:url('../img/spritesheet.png') no-repeat -200px 0px;
+    display:inline-block;
+    margin-left:9px;
 }
 
 #layer-2 .block-6 .icon {background:url('../img/sprites-firefox.png') no-repeat 0 -250px;}
@@ -92,6 +101,18 @@
 #layer-2 .block-8 .icon {background:url('../img/sprites-firefox.png') no-repeat -100px -250px;}
 #layer-2 .block-9 .icon {background:url('../img/sprites-firefox.png') no-repeat -150px -250px;}
 
+#layer-2 .block-6 a, #layer-2 .block-7 a, #layer-2 .block-8 a, #layer-2 .block-9 a {
+    color:inherit;
+}
+
+#layer-2 .block-6 p a {
+    color:#75D0FF;
+}
+
+#layer-2 .block-6 a:hover, #layer-2 .block-7 a:hover, #layer-2 .block-8 a:hover, #layer-2 .block-9 a:hover {
+    color:#9EDEFF;
+}
+
 #layer-2 .block p {
     clear:left;
 }