Read the rules before proceeding!

Topic: Simple userstyle and Firefox theme

Posted under e621 Tools and Applications

I've put together some custom CSS that simplifies the look of the site, tightens up some margins, reduces text size, and saves some vertical space.

Updated for the redesign. Here's a screenshot of what it looks like: https://i.imgur.com/EuZrJZw.png

Just paste into the custom CSS section of the advanced user settings page, or use a browser plugin like Stylus

Optional smaller fav button:

.fav-buttons {
    font-size: 1em !important;
    margin-right: .7em !important;
}

Remove tag type headers:

.tag-list-header {
    display: none;
}

I've also made a quick Firefox Color theme to go with it: https://color.firefox.com/?theme=XQAAAAIUAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKlhLliJ51ygIDSHb1doLaygW8Bddi9GoqshZlsLqwbpbODZCBui7Qg-sAra5UM5Vbf4flMlTTRMY4frhLzqzYV1JPal1SK8-J1jzGNCKwK9fKK8PtQ-8oNk2YxeRwQReQS7rvey4HClAHnV6R4GuuG0A4JvkCr522syakes_QSJKTceLDN7GOVuT3mf2YPWWQavRZnTOjE5RPhJ95xd2I0hVfN2H_-LaJAA

Updated

There is a code block you can use, eg:
\

\

Updated by anonymous

Chaser said:
There is a code block you can use, eg:
\

\

Thanks, I didn't see that option. I've edited my post.

Updated by anonymous

I'd highly recommend using a normal firefox theme as opposed to Firefox Color, because Firefox Color increases startup time by way more than it logically should.

Updated by anonymous

I took things a little further and wrote out a lot of the box-shadows. Also converted it to a UserCSS file.

/* ==UserStyle==
@name           e621-Flat
@namespace      https://e621.net/forum/show/275884 with edits
@version        1.0.0
@description    Makes e621.net flat and saves some space
@author         Syne Ardwin / RlctntFr
==/UserStyle== */
@-moz-document domain("e621.net") {
    body {
        background-image: none;
        background-color: #152f56;
    }
    #header {
        margin: 0 0 0 0;
        background-color: #031131;
    }
    #subnav {
        margin: 0 0 0 0;
        padding: 2px 20px 0px 15px;
        box-shadow: none;
        border-radius: 0px;
    }
    #ad-leaderboard {
        background: none;
        box-shadow: none;
        top: 0px;
        padding: 0px;
        margin-bottom: 12px;
        left: 3px;
    }
    #ad-leaderboard-content img {
        border-radius: 4px;
        box-shadow: none;
    }
    #content {
        margin: 0 0 0 0;
        box-shadow: none;
        padding: 10px 10px 10px 17px;
        border-radius: 0px;
    }
    .status-notice {
        top: 0px;
    }
    #notices {
        background-color: #152f56;
        padding: 0px;
    }
    #notices > * {
        margin: 5px 10px 0px;
    }

    span.thumb a {
        box-shadow: none;
    }

    input,
    textarea,
    select {
        box-shadow: none;
    }

    #paginator a {
        box-shadow: none;
    }

    .response-list > .comment,
    blockquote,
    .section {
        border-top: none !important;
        box-shadow: none !important;
    }

    .rounded {
        box-shadow: none;
    }
}

Updated by anonymous

Reposition Favorite button, make it vote up automatically.

// ==UserScript==
// @name        ESFav++
// @include     https://e621.net/post/show/*
// @include     https://e926.net/post/show/*
// ==/UserScript==
var li = document.getElementById("add-to-favs");
if (li)
{
  li.style.position = "fixed";
  li.style.right = "0";
  li.style.bottom = "50%";
  li.style.width = "auto";
  li.style.fontSize = "28pt";
  li.style.opacity = "0.8";
  var li = li.children[0];
  if (document.getElementById("voteup").className != "greentext")
  {
     li.setAttribute("onclick",li.getAttribute("onclick").replace("return false;",document.getElementById("voteup").getAttribute("onclick")));
  }
}

Updated by anonymous

I've overhauled this for the new site. Same concept but for the new theme.

  • 1