Alternative look (Page 1) — Site comments/suggestions

1 Topic by bloczone 2025-08-21 23:42:23

bloczone
Member
Offline

Registered: 2010-11-29
Posts: 46

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.

2 Reply by santah 2025-09-29 13:20:10

santah
Administrator
Offline

Registered: 2005-10-18
Posts: 7,939

Re: Alternative look

Did some updates to how the Dark Mode looks.

Thoughts?

3 Reply by WilliamDrakeMcGregor 2025-09-29 16:11:52

WilliamDrakeMcGregor
Member
Offline

From: Germany
Registered: 2016-06-10
Posts: 687

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.

4 Reply by Wizard 2025-09-29 16:15:08

Wizard
Administrator
Offline

From: England
Registered: 2006-02-16
Posts: 2,750

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/

Wizard's Website

5 Reply by WilliamDrakeMcGregor 2025-09-29 16:36:05

WilliamDrakeMcGregor
Member
Offline

From: Germany
Registered: 2016-06-10
Posts: 687

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 ).

6 Reply by bloczone 2025-09-29 23:16:35

bloczone
Member
Offline

Registered: 2010-11-29
Posts: 46

Re: Alternative look

Nice. 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 Reply by ArniVidar 2025-09-30 13:05:56

ArniVidar
Member
Offline

From: Reykjavik, Iceland
Registered: 2014-09-24
Posts: 283

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 Reply by santah 2025-09-30 13:44:10

santah
Administrator
Offline

Registered: 2005-10-18
Posts: 7,939

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 Reply by ArniVidar 2025-09-30 15:41:42

ArniVidar
Member
Offline

From: Reykjavik, Iceland
Registered: 2014-09-24
Posts: 283

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.
Which also is why I genuinely appreciate all the orange bits, even though I don't like orange.

10 Reply by santah 2025-09-30 17:24:12

santah
Administrator
Offline

Registered: 2005-10-18
Posts: 7,939

Re: Alternative look

Alright guys, I reverted the change, for now!

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

jim1961
Member
Offline

From: Texas
Registered: 2025-02-24
Posts: 156

Re: Alternative look

Whose birthday is it? The balloons

jim1961's Website

12 Reply by santah 2025-10-02 13:19:21

santah
Administrator
Offline

Registered: 2005-10-18
Posts: 7,939

Re: Alternative look

Click on a balloon and you'll see

Alternative look

Posts: 12

1 Topic by bloczone 2025-08-21 23:42:23

Topic: Alternative look

2 Reply by santah 2025-09-29 13:20:10

Re: Alternative look

3 Reply by WilliamDrakeMcGregor 2025-09-29 16:11:52

Re: Alternative look

4 Reply by Wizard 2025-09-29 16:15:08

Re: Alternative look

5 Reply by WilliamDrakeMcGregor 2025-09-29 16:36:05

Re: Alternative look

6 Reply by bloczone 2025-09-29 23:16:35

Re: Alternative look

7 Reply by ArniVidar 2025-09-30 13:05:56

Re: Alternative look

8 Reply by santah 2025-09-30 13:44:10

Re: Alternative look

9 Reply by ArniVidar 2025-09-30 15:41:42

Re: Alternative look

10 Reply by santah 2025-09-30 17:24:12

Re: Alternative look

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

Re: Alternative look

12 Reply by santah 2025-10-02 13:19:21

Re: Alternative look

Posts: 12