1

Topic: Alternative look

I use next-episode quite alot but find its layout and colors a bit off at times..so I fired up Stylus and changed some of it. (stylus is CSS changer browser addon). Thought I present some screens here of it.

Its not a critic against the normal looks of the site, but the look i personally would like it to be.  Currently I am not sharing the code as its not perfect, several pages I haven't done because the HTML code makes it..a bit diffcult. And its for the dark version, no idea if its working on the light verson as i don't use it.

So hopefully it would spark some interest in the developer(s) of the site to change stuff at some point. smile
https://raw.githubusercontent.com/Bloc67/imgvault/refs/heads/main/Screenshot%20from%202025-08-22%2001-37-43.png
https://raw.githubusercontent.com/Bloc67/imgvault/refs/heads/main/Screenshot%20from%202025-08-22%2001-38-09.png

2

Re: Alternative look

Did some updates to how the Dark Mode looks.

Thoughts?

3

Re: Alternative look

santah wrote:

Did some updates to how the Dark Mode looks.

Thoughts?

Honestly, I prefer the blue text over the white.
The grey colour for the header looks great, really like it.

Deserved more runtime:
Abbys | Dead Like Me | Devs | Firefly | Gangsta. | Jack of all Trades | Kevin (probably) saves the World | Lodge 49 | Mrs. Davis | NYC 22 | Powerless | Roadkill | Special Unit 2 | Stumptown | Surface | The Brave | The Crazy Ones | The Finder | The Middleman | Truth Seekers | Two Weeks to Live | Whiskey Cavalier

https://next-episode.net/user/WilliamDrakeMcGregor/

4

Re: Alternative look

I noticed it looked different.

Maybe there is too much grey now?
Especially in section " Latest topics from the forums"

DRM "manages access" in the same way that Prison "manages freedom".
http://xkcd.com/488/

5

Re: Alternative look

Just noticed that the search box has now light grey text on a slightly darker grey background.
A bit difficult to read imho, would suggest white text (if you stay with white smile ).

Deserved more runtime:
Abbys | Dead Like Me | Devs | Firefly | Gangsta. | Jack of all Trades | Kevin (probably) saves the World | Lodge 49 | Mrs. Davis | NYC 22 | Powerless | Roadkill | Special Unit 2 | Stumptown | Surface | The Brave | The Crazy Ones | The Finder | The Middleman | Truth Seekers | Two Weeks to Live | Whiskey Cavalier

https://next-episode.net/user/WilliamDrakeMcGregor/

6

Re: Alternative look

Nice. smile Agreed that input boxes need darker background though.

I am posting the CSS styles  i use, if anyones interested. But as mentioned - its not complete.

* {
    box-sizing: border-box;
    font-size: 1rem !important;
}
#main_table {
    width: 100%;
    max-width: 1400px;
}
#resizeTable tr:nth-of-type(2)  {
    display: grid;
    grid-template-columns: 1fr 15rem;
    font-size: 1rem !important;
}
#resizeTable tr:nth-of-type(2)  > td {
    width: 100%;
    padding-right: 1rem;
}
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) span {
    display: inline !important;
    line-height: 1.5rem;
}
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) div:not(.header) {
    line-height: 1.5rem;
}
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) span > br:nth-of-type(2) ,
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) br {
    display: none;
}

#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) div.header + br {
    display: none;
}
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) div.header,
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 b:has(a) a {
    background: none;
    display: block;
    padding: 0.2rem !important;
    border-bottom: solid 1px #fff4;
    margin:1rem 0 0.2rem 0;
    color: coral !important;
}
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) div:has(+ div){
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 1fr auto;
}
#resizeTable tr:nth-of-type(2)  > td:nth-of-type(2) div:has(+ div) > div {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0.3rem 0 0;
    float: none !important;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 b:has(a) a {
    padding: 0 0 0.2rem 0 !important;
    margin: 0 0 0.5rem 0 !important;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 br + br {
    display: none;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 b + br {
    display: none;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr  {
    display: grid;
    grid-template-columns: 15rem 1fr;
    font-size: 1rem !important;
}
#resizeTable tr:nth-of-type(2) > td > table tbody   tr td.tdc1 {
    width: 100%;
    border-right: solid 1px #fff2;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 div a {
    opacity: 0.6;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 b a,
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 a.wl_gray_h {
    color: lightblue !important;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td#watchliststring.tdc1 a.wl_grey_h {
    background: #0488 !important;
    color: #fff !important;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 b a {
    color: #fff !important;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 a:has(+ span) {
    color: #ffff !important;
    font-weight: bold;
}

#resizeTable tr:nth-of-type(2) > td > table tbody tr td.tdc1 span {
    font-size: 0.8rem !important;
 }

/* middle */
#resizeTable tr:nth-of-type(2)  table#index_table  tbody tr {
    grid-template-columns: 1fr;
    padding-left: 1rem;
}
#resizeTable tr:nth-of-type(2)  table#index_table tbody tr  * {
    padding: 0 !important;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.footer { 
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.footer div{ 
    display: none;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr td strong h2{ 
    padding: 0 0 0.5rem 0 !important;
    margin: 0.5rem 0 !important;
    border-bottom: solid 1px #fff4;
    width: 100%;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.footer .homeitem { 
    width: 100%;
    margin: 1rem 0 0 0;
    display: grid;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container { 
    display: grid;
    gap: 0.5rem;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container span:nth-of-type(2) { 
    display: grid;
    gap: 0;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container span:nth-of-type(2) > div { 
    padding: 0 !important;
    margin: 0 !important;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container span.footer ,
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container span.footer a { 
    display: flex;
    float: none;
    flex-wrap: wrap;
    gap: 0.3rem;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container span.footer div:first-of-type { 
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container img { 
    height: 100% !important;
    width: 100% !important;
    display: block;
    float: none !important;
}
#resizeTable tr:nth-of-type(2) table#index_table .no_episodes_homepage {
    display: block;
    margin-bottom: 0;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container span.footer.widget_item1  { 
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(13rem,1fr));
    grid-gap: 1rem;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container .homeitem { 
    position: relative;
    height: auto !important;
    width: 100% !important;
    display: block;
    float: none !important;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container .homeitem > div:first-of-type { 
    position: absolute;
    background: #fff;
    box-shadow: 0 0 5px #000a;
    width: 100%;
    height: 2rem !important;
    overflow: hidden;
}
#resizeTable tr:nth-of-type(2) table#index_table tbody tr span.widget_container .homeitem > div:first-of-type img { 
    height: 1rem !important;
    width: 1rem !important;
    left: 45%;
    top: 0.2rem;
    position: absolute;
}

/* header                              */
#header * {
    font-size: 0.9rem !important;
    color: #fff8;
}
#main_table table#header input {
    background: black !important;
    color: #fff;
    height: auto;
    padding: 0.4rem 0.5rem;
}
#main_table table#header a.link3 {
    background: teal !important;
    color: #fff;
    box-shadow: 2px 2px 5px #0002;
}
#main_table table#header, #main_table table#header .td4 {
    background: #8bf1 !important ;
}
.notif2 {
    background: royalblue;
    font-weight: bold;
    color: white;
    display: block;
    position: absolute;
    z-index: 4;
    right: -0.5rem;
    top: -0.8rem;
    width: auto;
    height: auto;
    line-height: 0.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 2px 2px 5px #0008;
}
#resizeTable table#index_table tbody tr  .orangebutton a {
    background: teal;
    border-radius: 3px;
    margin: 0.2rem 0;
    color: white;
    padding: 0.5rem 1rem !important;
    font-size: inherit !important;
    display: block;
}

#resizeTable table#index_table tbody tr  .orangebutton br {
    display: none;
}
#resizeTable table#index_table tbody tr  .forum_item {
    line-height: 1.4rem;
}
#resizeTable table#index_table tbody tr #home_widget_container > span > span.widget_item3 {
    padding: 0 !important;
    margin: 0 !important;
}
#resizeTable tbody tr  td  {
    overflow: hidden;
    width: 100%;
}
#resizeTable tbody tr  td table tbody tr td.tdc2 {
    width: 100%;
}
.castitem {
    display: inline-block;
    width: 325px;
    height: 210px;
}
.castitem span a img {
    width: 142px;
    height: 200px;
}
.homeitem span + br {
    display: none;
}
#resizeTable tr:nth-of-type(2) > td > table tbody tr:has(td:nth-of-type(3)) {
    grid-template-columns: 1fr;
}

7

Re: Alternative look

santah wrote:

Did some updates to how the Dark Mode looks.

Thoughts?

The new white text looks too bright, honestly. I like good contrast, but it's kinda glaringly bright against the grey/black background, to the point of being uncomfortable. Maybe just add a bit of grey into it to tone it down?

8

Re: Alternative look

It's not white though, it's #efefef (and it's not on the text, but on the links).

Darker than that, and there wouldn't be enough contrast to the actual text (which is currently #a4a8a4)?

9

Re: Alternative look

Interesting. Don't really see the gray in there on the dark background (had to paint it in Photoshop to see the color) but regardless, it's too bright.
It was much better with the blue. Much more pleasant on the eyes.

And the blue also had some life to it. Some color, both in the literal and the philosophical sense. Now it's just boring bland grey on grey, which I loathe in any setting. smile
Which also is why I genuinely appreciate all the orange bits, even though I don't like orange. big_smile

10

Re: Alternative look

Alright guys, I reverted the change, for now! smile

11 (edited by jim1961 2025-10-02 13:15:03)

Re: Alternative look

Whose birthday is it?  The balloons smile smile smile

12

Re: Alternative look

Click on a balloon and you'll see big_smile