do link hint styling in user stylesheet.

3 files changed, 27 insertions, 44 deletions

diff --git a/examples/config/config b/examples/config/config
index 5c00fb5..bcd6d3e 100644
--- a/examples/config/config
+++ b/examples/config/config
@@ -94,6 +94,9 @@ set download_handler    = sync_spawn @scripts_dir/download.sh
 
 # === Behaviour and appearance ===============================================
 
+# Custom CSS can be defined here, including link follower hint styles
+set stylesheet_uri = file://@data_home/uzbl/style.css
+
 set show_status       = 1
 set status_top        = 0
 set status_background = #303030
diff --git a/examples/data/scripts/follow.js b/examples/data/scripts/follow.js
index 1551f1c..2b9da59 100644
--- a/examples/data/scripts/follow.js
+++ b/examples/data/scripts/follow.js
@@ -1,5 +1,4 @@
 /* This is the basic linkfollowing script.
- * Its pretty stable, and you configure which keys to use for hinting
  *
  * TODO:
  * Some pages mess around a lot with the zIndex which
@@ -11,15 +10,14 @@
  *  happen. Blame some freaky webdesigners ;)
  */
 
+// Globals
+uzbldivid = 'uzbl_link_hints';
+
 uzbl.follow = function() {
     // Export
     charset   = arguments[0];
     newwindow = arguments[2];
 
-    // Some shortcuts and globals
-    uzblid = 'uzbl_link_hint';
-    uzbldivid = uzblid + '_div_container';
-
     var keypress = arguments[1];
     return arguments.callee.followLinks(keypress);
 }
@@ -107,26 +105,9 @@ uzbl.follow.removeAllHints = function(doc) {
 // Generate a hint for an element with the given label
 // Here you can play around with the style of the hints!
 uzbl.follow.generateHint = function(doc, el, label, top, left) {
-    var hint = doc.createElement('div');
-    hint.setAttribute('name', uzblid);
+    var hint = doc.createElement('span');
     hint.innerText = label;
-    hint.style.display = 'inline';
-    if (newwindow) hint.style.backgroundColor = '#ffff00';
-    else hint.style.backgroundColor = '#aaff00';
-    hint.style.border = '2px solid #556600';
-    hint.style.color = 'black';
-    hint.style.fontFamily = 'Verdana';
-    hint.style.fontSize = '9px';
-    hint.style.fontWeight = 'bold';
-    hint.style.fontVariant = 'normal';
-    hint.style.lineHeight = '9px';
-    hint.style.margin = '0px';
-    hint.style.width = 'auto'; // fix broken rendering on w3schools.com
-    hint.style.padding = '1px';
     hint.style.position = 'absolute';
-    hint.style.zIndex = '1000';
-    hint.style.textDecoration = 'none';
-    hint.style.webkitTransform = 'translate(-5px,-5px)';
     hint.style.top  = top  + 'px';
     hint.style.left = left + 'px';
     return hint;
@@ -173,7 +154,8 @@ uzbl.follow.reDrawHints = function(elems, chars) {
         uzbl.follow.removeAllHints(doc);
         if (!doc.body) return;
         doc.hintdiv = doc.createElement('div');
-        doc.hintdiv.setAttribute('id', uzbldivid);
+        doc.hintdiv.id = uzbldivid;
+        if(newwindow) doc.hintdiv.className = "new-window";
         doc.body.appendChild(doc.hintdiv);
     });
 
diff --git a/examples/data/style.css b/examples/data/style.css
index f9b111e..45bb56f 100644
--- a/examples/data/style.css
+++ b/examples/data/style.css
@@ -1,25 +1,23 @@
-.uzbl_highlight { background-color: yellow;}
-.uzbl_h_first   { background-color: lightgreen;}
-
-.uzbl_follow    { border-style:     dotted;
-                  border-width:     thin;
+#uzbl_link_hints > span {
+    background-color:   #aaff00;
+    color:              black;
+    border:             2px solid #556600;
+    font-family:        Verdana;
+    font-size:          9px;
+    font-weight:        bold;
+    font-variant:       normal;
+    line-height:        9px;
+    margin:             0px;
+    width:              auto; /* fix broken rendering on w3schools.com */
+    padding:            1px;
+    z-index:            1000;
+    text-decoration:    none;
+    -webkit-transform:  translate(-5px,-5px);
 }
 
-#uzbl_hint > div    {
-	display:                        inline;
-	border:                         2px solid #4a6600;
-	background-color:               #b9ff00;
-	color:                          black;
-	font-size:                      9px;
-	font-weight:                    bold;
-	line-height:                    9px;
-	margin:                         0px;
-	padding:                        0px;
-	position:                       absolute;
-	z-index:                        1000;
-	-webkit-border-radius:          6px;
-	text-decoration:                none;
-	-wekit-transform:               scale(1) rotate(0deg) translate(-6px,-5px);
+/* we can have different colours for different types of hints! */
+#uzbl_link_hints.new-window > span {
+    background-color: #ffff00;
 }
 
 /* vim:set et ts=4: */