Knowledge Base Categories

Firefox userContent.css

Oct 17, 2021

Firefox allows the user to create a userContent.css file that it loads for every page. The trick, however, is that you write CSS queries that only act on certain domains/websites/webpages to redesign it at will. Think of it like going into the Developer Options and changing some CSS rules, but this way, they stick every time you browse to that webpage again.

Here's my userContent.css:

html {
  scrollbar-width: thin !important;
}

/* these styles will apply to all pages on the syosetu website */
@-moz-document domain(ncode.syosetu.com) {

/* You'll want at least this
 *
    #novel_header{
        position: relative!important;
        display: none;
    }*/

    *{
        background:#1c1b22 !important;
        color:#d9d9d9 !important;
    }

    a{
        text-decoration:underline!important;
    }

    #pageBottom,
    #pageTop,
    #novel_header,
    .box_announce_bookmark,
    .contents1,
    .wrap_menu_novelview_after,
    #impression,
    #novel_attention,
    .twitter-share-button,
    #novel_hyouka,
    #menu_on,
    .novelrankingtag,
    #novel_footer,
    #footer{
        display:none!important;
    }

    #container{
        margin: 20px auto 0;
    }
}

@-moz-document url-prefix("file:///home/james/Syosetu/"){
   *{
        /* background:#2b2a33 !important; */
        background:#1c1b22 !important;
        /* color:#c1bbed !important; */
        /* color:#c0bed7 !important */
        color:#d9d9d9 !important;
/*      font-size:20px!important; */
    
    }

    a{
        text-decoration:underline!important;
    }

   #container{
        margin: 20px auto 0;
    }

    #pageBottom,
    #pageTop,
    #novel_header,
    .box_announce_bookmark,
    .contents1,
    .wrap_menu_novelview_after,
    #impression,
    #novel_attention,
    .twitter-share-button,
    #novel_hyouka,
    #menu_on,
    .novelrankingtag,
    #novel_footer,
    #footer{
        display:none!important;
    }
}

@-moz-document domain(refold.la) {
    .header-module--header--_rwsu {
        position: static!important;
    }
}

@-moz-document domain(evolvepreneur.club){
    .left-side-menu {
    background: #683ba9!important;
    background-image: none!important;
    background-image: linear-gradient(270deg,rgba(64,149,216,.15),transparent)!important;
    }

    #side-menu li span, #side-menu li i{
        color: #d9d9d9!important;
    }

    .sidebar-profile h4 > a{
        color: #d9d9d9!important;
    }
}

@-moz-document domain(jamesnorth.net){
    .left-side-menu {
    background: #683ba9!important;
    background-image: none!important;
    background-image: linear-gradient(270deg,rgba(64,149,216,.15),transparent)!important;
    }

    #side-menu li span, #side-menu li i{
        color: #d9d9d9!important;
    }

    .sidebar-profile h4 > a{
        color: #d9d9d9!important;
    }
}

@-moz-document domain(evolvepreneur.app){
    .left-side-menu {
    background: #683ba9!important;
    background-image: none!important;
    background-image: linear-gradient(270deg,rgba(64,149,216,.15),transparent)!important;
    }

    #side-menu li span, #side-menu li i{
        color: #d9d9d9!important;
    }

    .sidebar-profile h4 > a{
        color: #d9d9d9!important;
    }
}

@-moz-document domain(healthyheartnetwork.com){
    .left-side-menu {
    background: #683ba9!important;
    background-image: none!important;
    background-image: linear-gradient(270deg,rgba(64,149,216,.15),transparent)!important;
    }

    #side-menu li span, #side-menu li i{
        color: #d9d9d9!important;
    }

    .sidebar-profile h4 > a{
        color: #d9d9d9!important;
    }
}

@-moz-document domain(automedsystems.com.au){
    .modal, .modal-backdrop{
        display: none!important;
    }

    .modal-open {
        overflow: auto!important;
    }
}