TDF forum theme · DIGIT-ARC

Dark and Light themes for the forum.
Main ideas behind these two themes:
1. Keep the minimalism
2. Easy on eyes

TDF Light
Album on Imgur
*i.imgur.com/fhCEKsf.png

TDF Dark
Album on Imgur
*i.imgur.com/MOIlxxn.png

How to apply/update the themes

0. (Recommended step) Choose "Neo TDF Member" theme
*farm9.staticflickr.com/8864/17523728201_44d850ab72_o.png

1. Install Stylish from firefox addons
*addons.mozilla.org/en-Us/firefox/addon/stylish/
*farm8.staticflickr.com/7720/17337566929_0a69525b65_b.jpg

or for Chrome
*chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
*farm9.staticflickr.com/8712/16901327974_89c073ae2f_b.jpg

or Opera
*addons.opera.com/en/extensions/details/stylish/?display=en
*farm8.staticflickr.com/7793/16903561393_7cf4476cc6_b.jpg

2. Then apply the theme from this URL
TDF Light
*userstyles.org/styles/114136/tdf-light

TDF Dark
*userstyles.org/styles/113322/tdf-dark

*farm8.staticflickr.com/7756/16903547873_9876bf5183_b.jpg

PS: Tested in Firefox, Chrome, and Opera.

I very much welcome it. A dark theme would be ease on our eyes.

One suggestion: The bg color of bar above the each post (the one with date and Post/Reply Number) can be of different color.

^^ I second that suggestion.

Also, the Blue colour of the Thread titles can be make a little brighter too, to have a good contrast with the darker background. I really love a dark theme on TDF. Been dreaming about one since long.
Thanks Anorion. What's the link to this theme?

Shah said:
I very much welcome it. A dark theme would be ease on our eyes.

One suggestion: The bg color of bar above the each post (the one with date and Post/Reply Number) can be of different color.

Changed color of post header.

Vyom said:
^^ I second that suggestion.

Also, the Blue colour of the Thread titles can be make a little brighter too, to have a good contrast with the darker background. I really love a dark theme on TDF. Been dreaming about one since long.
Thanks Anorion. What's the link to this theme?

Changed blue to a more bright color.

Here is the link, it's still in progress so few things won't look as good.
*userstyles.org/styles/113322/tdf-dark

You will have to install Sylish extension for firefox
*addons.mozilla.org/en-us/firefox/addon/stylish/

I haven't checked it in chrom or opera. Both have Stylish extension.

Looks nice. Many will surely prefer dark theme.

[MENTION=20614]Faun[/MENTION] you wrote whole code all by yourself?

Good job faun :doublethumb:

Installed the Stylish theme now. It's better than the screenshot. Just needs polish. Will the theme get autoupdate if you update it Faun? Or if we again need to install it, please let us know when to do it.

Btw, the Quick Reply box is still all white. Can be toned to some shade of grey.

$hadow said:
Looks nice. Many will surely prefer dark theme.

I was tired of TDF's default theme and the black theme doesn't look any better, just too much black.

abhigeek said:
[MENTION=20614]Faun[/MENTION] you wrote whole code all by yourself?

Good job faun

Thanks. It's just CSS editing.

Vyom said:
Installed the Stylish theme now. It's better than the screenshot. Just needs polish. Will the theme get autoupdate if you update it Faun? Or if we again need to install it, please let us know when to do it.

Btw, the Quick Reply box is still all white. Can be toned to some shade of grey.

I will update here when I do further updates.

Yeah, qucik reply and few other things are on to do list. Just need to squeeze in some time for that. I will likely do it on weekend but got some exam soon so progress will be slow.

Awesome work faun! Really needed a good dark theme to deal with eye stress...
Also, I am in the screenshot, now I feel special

[MENTION=77264]Vyom[/MENTION]
reply textarea done. Modified few more things.

Nerevarine said:
Awesome work faun! Really needed a good dark theme to deal with eye stress...
Also, I am in the screenshot, now I feel special

Thanks. Haha...I was thinking of adding new screenshots...but later now.

Feedback much appreciated.

Yea. updates are good. Just a small problem.. The line with "UserCP" link gets dissapear when the theme is activated.

^^ok, I get it. Didn't see that and never used that before. So kept it hidden.

Will sort it out.

- - - Updated - - -
[MENTION=77264]Vyom[/MENTION]

updated with fix. Same url.
*userstyles.org/styles/113322/tdf-dark

Added CSS 3 fadeIn and fadeOut animations too.

[MENTION=20614]Faun[/MENTION]: Can you add the "What's New" on the menu back? Also, In the redirecting page that appears when you search or log in, The text is unreadable because of it's color.

Shah said:
[MENTION=20614]Faun[/MENTION]: Can you add the "What's New" on the menu back? Also, In the redirecting page that appears when you search or log in, The text is unreadable because of it's color.

[MENTION=129731]Shah[/MENTION]
Those 3 buttons were taking up too much space.
You can find "What's New" in this menu as "Today's Posts"
*i.imgur.com/fOUv6Sd.png

For the text legibility, you can try changing the base them of TDF to "Neo TDF Members". Or you can update the theme, I have updated the theme with color override. Let me know if that works.
*i.imgur.com/FTxmATQ.png

Updated Theme:
*userstyles.org/styles/113322/tdf-dark

Faun said:
[MENTION=129731]Shah[/MENTION]
Those 3 buttons were taking up too much space.
You can find "What's New" in this menu as "Today's Posts"
*i.imgur.com/fOUv6Sd.png

For the text legibility, you can try changing the base them of TDF to "Neo TDF Members". Or you can update the theme, I have updated the theme with color override. Let me know if that works.
*i.imgur.com/FTxmATQ.png

Updated Theme:
*userstyles.org/styles/113322/tdf-dark

Updated the theme, The text is readable on that page now.

Here's the side by side comparison of old and new dark theme.

*i.imgur.com/A6lHLfu.png

As can be seen:
1. These icons when clicked use to take us to the last unread post. Very useful. Didn't see no point in hiding them.
2. These icons when double clicked use to mark the section as read. Not much used, but helpful at some occasions.
3. The evil "Unsubscribe" button, when accidentally clicked use to get unsubscribe without even a confirmation. If these can be hide, that would be Awesome.
4. This text along with "Footer" section (not shown in the image) is still dark on black background. Not much legible.

These are some issues, which is preventing me from using the dark theme primarily.

Vyom said:
Here's the side by side comparison of old and new dark theme.

*i.imgur.com/A6lHLfu.png

As can be seen:
1. These icons when clicked use to take us to the last unread post. Very useful. Didn't see no point in hiding them.
2. These icons when double clicked use to mark the section as read. Not much used, but helpful at some occasions.
3. The evil "Unsubscribe" button, when accidentally clicked use to get unsubscribe without even a confirmation. If these can be hide, that would be Awesome.
4. This text along with "Footer" section (not shown in the image) is still dark on black background. Not much legible.

These are some issues, which is preventing me from using the dark theme primarily.

1. The way I browse the forum is pretty adhoc. I go to the subforum and then to the last post in the thread I am interested. Don't ever use the subscriptions page. Disabled email notifications too. The icon can be displayed. The current image icon doesn't look any better with the dark theme. Will find a good set. If you got any recommendations then let me know.
2. Again, never use this functionality. Agree that it is of not much use.
3. Yeah, it will be easy to hide.
4. The grey text is useful for new joiners but for others it's just a mere repetition and draws the attention away from the content. You will see same theme applied in post. Signature text and user details are in grey text while the actual post content is white colored. Simply for the sake of less distraction.

I will roll out the next update after this week. Tied up in other work.

- - - Updated - - -

Shah said:
Updated the theme, The text is readable on that page now.

Cool

Code:

import re
import operator

inFile = open('list.txt')
outFile = open('list_new.txt','w')

index = []
fileRowArray = []

gameNameandURL = {}
sortedGameNameandURL = {}
sortedIndexedGameNameAndURL = {}

count = 0

fileRow = inFile.readline().strip()
index.append(fileRow)

def GenerateSortedIndexed( fileRowArray):
    try:           
        gameNameArray = [ g.group(1) for x in fileRowArray for g in [ re.search('\](.+?)\[',x) ] if g]
    except AttributeError:
        gameNameArray = "Not found !"        

    gameNameandURL = dict(zip(gameNameArray,fileRowArray))
    sortedGameNameandURL = sorted(gameNameandURL.items(), key=operator.itemgetter(0))
    sortedIndexedGameNameAndURL[count] = sortedGameNameandURL
    del gameNameArray[:]
    del fileRowArray[:]
    gameNameandURL.clear()


for line in inFile:
    fileRow = line.strip()    
           
    if (fileRow.startswith("[B]")):
        
        GenerateSortedIndexed( fileRowArray)
        
        index.append(fileRow)
        count = count + 1
        

    if (fileRow != '' and not fileRow.startswith("[B]") ):
        fileRowArray.append(fileRow)        
        continue
#for loop ends  

    
GenerateSortedIndexed( fileRowArray) 

    
for i in range(len(index) ):
    outFile.write(index[i])
    outFile.write("\n")    
    for j in range(len(sortedIndexedGameNameAndURL[i])):
        outFile.write(str(sortedIndexedGameNameAndURL[i][j][1]))
        outFile.write("\n")
        
    outFile.write("\n\n\n")   
#for loop ends    


outFile.flush()
outFile.close
inFile.close

PHP:

import re
import operator

inFile = open('list.txt')
outFile = open('list_new.txt','w')

index = []
fileRowArray = []

gameNameandURL = {}
sortedGameNameandURL = {}
sortedIndexedGameNameAndURL = {}

count = 0

fileRow = inFile.readline().strip()
index.append(fileRow)

def GenerateSortedIndexed( fileRowArray):
    try:           
        gameNameArray = [ g.group(1) for x in fileRowArray for g in [ re.search('\](.+?)\[',x) ] if g]
    except AttributeError:
        gameNameArray = "Not found !"        

    gameNameandURL = dict(zip(gameNameArray,fileRowArray))
    sortedGameNameandURL = sorted(gameNameandURL.items(), key=operator.itemgetter(0))
    sortedIndexedGameNameAndURL[count] = sortedGameNameandURL
    del gameNameArray[:]
    del fileRowArray[:]
    gameNameandURL.clear()


for line in inFile:
    fileRow = line.strip()    
           
    if (fileRow.startswith("[B]")):
        
        GenerateSortedIndexed( fileRowArray)
        
        index.append(fileRow)
        count = count + 1
        

    if (fileRow != '' and not fileRow.startswith("[B]") ):
        fileRowArray.append(fileRow)        
        continue
#for loop ends  

    
GenerateSortedIndexed( fileRowArray) 

    
for i in range(len(index) ):
    outFile.write(index[i])
    outFile.write("\n")    
    for j in range(len(sortedIndexedGameNameAndURL[i])):
        outFile.write(str(sortedIndexedGameNameAndURL[i][j][1]))
        outFile.write("\n")
        
    outFile.write("\n\n\n")   
#for loop ends    


outFile.flush()
outFile.close
inFile.close

Thanks Its easy on my eyes in night hours :thumbs:

I am going to stick with neo tdf member. Find it easy on eyes.

Alok said:
Thanks Its easy on my eyes in night hours

Glad to know.

$hadow said:
I am going to stick with neo tdf member. Find it easy on eyes.

Thanks for your opinion.

Faun said:
1. The way I browse the forum is pretty adhoc. I go to the subforum and then to the last post in the thread I am interested. Don't ever use the subscriptions page. Disabled email notifications too. The icon can be displayed. The current image icon doesn't look any better with the dark theme. Will find a good set. If you got any recommendations then let me know.
2. Again, never use this functionality. Agree that it is of not much use.
3. Yeah, it will be easy to hide.
4. The grey text is useful for new joiners but for others it's just a mere repetition and draws the attention away from the content. You will see same theme applied in post. Signature text and user details are in grey text while the actual post content is white colored. Simply for the sake of less distraction.

I will roll out the next update after this week. Tied up in other work.

1. I think the default icon (*www.digit.in/forum/images/buttons/firstnew.png) should work. But if not, can you try this one: (*img.vineetkumar.me/image.php?di=5NQ8). I have just inverted the colour.

3. Please do hide! One can always unsubscribe from within thread.

Waiting for the next update.

Vyom said:
1. I think the default icon (*www.digit.in/forum/images/buttons/firstnew.png) should work. But if not, can you try this one: (*img.vineetkumar.me/image.php?di=5NQ8). I have just inverted the colour.
3. Please do hide! One can always unsubscribe from within thread.

Waiting for the next update.

The icon looks goods as replacememt.

Alright. Updated the style. Your button is back, I will change to the new one later as it will need some workaround. Unsubscribe hidden too.

Have toned down the individual post font color to be less white. Let me know if that's ok.

Added few other things too.

Major changes done. Theme is 90% done

thanks faun.

Arigato Faun-sama. Super theme-desu.

JojoTheDragon said:
Arigato Faun-sama. Super theme-desu.

Baka !

On quick reply bar there is light blue tint , looks cool. It would be great if all white outlines are replaced by this :mrgreen:

Shadow and glow effects are very nice :thumbs:

Alok said:
On quick reply bar there is light blue tint , looks cool. It would be great if all white outlines are replaced by this

Shadow and glow effects are very nice

Can you post a screenshot ? Will be easier for me to understand.

Thanks. Refining aesthetics of other elements too. Will post update later this week.

look at the blue border in pic. gives me alienware like feel

Like neon glow

*i.imgur.com/EeCEmqX.png

Alok said:
look at the blue border in pic. gives me alienware like feel Like neon glow

*i.imgur.com/EeCEmqX.png

Can you post a larger screenshot with posts included in that ?

I see this outline is because of default TDF dark theme.

here it is

*i.imgur.com/wyAWcyq.png?1

Alok said:
here it is

*i.imgur.com/wyAWcyq.png?1

It's the Dark Theme of digit forum. Not the one I am working on.

You can apply mine by:
1. Installing Stylish from firefox addons
*addons.mozilla.org/en-Us/firefox/addon/stylish/

2. Then apply the theme from this URL
*userstyles.org/styles/113322/tdf-dark

and I was living in another world :banghead:

- - - Updated - - -

Hey Faun , Stylish is there for chrome as well. Will it work ?

It worked in chrome :mrgreen:

- - - Updated - - -

Wow it looks better than old dark theme. If you wouldn't have asked me about screenshot..... :-?

You already made outlines blue/black , its nice. White outlines in old dark theme were kind of reflecting painful light.

Time to edit you sig Faun ! Stylish is not firefox exclusive

- - - Updated - - -

You can improve a thing - search box and thread navigation drop down lists don't have proper contrast balance making text in between to be blur. Make it like quick reply box (black and white)

Alok said:
You can improve a thing - search box and thread navigation drop down lists don't have proper contrast balance making text in between to be blur. Make it like quick reply box (black and white)

Yeah, added a brief walkthrough in first page. Chrome and opera included

Editing signature.

Can you post a screenshot for that ? I will get the idea.

Here is what I want

*i.imgur.com/O2CRkyA.png?1

Alok said:
Here is what I want

*i.imgur.com/O2CRkyA.png?1

Ok, it's the advanced search page. I never used that so didn't know. Will update and let you know this week when I roll out the next update.

[MENTION=20614]Faun[/MENTION] The report and reps links on the post's footer (class name is "postlinking" under "postfoot") are not having any images. So, the links are not appearing. Also, while searching for any user's posts, The theme ain't dark.

Shah said:
[MENTION=20614]Faun[/MENTION] The report and reps links on the post's footer (class name is "postlinking" under "postfoot") are not having any images. So, the links are not appearing. Also, while searching for any user's posts, The theme ain't dark.
View attachment 15419

Yeah, I know about that. Will fix them. Thanks.

User searched post, noted.

[MENTION=118706]Alok[/MENTION] [MENTION=129731]Shah[/MENTION]

Updated theme. Polished few other areas too.

Faun said:
[MENTION=118706]Alok[/MENTION] [MENTION=129731]Shah[/MENTION]

Updated theme. Polished few other areas too.

Updated.

Will let you know if I run into any other bugs.

Faun said:
[MENTION=118706]Alok[/MENTION] [MENTION=129731]Shah[/MENTION]

Updated theme. Polished few other areas too.

Nice

I'm totally switched to this theme, even during daytime

Alok said:
Nice I'm totally switched to this theme, even during daytime

Me too.

Alok said:
Nice I'm totally switched to this theme, even during daytime

Shah said:
Me too.

Thanks

It's part of my design learning. Glad to know that it's coming out right.

Feebacks welcome.

I might work on a lighter theme variation of same when this is finished.

New update

V0.7 (18 May 2015)
Polls section, bbcode code section, post reply section, smiley section, attachment section, buttons themed.

Faun said:
New update

V0.7 (18 May 2015)
Polls section, bbcode code section, post reply section, smiley section, attachment section, buttons themed.

A bug with quick reply. Quick reply doesn't look good in this update. Also, I see some people as changing the color of text in their posts. When they do so, It is hard to read. So, can you add this statement to post content's class? "color: #FFFFFF !important;". Forcing white color will be a better choice than asking every one not to change the colors.

*www.digit.in/forum/attachment.php?attachmentid=15444&d=1431950981

Shah said:
A bug with quick reply. Quick reply doesn't look good in this update. Also, I see some people as changing the color of text in their posts. When they do so, It is hard to read. So, can you add this statement to post content's class? "color: #FFFFFF !important;". Forcing white color will be a better choice than asking every one not to change the colors.

If something like this could be done, I request to Please do. I tried asking a few users not to set the colour to black, but no effect.

Shah said:
A bug with quick reply. Quick reply doesn't look good in this update. Also, I see some people as changing the color of text in their posts. When they do so, It is hard to read. So, can you add this statement to post content's class? "color: #FFFFFF !important;". Forcing white color will be a better choice than asking every one not to change the colors.

*www.digit.in/forum/attachment.php?attachmentid=15444&d=1431950981

Fixed that. Thanks for pointing out.

Added forced color for post content too. Seems to be working fine. Haven't checked for all scenarios though. Might have missed some. Do let me know in case.

[MENTION=129731]Shah[/MENTION]
removed the underline for user mention tagging too.

Vyom said:
If something like this could be done, I request to Please do. I tried asking a few users not to set the colour to black, but no effect.

Looks like fixed

Shreeux can be more relentless with his color drive :lol:

Faun said:
Fixed that. Thanks for pointing out.

Added forced color for post content too. Seems to be working fine. Haven't checked for all scenarios though. Might have missed some. Do let me know in case.

[MENTION=129731]Shah[/MENTION]
removed the underline for user mention tagging too.

Looks like fixed

Shreeux can be more relentless with his color drive

The theme seems complete now. Great job, buddy.

Shah said:
The theme seems complete now. Great job, buddy.

Thanks

[MENTION=129731]Shah[/MENTION]

Modified colors for thread title tags, looks better now
*farm8.staticflickr.com/7717/17231656474_d4f168ac31_b.jpg

^ Too much of update for today.

JK, Updated.

Shah said:
The theme seems complete now. Great job, buddy.

Theme's building up great. But far from complete now.
Just something which probably still needs work on:

1. Since Big icons besides thread titles have gone now, it's harder to tell whether thread is locked or now. It's more problem in say Reported Post section (Mod section).
2. Deleted posts are not themed. Like the deleted post in this thread: (*www.digit.in/forum/buying-advice/150741-complete-smartphone-buyers-guide-56.html) After #1663. (Others: It's visible only to mods).

Thanks for neutralizing the use of COLOR tag though. Much appreciated.

Vyom said:
Theme's building up great. But far from complete now.
Just something which probably still needs work on:

1. Since Big icons besides thread titles have gone now, it's harder to tell whether thread is locked or now. It's more problem in say Reported Post section (Mod section).
2. Deleted posts are not themed. Like the deleted post in this thread: (*www.digit.in/forum/buying-advice/150741-complete-smartphone-buyers-guide-56.html) After #1663. (Others: It's visible only to mods).

Thanks for neutralizing the use of COLOR tag though. Much appreciated.

1. I will draw some icons and replace those. If you find any good minimalistic icons matching the color scheme then let me know.
2. Yeah, I left it for easy identification. Will theme it a bit differently to recognize.

Thanks for the inputs. What other points do you think are still left out ?

- - - Updated - - -
[MENTION=77264]Vyom[/MENTION]
1. Updated with icons. Now you can see which threads are locked and deleted.
*i.imgur.com/H1jj0i7.png

2. Themed deleted posts.

^^ Incredible man. Those icons for the Lock or Unlock thread is very nice. It's such nice that it's giving complex to the other default VB6 icons which have not changed!

[MENTION=20614]Faun[/MENTION] The icons look great. GJ. :thumbs:

Shah said:
[MENTION=20614]Faun[/MENTION] The icons look great. GJ.

Thanks

- - - Updated - - -

Started a light theme spin-off based on the dark theme

*i.imgur.com/n313asp.png

Added TDF Light theme link to first post
*userstyles.org/styles/114136/tdf-light

[MENTION=20614]Faun[/MENTION] Hey bro, very small thing I noticed, that comma between usernames and tags is hardly visible.

*i.imgur.com/PnBS4LO.png?1

Well, now that you have noticed, I would also suggest one change:
The theme is applicable for the forum. And should be for only forum. Not the main site digit.in. So if it can be excluded from the css that would be great. Since it makes the text in articles on home page little lighter and harder to read.

Like this one: 7 trailers you must watch this weekend | Digit.in

Yeah, give me some time.

Tied up with other stuff for the time being.

I chose the DARK SIDE!! Darth ShankJ!!

- - - Updated - - -
[MENTION=20614]Faun[/MENTION] - thanks for the effort!!

[MENTION=152602]ShankJ[/MENTION]

Thanks ! I will try to update it this month. Using the dark theme here too :lol: