first base on navigation rework, less obtrusive, icons need to be updated, settings moved

7 files changed, 66 insertions, 89 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 0b886fc3fa9..1e25ccd36d1 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -82,8 +82,8 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
 .selectedActions a img { position:relative; top:.3em; }
 
 /* add breadcrumb divider to the File item in navigation panel */
-#navigation>ul>li:first-child { background:url('%webroot%/core/img/breadcrumb-start.svg') no-repeat 12.5em 0px; width:12.5em; padding-right:1em; position:fixed; }
-#navigation>ul>li:first-child+li { padding-top:2.9em; }
+#navigation>ul>li:first-child { background:url('%webroot%/core/img/breadcrumb-start.svg') no-repeat 65px 0; width:65px; padding-right:1em; position:fixed; }
+#navigation>ul>li:first-child+li { padding-top:68px; }
 
 #scanning-message{ top:40%; left:40%; position:absolute; display:none; }
 
diff --git a/core/css/styles.css b/core/css/styles.css
index a6c10504070..b29133bf79f 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -58,7 +58,7 @@ input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-
 /* CONTENT ------------------------------------------------------------------ */
 #controls { padding: 0 0.5em; width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; }
 #controls .button { display:inline-block; }
-#content { top: 3.5em; left: 12.5em; position: absolute; }
+#content { top: 3.5em; left: 65px; position: absolute; }
 #leftcontent, .leftcontent { position:fixed; overflow: auto; top:6.4em; width:20em; background:#f8f8f8; border-right:1px solid #ddd; }
 #leftcontent li, .leftcontent li { background:#f8f8f8; padding:.5em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 200ms; -moz-transition:background-color 200ms; -o-transition:background-color 200ms; transition:background-color 200ms; }
 #leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; }
@@ -95,14 +95,15 @@ label.infield { cursor: text !important; }
 
 
 /* NAVIGATION ------------------------------------------------------------- */
-#navigation { position:fixed; top:3.5em; float:left; width:12.5em; padding:0; z-index:75; height:100%; background:#eee; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; overflow:hidden;}
-#navigation a { display:block; padding:.6em .5em .4em 2.5em; background:#eee 1em center no-repeat; border-bottom:1px solid #ddd; border-top:1px solid #fff; text-decoration:none; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; }
-#navigation a.active, #navigation a:hover, #navigation a:focus { background-color:#dbdbdb; border-top:1px solid #d4d4d4; border-bottom:1px solid #ccc; color:#333; }
-#navigation a.active { background-color:#ddd; }
+#navigation { position:fixed; top:3.5em; float:left; width:65px; padding:0; z-index:75; height:100%; background:#30343a url('../img/noise.png') repeat; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; overflow:hidden;}
+#navigation a { display:block; padding:4px; background:transparent; text-decoration:none; font-size:10px; text-align:center; color:#000; text-shadow:#444 0 1px 0; }
+#navigation li:first-child { padding-top:8px; }
+#navigation a img { display:block; width:32px; height:32px; margin:0 auto; }
+#navigation a.active, #navigation a:hover, #navigation a:focus { color:#888; text-shadow:#000 0 -1px 0; }
+#navigation a.active {  }
 #navigation #settings { position:absolute; bottom:3.5em; width:100%; }
+#navigation #settings img { width:32px; height:32px; }
 #expand { position:relative; z-index:100; margin-bottom:-.5em; padding:.5em 10.1em .7em 1.2em; cursor:pointer; }
-#expand+span { position:absolute; z-index:99; margin:-1.7em 0 0 2.5em; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; }
-#expand:hover+span, #expand+span:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; cursor:pointer; }
 
 /* VARIOUS REUSABLE SELECTORS */
 .hidden { display:none; }
diff --git a/core/img/noise.png b/core/img/noise.png
new file mode 100644
index 00000000000..8fdda17b5e3
--- /dev/null
+++ b/core/img/noise.png
diff --git a/core/img/places/home.svg b/core/img/places/home.svg
index 4b45ef12bcb..8224d9750ed 100644
--- a/core/img/places/home.svg
+++ b/core/img/places/home.svg
@@ -14,8 +14,8 @@
    width="16"
    height="16"
    id="svg11300"
-   inkscape:version="0.48.1 r9760"
-   sodipodi:docname="help.svg"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="home.svg"
    inkscape:export-filename="/home/jancborchardt/jancborchardt/ownCloud/icons/help.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
@@ -41,16 +41,16 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1280"
-     inkscape:window-height="776"
+     inkscape:window-height="800"
      id="namedview24"
      showgrid="true"
      showguides="true"
      inkscape:guide-bbox="true"
      inkscape:zoom="22.627418"
      inkscape:cx="14.025105"
-     inkscape:cy="9.2202448"
+     inkscape:cy="3.9169442"
      inkscape:window-x="0"
-     inkscape:window-y="24"
+     inkscape:window-y="-31"
      inkscape:window-maximized="1"
      inkscape:current-layer="g4146">
     <inkscape:grid
@@ -1733,16 +1733,6 @@
          style="stop-color:#363636;stop-opacity:1"
          offset="1" />
     </linearGradient>
-    <linearGradient
-       y2="18.967093"
-       x2="-2.4040222"
-       y1="4.4573336"
-       x1="-2.4040222"
-       gradientTransform="translate(13.927091,16.573387)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient3475"
-       xlink:href="#linearGradient3587-6-5-26"
-       inkscape:collect="always" />
   </defs>
   <g
      transform="matrix(0.78786264,0,0,0.78786264,-3.1483699,0.44173984)"
@@ -1761,19 +1751,14 @@
      style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
   <g
      id="g4146">
-    <g
-       id="g4550"
-       transform="translate(0,-20)">
-      <path
-         inkscape:connector-curvature="0"
-         d="M 8,22.03072 0,30 l 3,0 0,6 10,0 0,-6 3,0 L 13,26.969459 13,23 l -3.0000001,0 0,1.081152 L 8,22.03072 z"
-         id="path3887"
-         style="opacity:0.6;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-      <path
-         inkscape:connector-curvature="0"
-         d="M 8,21.03072 0,29 l 3,0 0,6 10,0 0,-6 3,0 L 13,25.969459 13,22 l -3.0000001,0 0,1.081152 L 8,21.03072 z"
-         id="path3883"
-         style="opacity:0.7;fill:url(#linearGradient3475);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </g>
+    <path
+       style="opacity:0.9;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 8 0.53125 L 0 8.5 L 0.5 8.5 L 8 1.03125 L 10 3.09375 L 10 2.59375 L 8 0.53125 z M 10 1.5 L 10 2 L 13 2 L 13 1.5 L 10 1.5 z M 13 5.46875 L 13 5.96875 L 15.5 8.5 L 16 8.5 L 13 5.46875 z "
+       id="path5338" />
+    <path
+       style="opacity:0.20000000000000001;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="path3883"
+       d="M 8,1.03072 0,9 3,9 3,15 13,15 13,9 16,9 13,5.969459 13,2 10,2 10,3.081152 8,1.03072 z"
+       inkscape:connector-curvature="0" />
   </g>
 </svg>
diff --git a/core/img/places/music.svg b/core/img/places/music.svg
index 1f397660970..0a810c8887c 100644
--- a/core/img/places/music.svg
+++ b/core/img/places/music.svg
@@ -14,8 +14,8 @@
    width="16"
    height="16"
    id="svg11300"
-   inkscape:version="0.48.1 r9760"
-   sodipodi:docname="search.svg"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="music.svg"
    inkscape:export-filename="/home/jancborchardt/jancborchardt/ownCloud/icons/search.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
@@ -41,7 +41,7 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1280"
-     inkscape:window-height="776"
+     inkscape:window-height="800"
      id="namedview24"
      showgrid="true"
      showguides="true"
@@ -50,7 +50,7 @@
      inkscape:cx="-2.2078397"
      inkscape:cy="6.5568429"
      inkscape:window-x="0"
-     inkscape:window-y="24"
+     inkscape:window-y="-31"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg11300">
     <inkscape:grid
@@ -1628,17 +1628,12 @@
        id="linearGradient3374"
        xlink:href="#linearGradient4136-9"
        inkscape:collect="always" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient4136-9"
-       id="linearGradient3457"
-       gradientUnits="userSpaceOnUse"
-       spreadMethod="pad"
-       x1="9"
-       y1="0"
-       x2="9"
-       y2="15" />
   </defs>
+  <path
+     style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path5404"
+     d="M 13.36218,0.50108254 C 11.005077,0.88091754 7.850551,1.2719285 5.5,1.6729766 c -0.622438,0.303692 -0.482505,1.085702 -0.510043,1.653123 0,2.531942 0,5.063885 0,7.5958254 -1.311726,-0.246608 -2.911355,0.837272 -2.980733,2.553423 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 C 5.71837,15.543589 6.979991,14.319733 7,12.771952 6.97986,10.172547 7.0057,7.5721166 7,4.9723096 c 0.285577,-0.02115 4.611029,-0.846503 4.999999,-0.901457 0,1.947147 0,3.894295 0,5.8414424 -1.146387,-0.274636 -2.611896,0.478721 -2.975268,2.017251 -0.15337,0.862385 0.136496,1.944831 1.011545,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661704 0.02169,-6.9337614 0,-10.4003045 C 13.949347,0.84240254 13.7286,0.47756852 13.36218,0.50108254 z"
+     inkscape:connector-curvature="0" />
   <g
      transform="matrix(0.78786264,0,0,0.78786264,-3.1483699,0.44173984)"
      id="g3743-3"
@@ -1654,17 +1649,9 @@
      transform="matrix(0.99998873,0,0,0.99998873,-3.996044,-20.001608)"
      id="g3743-9-4"
      style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
-  <g
-     id="g4146">
-    <path
-       style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
-       id="path4031"
-       d="m 13.36218,1.0010808 c -2.357103,0.379835 -5.5116295,0.770846 -7.8621805,1.1718941 -0.622438,0.303692 -0.482505,1.085702 -0.510043,1.653123 0,2.531942 0,5.063885 0,7.5958261 -1.311726,-0.246608 -2.911355,0.837273 -2.980733,2.553424 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 1.844664,0.04478 3.106285,-1.179076 3.126294,-2.726857 -0.02014,-2.599407 0.0057,-5.1998371 0,-7.7996441 0.285577,-0.02115 4.6110295,-0.846503 4.9999995,-0.901457 0,1.947147 0,3.894295 0,5.8414421 -1.146387,-0.274636 -2.6118965,0.478721 -2.9752685,2.017253 -0.15337,0.862385 0.136496,1.944831 1.0115455,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661721 0.02169,-6.9337631 0,-10.4003062 C 13.949347,1.3424008 13.7286,0.97756684 13.36218,1.0010808 z"
-       inkscape:connector-curvature="0" />
-    <path
-       style="opacity:0.7;fill:url(#linearGradient3457);fill-opacity:1;fill-rule:nonzero;stroke:none"
-       id="path4031-1"
-       d="m 13.36218,0.00108226 c -2.357103,0.379835 -5.5116293,0.770846 -7.8621803,1.17189404 -0.6224381,0.303692 -0.4825051,1.085702 -0.5100431,1.653123 0,2.531942 0,5.063885 0,7.5958257 -1.3117261,-0.246608 -2.9113551,0.837272 -2.9807331,2.553423 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 1.8446642,0.04478 3.1062852,-1.179076 3.1262942,-2.726857 -0.02014,-2.5994053 0.0057,-5.1998357 0,-7.7996427 0.285577,-0.02115 4.6110293,-0.846503 4.9999993,-0.901457 0,1.947147 0,3.894295 0,5.8414424 -1.146387,-0.274636 -2.6118963,0.478721 -2.9752683,2.0172513 -0.15337,0.862385 0.136496,1.944831 1.0115453,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661707 0.02169,-6.9337617 0,-10.40030474 -0.04486,-0.325758 -0.265607,-0.69059202 -0.632027,-0.667078 z"
-       inkscape:connector-curvature="0" />
-  </g>
+  <path
+     inkscape:connector-curvature="0"
+     d="M 13.36218,0.00108226 C 11.005077,0.38091726 7.850551,0.77192826 5.5,1.1729763 c -0.622438,0.303692 -0.482505,1.085702 -0.510043,1.653123 0,2.531942 0,5.063885 0,7.5958257 -1.311726,-0.246608 -2.911355,0.837272 -2.980733,2.553423 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 C 5.71837,15.043589 6.979991,13.819733 7,12.271952 6.97986,9.6725467 7.0057,7.0721163 7,4.4723093 c 0.285577,-0.02115 4.611029,-0.846503 4.999999,-0.901457 0,1.947147 0,3.894295 0,5.8414424 -1.146387,-0.274636 -2.611896,0.478721 -2.975268,2.0172513 -0.15337,0.862385 0.136496,1.944831 1.011545,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661707 0.02169,-6.9337617 0,-10.40030474 -0.04486,-0.325758 -0.265607,-0.69059202 -0.632027,-0.667078 z"
+     id="path4031-1"
+     style="opacity:0.7;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
 </svg>
diff --git a/core/img/places/picture.svg b/core/img/places/picture.svg
index 26c3d6312c2..8d7848bb979 100644
--- a/core/img/places/picture.svg
+++ b/core/img/places/picture.svg
@@ -14,8 +14,8 @@
    width="16"
    height="16"
    id="svg11300"
-   inkscape:version="0.48.1 r9760"
-   sodipodi:docname="audio.svg"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="picture.svg"
    inkscape:export-filename="/home/jancborchardt/jancborchardt/ownCloud/icons/audio.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
@@ -27,7 +27,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -41,7 +41,7 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1280"
-     inkscape:window-height="776"
+     inkscape:window-height="800"
      id="namedview24"
      showgrid="true"
      showguides="true"
@@ -50,7 +50,7 @@
      inkscape:cx="14.025105"
      inkscape:cy="9.2202448"
      inkscape:window-x="0"
-     inkscape:window-y="24"
+     inkscape:window-y="-31"
      inkscape:window-maximized="1"
      inkscape:current-layer="g4146">
     <inkscape:grid
@@ -1677,21 +1677,17 @@
      style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
   <g
      id="g4146">
-    <g
-       transform="translate(-39.999799,1)"
-       id="g3376">
-      <path
-         sodipodi:nodetypes="cccccccccccccc"
-         inkscape:connector-curvature="0"
-         id="path4160-9-9-0"
-         d="m 43.35011,1.0020512 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 l -3.07e-4,13.1230708 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 l 3.07e-4,-12.9606108 c -3.29e-4,-0.336436 -0.265499,-0.601856 -0.516871,-0.599899 0,0 -7.760335,0 -10.134913,0 z M 44,11 l 9,0 4.13e-4,3 L 44,14 z"
-         style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.6;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992162;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-      <path
-         sodipodi:nodetypes="cccccccccccccc"
-         inkscape:connector-curvature="0"
-         id="path4160-9-9-8"
-         d="m 43.35011,0.0020508 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 l -3.07e-4,13.1230712 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 L 54.001894,0.6019496 C 54.001565,0.265514 53.736395,9.38e-5 53.485023,0.0020508 c 0,0 -7.760335,0 -10.134913,0 z M 44,10 l 9,0 4.13e-4,3 L 44,13 z"
-         style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.7;color:#000000;fill:url(#linearGradient3397);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992162;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    </g>
+    <path
+       sodipodi:nodetypes="cccccccccccccc"
+       inkscape:connector-curvature="0"
+       id="path5740"
+       d="m 3.350311,1.5020508 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 L 3,15.062561 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 L 14.002095,2.1019496 C 14.001766,1.765514 13.736596,1.5000938 13.485224,1.5020508 c 0,0 -7.760335,0 -10.134913,0 z M 4.000201,11.5 l 9,0 4.13e-4,3 -9.000413,0 z"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.1;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992161999999996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+    <path
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.69999999999999996;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992161999999996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="m 3.350311,1.0020508 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 L 3,14.562561 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 L 14.002095,1.6019496 C 14.001766,1.265514 13.736596,1.0000938 13.485224,1.0020508 c 0,0 -7.760335,0 -10.134913,0 z M 4.000201,11 l 9,0 4.13e-4,3 -9.000413,0 z"
+       id="path4160-9-9-8"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccccccccc" />
   </g>
 </svg>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 1f16fdf7c6c..2509026dfac 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -44,17 +44,25 @@
 		<nav><div id="navigation">
 			<ul id="apps" class="svg">
 				<?php foreach($_['navigation'] as $entry): ?>
-					<li data-id="<?php echo $entry['id']; ?>"><a style="background-image:url(<?php echo $entry['icon']; ?>)" href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>><?php echo $entry['name']; ?></a>
+					<li data-id="<?php echo $entry['id']; ?>">
+						<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
+							<img src="<?php echo $entry['icon']; ?>">
+							<?php echo $entry['name']; ?>
+						</a>
 					</li>
 				<?php endforeach; ?>
 			</ul>
 
 			<ul id="settings" class="svg">
 				<img role=button tabindex=0 id="expand" class="svg" alt="<?php echo $l->t('Settings');?>" src="<?php echo image_path('', 'actions/settings.svg'); ?>" />
-				<span><?php echo $l->t('Settings');?></span>
 				<div id="expanddiv" <?php if($_['bodyid'] == 'body-user') echo 'style="display:none;"'; ?>>
 				<?php foreach($_['settingsnavigation'] as $entry):?>
-					<li><a style="background-image:url(<?php echo $entry['icon']; ?>)" href="<?php echo $entry['href']; ?>" title="" <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>><?php echo $entry['name'] ?></a></li>
+					<li>
+						<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
+							<img src="<?php echo $entry['icon']; ?>">
+							<?php echo $entry['name'] ?>
+						</a>
+					</li>
 				<?php endforeach; ?>
 				</div>
 			</ul>