+3

Allow custom CSS sytles

Frederick Zhang 4 years ago updated 3 years ago 1

Hi,


First of all, thanks for the awesome add-on. It is currently the best speed dial add-on for Firefox as far as I know.


But personally it would be better if I could customise the new tab page a little more, e.g. stacking the dials to the left. Such requirements can hardly be categorised and supported all by the add-on itself, so what about simple allowing custom CSS styles to be applied in the page? FWIW Speed Dial 2 has this functionality in Chrome (it's still quite broken in Firefox though).

Any thoughts? This currently makes it quite painful for me. Personally I'd like to tile the dials on the left (and apply a few other minor cosmetic tweaks) so every time FVD gets an update I need to manually patch the code...

I understand this function obviously targets only a small crowd but at the same time it won't be too complicated to implement I reckon?


PS: my patch, I just used !important everywhere so if FVD could allow me to inject my rules to the new tab page it'd work out of the box.

diff --git a/styles/newtab/style.css b/styles/newtab/style.css
index afae544..e25cdc3 100644
--- a/styles/newtab/style.css
+++ b/styles/newtab/style.css
@@ -1,4 +1,42 @@
+/* custom */
+.newtabCell .body {
+  background-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.dataContainer {
+    margin-left: 50px !important;
+}
+
+.newtabCell {
+  width: 190px !important;
+}
+
+.newtabCell > .body {
+  width: 180px !important;
+}
+
+.newtabCell > .imgShadow {
+  width: 180px !important;
+}
+
+.newtabCell > .footer {
+  width: 170px !important;
+}
+
+.newtabCell[col="1"] {
+  left: 190px !important;
+}
+
+.newtabCell[col="2"] {
+  left: 380px !important;
+}
+
+.newtabCell[col="3"] {
+  left: 570px !important;
+}
+
+/* default */
 * {
     margin: 0;
     padding: 0;
 }