Improved? ScribbleHub Dark Theme

Discussion in 'General Chat' started by Neolinkster, Aug 31, 2019.

  1. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    Hello there Ladies,Gentlemen,Non-Binary, & Shiina Ai-chan. I've been a pretty big promoter of a web extension called Stylus, I've recommended it a few times on here and given a few screenshots of what it can do. Anyways, I traditionally just switch whatever sight I'm onto dark mode if it has one use stylish to see if there is one written or just do a couple quick tweaks to make it dark myself.

    I actually didn't really any problems with the dark theme on ScribbleHub itself and any I did have I could easily leave as is. My problem though is that it didn't want to stay on the dark theme so I got fed up and started making a version where I could let stylus keep it that way where I wasn't going to have to deal with a burning bright screen in the middle of switching chapters late at night. So I took a bit of time and mimicked out the dark theme with some contrast improvements making things just a bit more easy to read (See examples below).

    While I was busy trying to grab all the different bits that I needed to switch it over I had a couple of fun concepts and went ahead and Implemented them. I added a few things that I thought would be nice and make it more fun. It's just a handful of things but I implemented them best of my ability if anybody has something they want added I wouldn't mind giving it a shot to get it going I'll only point out 1 of them here and hope you guys get stylus and go about find the others(no spoilers pls).[​IMG]
    [​IMG]
    [​IMG]
    [​IMG] [​IMG]
    [​IMG] [​IMG] [​IMG]
    [​IMG]

    Now for the changes shown above.
    • I enlarged the covers on the front page by 33% to shrink the gaps between them
    • I changed the contrast of book tags so it's more visible to just glance at
    • I enlarged the text in chapters and shrunk the margins as well as making them brighter
    • The last picture is the symbol for marking your chapters read to the most current release I actually gave it a fun little animation too
    I tried to get everything but may have missed 1 or 2 pieces but more importantly there are a few other fun tweaks added in I hope you'll take the time to install and find out on your own. Suggestions on what I could add or comments on what I missed or what you would like to to see are welcome. I can try to get some of the things implemented also I didn't post the direct link to the theme in hopes you might grab stylus to give it a try though I'm not apposed to listing it in another post if you guys want
     
    Last edited: Aug 31, 2019
  2. Bloodysin28

    Bloodysin28 Well-Known Member

    Joined:
    Jun 3, 2019
    Messages:
    128
    Likes Received:
    126
    Reading List:
    Link
    A text size adjuster would be very nice as I read with larger texts on mobile atleast.
     
  3. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    Ah I should probably have mentioned I made these adjustments on and with PC and only focused on that. While I have no problem trying to make one for mobile I tried at a cursory glance to add it to my phone and couldn't. Though, that doesn't mean there isn't a way I just didn't see one plus my phone is only slightly better than a flip phone and my laptop is pretty old so I would have trouble making something for higher resolutions unless i somehow get a monitor and something for mobile unless I can run it with the one I have, Sorry.
     
  4. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    Had to install firefox for the extension, working on it now.
     
  5. Ai chan

    Ai chan Queen of Yuri, Devourer of Traps, Abused Witch

    Joined:
    Nov 7, 2015
    Messages:
    9,667
    Likes Received:
    20,480
    Reading List:
    Link
    Wait, how come Ai-chan got called by Ai-chan's full name?
     
  6. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    Okay I'm still teaching myself css but I can't make something from nothing. If it isn't there in the first place I can't make it but if you have stylus installed its simple to make one yourself here is the code for increasing the font size of just the chapters
    Code:
    #chp_contents {
      font-size: 2.8vw;
    }
    You can adjust it by whole numbers then by decimal increments next

    here is where you click to make it yourself
    [​IMG]

    I really wish I could implement this for a case by case basis with profile I made there may be a way but I'm still learning I may eventually find it but I can only change things using what is there and with cascade style sheets
     
    Last edited: Aug 31, 2019
  7. Ddraig

    Ddraig Frostfire Dragon|Retired lurker|FFF|Loved by RNG

    Joined:
    Apr 6, 2016
    Messages:
    5,752
    Likes Received:
    15,198
    Reading List:
    Link
    Ah looks like I met a worshipper of @Ai chan
     
    Donutmindme likes this.
  8. Tony

    Tony Moderator Staff Member

    Joined:
    Oct 20, 2015
    Messages:
    4,744
    Likes Received:
    40,594
    Reading List:
    Link
    You can already adjust the size of the font. If you're on desktop, click on the reading options located at the top right of each chapter:

    1.jpg

    Or, if you're on mobile, tab anywhere on the chapter and it'll show you a few more options. One of options is to let you change the font size:

    2.jpg
     
    Donutmindme and AliceShiki like this.
  9. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link


    Ahh! read my own words thrown back at me and how poorly worded it was, I had to rewrite the second paragraph once already. When I had to restart my browser part way through writing the initial post and only had the first paragraph saved when I went back to it, starting from the second paragraph I guess I was distracted somewhat. God that was some poor phrasing though.
     
  10. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    It was still staying logged in but it would toggle the theme only for w/e reason after a random amount of time. Maybe the cookie for that is set to expire after (x) amount of time?
     
  11. Tony

    Tony Moderator Staff Member

    Joined:
    Oct 20, 2015
    Messages:
    4,744
    Likes Received:
    40,594
    Reading List:
    Link
    It does expire after (x) time but it's set at a year. Are you using 'incognito' mode?
     
  12. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    Nope, I like to keep the reading list highlighter going and mark my progress. And I am not clearing my cookies either.
     
    Last edited: Sep 2, 2019
  13. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    I've implemented some some changes for mobile now too, since it has a different layout there was only a couple of things I could change since It only slightly varied from what I had already done. Also I've personally found and changed about 20+ visually breaking items/elements that I missed since I published this theme. Anyways here is the phone version
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
     
  14. Neolinkster

    Neolinkster Well-Known Member

    Joined:
    Jul 14, 2016
    Messages:
    39
    Likes Received:
    24
    Reading List:
    Link
    Hi there, once again I have a status update. I believe I have everything converted at this point. I've tidied up a few things and added options for chapter highlights, instead of having the ones I was using which don't work well with certain kinds of colorblindness. Also I also implemented something I wanted in the first place, but it only works for Chrome and not Firefox so now I have options for each.
    [​IMG]