DLP Stylish Theme

Zombie · Mar 3, 2018

Massive WIP: Feedback Welcome.

This makes the side bar go to the bottom of the page, and removes the new post/ social aspects of of the sidebar.
So all that shows is admin/mods when they are active and then members and forum stats.

Also gets rid of the banner and the search box.

There are no color changes, but it should work with whatever default theme you have enabled. I use black/white because I'm colorblind.

Known issues:
Working on getting the search to show without the banner
New post button isn't visible at the top of the page, which it could be hidden behind something. I did remove the Breadcrumb and the footer on mine, which I'm enabling footer back because it has copyright on it.

the bottom sections might appear larger for some people, it looks fine for me, but I'm using FF and a larger monitor than most.

the donation bar I also turned off because I'm working on restyling it before turning it back on, it also has the added effect of not making it appear on the Donation page if you click the link on the main nav bar.

other weird effects you come across if you choose to use this, please let me know, I'm going to be working on this, and hope to release several different color variations with different things implemented.

I'm in no way an expect at HTML /CSS, so it probably looks atrocious to you, but it does what I want it to.

It also only works on FF version of Stylish atm... working on adding usability on Chrome. I just use FF as a primary browser.

Preview:
Code:
/* DLP CSS
 Zombie */


@-moz-document domain("forums.darklordpotter.net"){


/* Turning Stuff Off */

  .breadBoxTop{
    display:none !important;
    }



/* Turns off header image banner, and sets forum links to top of page */

    #logoBlock{
    display:none !important;
    }

    #headerProxy{
    margin-bottom: 0.625rem !important;
    padding-bottom: 0 !important;
    height:20% !important;
    }

/* Body Mods */
    body{
       font-family: "Helvetica Neue", "Arial" sans-serif !important;
    font-size: 1.125rem !important;
    }

    .mainContainer{
    margin-right:-0.625rem !important;
    }
 
    .mainContent{
    margin-right: 1.25rem!important;
    margin-left: 1.25rem !important;
    margin-top:6.25rem !important;
    margin-bottom: 1.25rem !important;
    background-color:red !important;                                  
    }

    a.navLink{
        color: #eee !important;
        font-size:1.25rem;
 
    }

    a.navLink:hover{

        color:#eee;
        text-transform:uppercase !important;
        font-weight:bold !important;
        font-size:1rem;
 
    }                
 
/* Side Bar Mods */

/* Sets Width of Side bar to a percentage */

    .sidebar{                                    
    Width:97.4%;
    height:20%;
    margin-right:1.25rem;                                    
    }

    /* Turns off Donation Goal */

   .DonationGoal {
    display:none !important;
    }
    .section.donationGoal{
    display:none !important;
    }

    /* Turns off Profile Post Recent Post */
    .profilePostList{
    display:none !important;
    }

    /* Turns off new post */

    .threadList{
    display:none !important;
    }

 
    /* Turns off the footer
    Comment out if you don't want that turned off.*/

    .footer{
    display:none !important;
    }
    .footerLegal{
    display:none !important;
    }

    }

Sey · Mar 4, 2018

A few things:

Cuts off profile page view

Sauce Bauss · Mar 4, 2018

Seyllian said: ↑

A few things:
View attachment 1513
Cuts off profile page view
Click to expand...

I feel like the prettiest girl in school~

Sey · Mar 5, 2018

Sauce Bauss said: ↑

I feel like the prettiest girl in school~
Click to expand...

You are bby

Zombie · Mar 5, 2018

Updated code. The profile page shouldn't be fucked anymore.

Can't figure out why your bottom is showing as off but mine is lined up. If you use the B/W theme does it persist?

I might have to do something in regards to different screen density.
Still no color changes.

New post button is still missing from other pages, only showing at the bottom, working on that currently.

New code:

Code:

/* DLP CSS
Created by Zombie */


@-moz-document domain("forums.darklordpotter.net"){


/* Turning Stuff Off */

  .breadBoxTop{
    display:none !important;
    }

   .titleBar{
    display:none !important;
    }

/* Turns off header image banner, and sets forum links to top of page */

    #logoBlock{
    display:none !important;
    }

   #headerProxy{
      height:6.25rem !important;
       }

/* Body Mods */
    body{
       font-family: "Helvetica Neue", "Arial" sans-serif !important;
    font-size: 1.125rem !important;  
    }

    .mainContainer{
    margin-right:-0.625rem !important;
    }
   
    .mainContent{
    margin-right: 1.25rem!important;
    margin-left: 1.25rem !important;
    margin-top:6.25rem !important;
    margin-bottom: 1.25rem !important;
    background-color:red !important;                                    
    }

    a.navLink{
        color: #eee !important;
        font-size:1.25rem;
 
    }

    a.navLink:hover{

        color:#eee;
        text-transform:uppercase !important;
        font-weight:bold !important;
        font-size:1rem;
   
    }                  
 
/* Side Bar Mods */

/* Sets Width of Side bar to 100 percent */

    .sidebar{                                      
    Width:97.4%;
    height:20%;
    margin-right:1.25rem;                                      
    }

    /* Turns off Donation Goal */

   .DonationGoal {
    display:none !important;
    }
    .section.donationGoal{
    display:none !important;
    }

    /* Turns off Profile Post Recent Post */
    .profilePostList{
    display:none !important;
    }

    /* Turns off new post */

    .threadList{
    display:none !important;
    }  
 
    }

Zombie · Oct 19, 2018

Update on this because I'm lazy, it just does what it did before, feel free to remove or comment out shit you don't need.

Code:

/*thread title, page descrip*/

.titleBar h1 {
    font-size: 1.25rem;
    font-weight: bold;
    padding-left: 0.725rem;
}

.breadcrumb {
    width: 50%;
}

#pageDescription{
    padding-left: 0.725rem;
}

/*turns off  thread tags */
.tagBlock {
    display: none;
}

/*moving search
doesn't work that well because the popup nav doesn't move with it, and I cbf to figure out how it works atm.*/

.primaryControls {
    position: relative;
    top: 18.65rem;
}



/*sidebar shit */
.sidebar {
    Width: 100%;
    height: 20%;
}

/* moving body*/
.mainContainer .mainContent {
    width: 100%;
}

/*hiding specific forums, think its some sub forums and the tech support forums.*/

.node_131 {
    display: none;
}
.node_144 {
    display: none;
}
.node_72 {
    display: none;
}
.node_150 {
    display: none;
}
.nodeTitle a {
    font-size: 15px;
}

/*killing userbanners */

.userBanner.bannerSecondary {
display:none;
}
.userBanner.bannerYellow {
display:none;
}
.userBanner.bannerSupporterKnut {
   display:none;
}
.userBanner.bannerPrestige {
display:none;
}
.userBanner.bannerGreen {
display:none;
    }

.userBanner.bannerSupporterSilver{
    display:none;
}

.userBanner.bannerSupporterGold{
    display:none;
}

Issues: Search bar is fucked, so turn that off, I don't even know why I left it in. Screen zoom breaks it. Working on a better way, one day.

Hidden forums and title bars are my preference only, for when I'm on mobile, so feel free to remove or turn that off. This just primarily moves the side bar to the bottom of the site and sets the forum width to 100 percent.

Zombie · Oct 25, 2018

Update on this:

Code:

/*Removing Stuff I don't Use
Userbanners
Simplified, turns everything off. */

.userBanner {
  display: none!important;
}

/* Custom, pick what you want. Comment out what you want.
These are here if I want to theme them later, which I probably will.

 Old DLP Support Donation Banner, legacy */

/* .userBanner.bannerYellow {
    display: none;
} */

/* New, first Tier DLP Donation Banner */

/* .userBanner.bannerSupporterKnut {
    display: none;
} */

/* Tier 2, Donation banner */

/* .userBanner.bannerSupporterSilver {
    display: none;
}
 */

/* Tier 3, Donation Banner
 */

/* .userBanner.bannerSupporterGold {
    display: none;
} */

/* Mod Banner */

/* .userBanner.bannerGreen {
    display: none;
}
 */

/*gets rid of logo and space at the top, fixes formatting on other pages*/

#logoBlock {
  display: none;
}

#headerProxy {
  height: 55px !important;
}

/*turns off  thread tags */

.tagBlock {
  display: none;
}

.profilePostList {
  display: none;
}

/*changing the body*/

.pageContent {
  background-color: black !important;
}

.breadcrumb {
  width: 50%;
  background-color: black !important;
}

#pageDescription {
  padding-left: 0.725rem;
  background-color: black !important;
}

.pageNavLinkGroup .PageNav {
  background-color: black !important;
}

#moderatorBar {
  background-color: black !important;
  border-bottom: none !important;
}

.pageNavLinkGroup,
.tabs {
  background-color: black;
}

.titleBar h1 {
  background-color: black !important;
  font-size: 1em !important;
  font-weight: bold !important;
  margin-left: .725rem;
}

/* sets body to 100 percent and lines the
sidebar up evenly along the bottom of the forum.*/

.mainContainer .mainContent {
  width: 100%;
}

.sidebar {
  Width: 100%;
  height: 20%;
}

/*messing with the forum categories*/

.nodeInfo.categoryStrip .nodeTitle {
  font-weight: bold !important;
  text-transform: uppercase;
}

.categoryStrip {
  border-top-left-radius: 0px!important;
  border-top-right-radius: 0px!important;
  background-color: #212121!important;
  border-bottom: 0px !important;
  border-top: 0px!important;
  padding: 5px 10px 5px !important;
  font-family: Krub !important;
  min-height: 0px !important;
}

.nodeList .node.level_1 {
  margin-bottom: 0px;
}

.nodeTitle a {
  font-size: 15px;
}

.nodeInfo a,
.nodeStats,
.nodeLastPost {
  font-size: 10px !important;
}

.nodeList > .level_2 > .forumNodeInfo,
.nodeList > .level_2 >.categoryForumNodeInfo {
    height: 90px!important;
}

/*navbar*/

/*gets rid of link text*/

.navTabs .alerts a {
  font-size: 0!important;
  line-height: 0;
}

.navTabs .alerts i {
  font-size: 16pt;
  margin-top: 10px;
  margin-left: 5px;
}

.navTabs .inbox a {
  font-size: 0 !important;
  line-height: 0;
}

.navTabs .inbox i {
  font-size: 16pt;
  margin-top: 10px;
  margin-left: 5px;
}

/*fontsize for navbar*/

.navTabs a {
  font-size: 10px !important;
}

#AlertsMenu {
  font-size: 8px !important;
}

#AlertsMenu a {
  font-weight: bold;
}



.navTab .itemCount {
  background-color: #946B2B!important;
  padding: 3px !important;
  font-weight: bold!important;
}

.footer,
.footerLegal {
  background-color: black;
  border-top: 0px;
}

#searchBar {
  position: relative;
  top: 19rem !important;
  right: -.75rem;
}

/*new posts, markForumsAsRead, RecentPosts*/

.linkGroup a{
    height:15px;
    width: 120px;
    text-wrap: none!important;
    overflow:hidden!important;
    padding: 10px 20px;
    display:inline-block;
    border-radius:0px;
    border: 1px  none #212121;
    Font-weight:bold;  
    line-height:1;
}

.tabs a {
    position:relative;
    top:45px;
    background-color: #303030 !important;
    padding:6px 20px !important;
    margin-left: 10px!important;
    width:120px;
    text-align:center;
    display:inline-block;
    text-decoration:none;
    font-size:13px!important;
    border-radius:0px;
    border-right: 1px  none #212121;
    Font-weight:bold;  

   
}
.tabs a:hover{
    color:#c3cac7 !important;
    text-decoration: none;
    background-color: rgb(148, 148, 148) !important;
    border-radius:0px;
}

Still stuff to do on it. Got search where I wanted it, but might appear wonky depending on your zoom and screen resolution. Lemme know and I can fix it for you.

I've not done anything to thread previews, or the threads themselves other than remove userbanners, which I commented at the top of the code clearly what you can do with that if you so desire, either to turn off one item at a time, or all of it, or a specific banner type. I made it more accessible because I like keeping the moderator banners on, and I do like the prestige banners. Eventually, I'm gonna style the tier'd level banners users get from donations to be a bit cooler.

Sub menus, navbar, and a couple other things are going to change.

The sidebar is at the bottom of the screen and is set to 100 percent width. I'm gonna eventually theme each box there, it just takes time to go through and fix different things. I've changed some of the buttons to be larger, but not all of them, consider that a WiP.

I also plan to implement color changes to the forums in general for House Colors, so, if people are interested, go here and search the house names and pick from there what you think is DLP enough, and I'll work on something for it. I've been meaning to do this for a long time, and I've just had the time recently to dedicate to it.

Not everything is to everyone's taste, I'm sure. I've eliminated border-radius in a lot of cases because I like nice crisp. lines v. rounded edges.

I'll keep updating here as I go.

Thanks.

Edit: Link Text Size is a work in progress. I've not decided on an overall theme and what I want to do with it, so I'll eventually get it back up to size. So sorry, if the text size is too small. Looks pretty good to me.

enembee · Oct 25, 2018

Figured I'd hijack Zombie's thread to post my own stylish theme. It's generally more aesthetic and userfriendly than the standard DLP incog skin.

Disclaimer: YMMV. I only bothered with bits of the site that I use with any regularity, so there's every chance that some functions or features might be totally borked.

[IMG]

Further screenshots: Thread List Thread View

Code:

/* # Imports

    > Brings in a font for the navigation bar.

*/

@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');

/* # Page Structure

    > Sets the page to use flex-box in a column orientation for stacking purposes.

*/

html, body {
    height: 100% !important;
}

body {
    display: flex;
    flex-direction:column;
}


/* ## Header Fix

    > Removes the banner and unneccessary spacing from the top of the page.

*/

#headerProxy {
    display: none;
}

#header {
    height: 0px;
}

#header .logoRight {
    display:none;
}

.titleBar > img {
    display:none;
}

/* ## Footer Fix

    > This uses the flex-box property of body to push the footer right to the bottom even on undersized pages.
    >It also widens the container out to cover the bottom of the page, but keeps the footer content in line with the primary content

*/

#headerMover {
    padding-top: 100px;
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    padding: 0px;
    margin: 0px;
}

#footer > * {
    width: 100% !important;
}

.footer, .footerLegal {
    box-sizing: border-box;
    width: 100%;
    max-width: 100% !important;
}

/* # Nav Bar

    > Fixes the navbar to the top-left corner of the page and makes it full width;

*/

#navigation .pageContent {
    height: auto;
}

.pageContent > nav {
    position:fixed;
    top:0;
    left:0;
    width: 100%;
}

/* ## Search Bar

    > WIP: Fixes the search bar to the nav menu, converts it into an icon when the screen is below 1600px wide (the point at which the navbar content is too long)

*/

@media only screen and (max-width: 1600px) {
    #QuickSearch {
        display: none;
    }
    #QuickSearchPlaceholder {
        height: 30px;
        width: 30px;
        display: block;
        top: 0;
        margin: 0px;
        padding: 0px;
        background:none;
        border-radius: 0;
    }
    #QuickSearchPlaceholder.hide {
        display:block;
    }
    #QuickSearchPlaceholder:after {
        display: block;
        top: 0;
        left: 0;
        margin-top: -7px;
        text-indent: 0;
        content: '\2315';
        font-size: 35px;
        line-height: 0px;
    }
}

#searchBar {   
    position: fixed;
    right: 225px;
    top: 5px;
}

fieldset#QuickSearch {
    position: absolute;
    top: 0;
}

/* # Nav Bar Styling

    > WIP: Makes the Navbar look prettier.

*/

.navTabs {
    font-family: 'Ropa Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navTabs .publicTabs .navLink {
    font-weight: bold;
    font-size: 10pt;
    padding: 0px 10px;   
}

li.selected {
    background: rgba(255,255,255,0.1) !important;
}

.tabLinks {
    left: 0px;
    max-width: none;
    display:none;
}

/* ## Notifications and User Image

    > WIP: Removes the text for the messages and notifications, leaving just the icon. Does a few other style-related things.

*/

.miniMe {
    border-radius: 15px !important;
    margin-right: 10px !important;
}

.navTabs .inbox a {
    font-size: 0;
    line-height: 0;
}

.navTabs .navLink .itemCount {
    left:unset;
    padding:2px;
    text-align:center;
    right: 15px;
    width: 10px;
    height: 10px;
    border-radius:50% !important;
}

li.selected:hover > .tabLinks {
    display: block;   
}
.navTabs .inbox i {
    font-size: 16pt;
    margin-top: 10px;
    margin-left: 5px;
}

.navTabs .alerts a {
    font-size: 0;
    line-height: 0;
}

.navTabs .alerts i {
    font-size: 16pt;
    margin-top: 10px;
    margin-left: 5px;
}

.navTab.inbox:hover, .navTab.alerts:hover {
    opacity: 1 !important;
}

/* # Content Styling

    > Makes the bulk of content on the website look pretty :3
    > First section defines some colours, so feel free to change those if you want.
*/

/* > this might make the last poster a bit more visible, ymmv.

.node .nodeLastPost .lastThreadUser a {
    color: #fff;
} */

.navTabs .navTab.selected > a.navLink {
    background: rgba(255,180,0,0.5);
    color: #fff;
}

.node .nodeLastPost .lastThreadTitle a  {
    color: rgba(129, 214, 153,0.75) !important;
}

.sidebar .muted, .sidebar .muted a, .nodeStats > li > span, .pairsJustified dt, .pairsJustified .major dd:after, .pairsJustified .minor dd:after {
    color: rgba(255,255,255,0.3) !important;
}

.sidebar .muted:hover a {
    color: #fff !important;
}

li.node.level_2 {
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}

li.node.level_2:last-child {
    border-bottom: none !important;
}

li.node.level_2:nth-child(odd), li.discussionListItem:nth-child(odd) {
    background: rgba(255,255,255,0.05)
}

h3.nodeTitle > a, .secondaryContent h3 a, .secondaryContent h3 {
    color: #fff !important;
}

.sidebar > .section > .secondaryContent  {
    background: #0a1c0b;
}

.secondaryContent .minorHeading, .secondaryContent .footnote {
    color: #bad6c2 !important;
}

.secondaryContent ul > li:nth-child(odd) {
    background: rgba(255,255,255,0.05)   
}

.discussionList .sectionHeaders {
    background: #0a1c0b;
    border-bottom: 3px solid #bad6c2 !important;
}

.discussionList .sectionHeaders dt, .discussionList .sectionHeaders dd {
    background: #0a1c0b;
}

.discussionListItems > * {
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}

.discussionList .sticky {
    margin-top: -3px;
    border-bottom: 3px solid #bad6c2 !important;
}

.discussionList .sticky:first-child {
    margin-top: 0px !important;
}

.discussionListItems .unread .title a {
    color: rgba(129, 214, 153,0.75) !important;
}

.discussionListItem .title a {
    color: rgba(200,230,200,1);
}
    
/*


hides the majority of unneccessary background colour definitions.

*/

.pageContent, .mainContent {
    background: none !important;
}

.titleBar > * {
    background: none !important;
}

li.node.level_1 {
    margin-bottom: 50px !important;
}

li.node.level_2 > .nodeInfo {
    border-bottom: 0px !important;
}



/* ## Bread Crumbs Restyling

    > Cleans up the WTF of breadcrumbs 

*/

.breadBoxTop {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.crumb {
    display: block;
    float:left;
    padding: 0px !important;
    margin-right: 5px;
    text-transform:  uppercase !important;
    font-size: 8pt !important;
}

span.crumbs span.arrow {
    right: unset !important;
    left: unset !important;
    display: block !important;
    float:left !important;
    min-width: 10px !important;
    min-height: 10px !important;
    z-index: 0 !important;
    position: relative !important;
    content: '';
}

span.arrow span {
    position: relative !important;
    left: unset !important;
    top: unset !important;
    
}

/* ## Post Information Styling

    > Tidies up the post data sections: threadcounts, last post, that sort of thing.

*/

.nodeStats > li {
    position:relative;
    text-align:center;
    padding: 0px !important;
    padding-bottom: 15px !important;
    font-size: 13pt;
}

.nodeStats > li > span {
    text-transform:uppercase;
    position: absolute;
    bottom: 0px;
    text-align:center;
    width: 100%;
    font-size: 7pt !important;
}

li.node.level_2 > .nodeInfo > .nodeLastPost {
    background: none !important;
}


/* ### Last Post Information Styling

    > Cleans up the Last Post section for clearer visibility at a glance. 

*/

li.node.level_2 > .forumNodeInfo, li.node.level_2 > .categoryForumNodeInfo {
    margin-bottom: 5px;
    background: none !important;
}

.node .nodeLastPost {
    font-size: 0pt;
}

.node .nodeLastPost abbr, .node .nodeLastPost .lastThreadUser a {
    font-size: 8pt;
}

.node .nodeLastPost .lastThreadUser a {
    float:left;
    font-weight: bold;
}

.node .nodeLastPost abbr {
    text-transform:uppercase;
}

.node .nodeLastPost abbr:before {
    display: inline-block;
    content: '\00a0\00a0 |\00a0\00a0'
}

.node .nodeLastPost .lastThreadTitle {
    font-size: 10pt;
    font-weight: bold;
}

/* ### Forums Restyling

    > Cleans up the main page forums 

*/

.nodeIcon:after {
    font-size: 25px !important;
    line-height: 1.5 !important;
}

li.node, .categoryNodeInfo {
    border-radius: 0 !important;
    border: 0px !important;
}

.categoryNodeInfo{
    background: none !important;
}

.categoryNodeInfo > .categoryText > h3 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-weight: bold !important;
    letter-spacing: 2px;
    text-transform:uppercase;
    font-size: 10pt !important;
}

.lastThreadTitle > span {
    display:none;
}

.primaryContent.menuHeader {
    display:none;
}

.subForumsMenu {
    scrollbar-width: 10px;
}

.blockLinksList::-webkit-scrollbar-track
{
    background: #122211;
}

.blockLinksList::-webkit-scrollbar
{
    width: 12px !important;
    background-color: #F5F5F5;
}

.blockLinksList::-webkit-scrollbar-thumb
{
    background: #000;
}

/* ### Side Bar Restyling

    > Cleans up the main page side bar 

*/

.sidebar > .section {
    background: none !important;
}

.sidebar > .section > .secondaryContent {
    border-radius: 0px;
    border: none !important;
}

.secondaryContent h3, .secondaryContent h3 a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-weight: bold !important;
    letter-spacing: 2px;
    text-transform:uppercase;
    font-size: 10pt !important;
}

.secondaryContent .minorHeading {
    background: none !important;
    border: none !important;
    padding: 0px !important;
    margin: 5px 0 10px 0 !important;
}

.secondaryContent .ProgressMeter {
    border-radius: 0;   
}

.DonationGoal .ProgressMeter .ProgressGraphic {
    background: rgb(28, 141, 79) !important;
}

.DonationGoal .ProgressMeter .ProgressCounter {
    color: #fff !important;
    font-size: 12pt;
    font-weight: bold;
}

.donateButton:before {
    display: block;
    background: rgba(255,180,0,0.5);
    border: 1px solid rgba(255,180,0,0.5);
    width: 100%;
    color: #fff;
    text-align:center;
    text-transform:uppercase;
    line-height: 25px;
    font-weight: bold;
    content: 'Donate' !important;
}

.donateButton img {
    display: none !important;
}

.sidebar .secondaryContent .footnote {
    background: none !important;
    font-size: 8pt !important;
}

.sidebar .secondaryContent .username, .secondaryContent .title, .secondaryContent .title a {
    margin-top: -4px !important;
    padding: 0px !important;
}

.threadList .secondaryContent ul, .avatarList .secondaryContent ul, .profilePostList .secondaryContent ul {
    margin-left: -10px;
    margin-right: -10px;
}

.threadList .secondaryContent ul li, .avatarList .secondaryContent ul li, .profilePostList .secondaryContent ul li {   
    padding: 10px !important;
    margin: 0;
}

.threadList .secondaryContent ul li .additionalRow {
    font-size: 8pt;
}

.threadList .secondaryContent ul li .title {
    font-weight: bold;
}

.sidebar textarea {
    min-height: 30px !important;
    height: 30px !important;
    border: 0px;
    font-size: 10pt !important;
}

.sidebar form {
    display:block;
    width: 100%;
}

.sidebar .statusEditorCounter {
    display: block;
    font-size: 8pt;
    width: 50%;
    float: right;
    text-align: right;
}

.sidebar textarea:focus {
    height: 50px !important;
}

.sidebar .submitUnit {
    display: none !important;
}

.sidebar textarea:focus + .submitUnit {
    display: block !important;
}

.sidebar .statusPoster {
    margin-top: 5px;
    margin-bottom: 10px;
}

/* #### IRC Chat Restyle

    > Makes the IRC Chat vaguely readable. This is still hugely problematic.

*/

.App {
    border: 1px solid rgba(255,255,255,0.1);
    padding: 5px 0px 5px 5px !important;
}

.App header {
    display: none; /* personal preference */
    background: rgba(0,0,0,0.2);
    padding-left: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.App header div {   
    font-size: 8pt !important;
    text-align: center;
}

.App section {
    scrollbar-width: 10px;
}

.App section::-webkit-scrollbar-track
{
    background: #122211;
}

.App section::-webkit-scrollbar
{
    width: 12px !important;
    background-color: #F5F5F5;
}

.App section::-webkit-scrollbar-thumb
{
    background: #000;
}

.App section {
    font-size: 9pt;
}

.app section .box {
    clear:both;
}

.box > * {
    margin-top: 5px;
    display: flex !important;
    flex-direction: row;
    max-width: 100%;
}

.App section .event-date {
    display: block !important;
    height: 100%;
    float: left;
}

.App section .event-message {
    display: block !important;
    max-width: 80%;
}




/* ### Thread Restyle

    > Fixes Threads.

*/

.titleBar h1 {
    font-weight: bold;
    font-size: 36pt;
}

#pageDescription {
    color: #ddd !important;
}

.nodeListNewDiscussionButton {
    width: 16%;
    float: right;
    margin-top: 0px;
}

.nodeListNewDiscussionButton > a.callToAction {
    padding: 0;
    margin: 0;
}

.nodeListNewDiscussionButton > a.callToAction > span {
    height: 50px;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 10px !important;
    margin: 0px !important;
    font-size: 12pt;
    font-weight: bold;
    color: #fff;
}

.nodeListNewDiscussionButton > a.callToAction > span:before {
    position:relative;
    bottom: 2px;
    content: '+';
    line-height: 0.5;
    margin-top: 3px;
    font-size: 25pt;
    margin-right: 5px;
    float:left;
}

.PageNav {
    background: none !important;
    padding: 0px;
    margin:0px;
}

.PageNav > nav a {
    min-width: 50px;
    min-height: 50px;
    border: 0px !important;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 15px !important;
    margin: 0px !important;
    margin-right: 5px !important;
    font-size: 12pt;
    font-weight: bold;
}

.PageNav > nav a:hover {
    border-radius: 0px;
}

.PageNav .scrollable {
    height: 50px;
    width: 165px;
    background: none !important;
}

.pageNavLinkGroup {
    position: relative;
    display: block;
    background: none !important;
}


.pageNavLinkGroup:after, .pageNavLinkGroup:after {   
  content: " ";
  display: table !important;
  clear: both !important;
}

.discussionList, form.section {
    clear: both !important;
}

.linkGroup a {
    min-width: 50px;
    min-height: 50px;
    border: 0px !important;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 15px !important;
    margin: 0px !important;
    margin-left: 10px !important;
    font-size: 12pt;
    font-weight: bold;
    color: #fff;   
}

.breadBoxTop {
    overflow: visible;
}

.topCtrl > a.callToAction {
    height: auto;
    display: block;
    position: relative;
}

.topCtrl > a.callToAction > span {
    min-width: 50px;
    min-height: 50px;
    border: 0px !important;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 10px !important;
    margin: 0px !important;
    font-size: 12pt;
    font-weight: bold;
    color: #fff; 
}

.topCtrl > a.callToAction > span:before {
    position:relative;
    bottom: 2px;
    content: '+';
    line-height: 0.5;
    margin-top: 3px;
    font-size: 25pt;
    margin-right: 5px;
    float:left;
}

.discussionList {
    margin: 0;
    padding: 0;
}

.discussionList .sectionHeaders {
    margin: 0;
    text-transform: uppercase;
    font-size: 8pt;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}

dt.posterAvatar {
    content: 'blah';
    flex-basis: 5%;
    height: 100%;
}

dd.main {
    flex-basis: 70%;
}

dd.stats {
    text-align: center;
    flex-basis: 12.5%;
}

.discussionList .sectionHeaders .stats .minor {
    text-align: center;
}

dd.lastPost {
    flex-basis: 12.5%;
}

.discussionList ol.discussionListItems {
    border-radius: 0;
    border: 0;
}

li.discussionListItem {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 0px;
    background: none;
}

li.discussionListItem > div {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0px;
}

li.discussionListItem .posterAvatar {
    flex-basis: 5%;
}

li.discussionListItem .main {
    flex-basis: 70%;
}

li.discussionListItem .stats {
    flex-basis: 12.5%;
}

li.discussionListItem .lastPost {
    flex-basis: 12.5%;
}

.discussionListItem .title {
    font-size: 17px;
    margin-bottom: 3px;
}

.discussionListItem .title a {
    font-weight: bold;
}

.discussionListItem .secondRow {
    width: 100%;
}

.discussionListItem .secondRow .posterDate.muted {
    margin-top: 2px;
    padding-left: 10px;
    font-size: 9pt;
    min-height: 18pt;
}

.discussionListItem .secondRow .muted > a:after {
    content: '\00a0\00a0 |\00a0\00a0';
}

.discussionListItem .secondRow .muted .itemPageNav {
    float:left;
}

.discussionListItem .secondRow .muted .username {   
    float:left;
    font-weight: bold;
}

.discussionListItem .secondRow .muted .startDate {
    font-size: 0;
    text-transform:uppercase;
}

.discussionListItem .secondRow .muted .startDate a {
    float:left;
    font-size: 9pt;
}

.discussionListItem .prefix, .searchResult .prefix {
    box-sizing: border-box;
    position:relative;
    top: -2px;
    border: 0 !important;
    text-align:center;
    height: 18px;
    width: 18px;
    border-radius: 15px !important;
    line-height: 1;
    font-size: 0pt;
    padding: 4px 4px !important;
    margin-bottom: 0px;
}

.discussionListItem .prefix:first-letter, .searchResult .prefix:first-letter {
    font-size: 8pt;
    visibility: visible;
}

.discussionListItem .prefix:hover, .searchResult .prefix:hover {
    border: 0 !important;
    border-radius: 15px !important;
}

.threadTagsInline {
    float:left;
    line-height: 1;
    max-width: 550px;
    max-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 20px;
}

.tagBlock {
    margin: 0 !important;
}

.tagList .tag {
    border: 0;
    border-radius: 15px;
    line-height: 1;
    height: 11px;
    font-size: 8pt;
    padding: 3px 8px !important;
    margin-bottom: 0px;
}

.discussionListItem .posterAvatar, .discussionListItem .stats, .discussionListItem.sticky .posterAvatar, .discussionListItem.sticky .stats {
    background: none !important;
}

.discussionListItem .stats {
}

.discussionListItem .stats .major, .discussionListItem .stats .minor {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 50%;
    height: 100%;
    margin: 0px;
    float:left;
    position: relative;
}

li.discussionListItem .pairsJustified dt, li.discussionListItem .pairsJustified dd {
    display:block;
    float:none;
    width: 100%;
    text-align: center;
    line-height: 1;   
    font-size: 13pt;
    position:relative;
    height: 60%;
}

li.discussionListItem .pairsJustified .major dd:after {
    content: 'Replies';
}

li.discussionListItem .pairsJustified .minor dd:after {
    content: 'Views';
}

li.discussionListItem .pairsJustified .major dd:after, li.discussionListItem .pairsJustified .minor dd:after {
    font-size: 7pt;
    margin-top: 5px;
    display:block;
    width: 100%;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    text-align:center;
}

li.discussionListItem .pairsJustified dt {
    display:none;
}

.discussionListItem .lastPost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;   
}

.discussionListItem .lastPostInfo {
    width: 100%;
}

.discussionListItem .lastPost .DateTime {
    font-size: 10pt;
}

.discussionListItem dd.muted, .discussionListItem dd.muted a.username {
    font-size: 8pt;
}

/*  ### Thread View Styling
    > Fixes the thread view styling
*/

.tagBlock + .pageNavLinkGroup {
    float:left;
    min-width: 85.5%;
}

.threadmarkMenus {
    float:right;
    overflow:hidden;
}

.threadmarkMenus a {
    background-color: rgb(33, 48, 31);
    width: 155px;
    min-height: 50px;
    border: 0px !important;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 15px !important;
    margin-left: 10px !important;
    font-size: 12pt;
    font-weight: bold;
    color: #fff;
}

ol.messageList > li.message,
ol.messageList > li.message .messageContent,
ol.messageList > li.message .primaryContent,
ol.messageList > li.message .messageUserBlock,
ol.messageList > li.message .avatarHolder,
ol.messageList > li.message .userText,
ol.messageList > li.message .extraUserInfo,
ol.messageList > li.message .messageUserInfo,
ol.messageList > li.message .threadmarker,
ol.messageList > li.message .threadmarker .label,
ol.messageList > li.message .messageMeta,
.threadmarker_nav_top .previous a,
.threadmarker_nav_top .index a,
.threadmarker_nav_top .next a {
    background: none !important;
}

DLP Flash Christmas Competition + Writing Marathon 2024!

Hi there, Guest

DLP Stylish Theme

Zombie Black Philip Moderator DLP Supporter ⭐

Sey Not Worth the Notice DLP Supporter

Sauce Bauss Second Year ~ Prestige ~ DLP Supporter

Sey Not Worth the Notice DLP Supporter

Zombie Black Philip Moderator DLP Supporter ⭐

Zombie Black Philip Moderator DLP Supporter ⭐

Zombie Black Philip Moderator DLP Supporter ⭐

enembee The Nicromancer DLP Supporter

DLP Flash Christmas Competition + Writing Marathon 2024!

Hi there, Guest

DLP Stylish Theme

Zombie Black Philip Moderator DLP Supporter ⭐

Sey Not Worth the Notice DLP Supporter

Sauce Bauss Second Year ~ Prestige ~ DLP Supporter

Sey Not Worth the Notice DLP Supporter

Zombie Black Philip Moderator DLP Supporter ⭐

Zombie Black Philip Moderator DLP Supporter ⭐

Zombie Black Philip Moderator DLP Supporter ⭐

enembee The Nicromancer DLP Supporter

Useful Searches