[dokuwiki] More pretty "baseline" smileys/interwiki icons alignment

  • From: "Dmitry Katsubo" <dmarc-noreply@xxxxxxxxxxxxx> (Redacted sender "dma_k" for DMARC)
  • To: dokuwiki@xxxxxxxxxxxxx
  • Date: Sat, 25 Jun 2016 22:20:31 +0200

Hi everyone,

CSS styling is in general a matter of taste. However I personally find that
the interval between interwiki icon and text is too small (in case when icon
fills the whole 16×16px area) and alignment of smileys is not nice looking
(may depend on font / browser / template) – have a look at attachments. Here
come the places to play with:

diff --git a/lib/exe/css.php b/lib/exe/css.php
index ade1547..2a598f3 100644
--- a/lib/exe/css.php
+++ b/lib/exe/css.php
@@ -352,7 +352,7 @@ function css_interwiki(){
     // default style
     echo 'a.interwiki {';
     echo ' background: transparent url('.DOKU_BASE.'lib/images/interwiki.png) 
0px 1px no-repeat;';
-    echo ' padding: 1px 0px 1px 16px;';
+    echo ' padding: 0px 0px 1px 18px;';
     echo '}';
 
     // additional styles when icon available
diff --git a/lib/tpl/dokuwiki/css/basic.less b/lib/tpl/dokuwiki/css/basic.less
index 524fb49..70ff035 100644
--- a/lib/tpl/dokuwiki/css/basic.less
+++ b/lib/tpl/dokuwiki/css/basic.less
@@ -214,7 +214,7 @@ a:visited:active {
 
 img {
     border-width: 0;
-    vertical-align: middle;
+    vertical-align: text-top;
     color: #666;
     background-color: transparent;
     font-style: italic;


-- 
With best regards,
Dmitry

Attachment: text_icon_orig.png
Description: PNG image

Attachment: text_icon_fixed.png
Description: PNG image

Other related posts:

  • » [dokuwiki] More pretty "baseline" smileys/interwiki icons alignment - Dmitry Katsubo