1. Another story competition is beginning! (Q1 2018)

    "You're bleeding on my floor."

    We've moved to a quarterly format, so you really have no excuse not to participate this time.

    So check out the new thread discussing scoring, rules, and other such matters in the in the Story Competitions forum and get cracking.

    Dismiss Notice

Fanfiction.net Themes

Discussion in 'General Discussion' started by Paimon, Jul 17, 2007.

  1. Probellum

    Probellum Death Eater

    Joined:
    Jan 17, 2011
    Messages:
    923
    Location:
    Among the Moose
    That's one part, but there's also the chapter selection bar messing with the firsst line of the actual chapter.
     
  2. NuitTombee

    NuitTombee Dark Lord

    Joined:
    Feb 14, 2010
    Messages:
    1,811
    Location:
    The Peach State
    Well, this is just a sloppy method in my opinion, considering I barely know anything about coding, but it does get those two apart.
    Code:
    .storytextp {
        padding-top: 25px !important;
    	}
    
     
  3. pdo91

    pdo91 Professor DLP Supporter

    Joined:
    Jan 11, 2009
    Messages:
    495
    Location:
    Colorado
    I haven't properly updated my theme in ages, so I went through and cleaned it up. I even commented it so that you guys can cannibalize it for your own themes ;). I'm pretty sure I got everything, but if you see a drop-down box with weird colors let me know.

    Light Green
    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("fanfiction.net") {
    
    /* DLP Color Scheme:
    Background:          #21301f
    Header Background:   #0A1C0B
    Text:                #BAD6c2
    Time Text:           #A6AAA2
    Link:                #93be91
    Link Hover:          #34d238
    */
    
    
    /* Main body recolor */
    html, body, td, th, .storytextp, .storytext, .panel_wrapper, .tabs *, .zmenu, .tcat, .input-block-level, label.checkbox, .gray, div.panel_normal, .menulink.maxwidth, #top, #content_wrapper, #content_parent {
      background-image: none !important;
      background: #21301f !important;
      color: #BAD6c2 !important;
    }
    
    /* Story statistics color */
    .z-padtop2.xgray, .xgray.xcontrast_txt {
      color: #A6AAA2 !important;
    }
    
    /* Drop-down menus and buttons */
    select, input, textarea, button {
      background: #21301F !important;
      color: #93be91 !important;
      border: 1px solid #ccc !important;
      -moz-appearance: none !important;
      text-shadow: none !important;
    }
    
    /* Drop-down menu colors */
    #content_wrapper_inner cachehit div form select option, #content_wrapper_inner table tbody tr td select option, #myform .modal-body .filter_select option, #chap_select option {
      background: #21301f !important;
      color: #93be91 !important;
    }
    #content_wrapper_inner cachehit div form select option:hover, #content_wrapper_inner table tbody tr td select option:hover, #myform .modal-body .filter_select option:hover, #chap_select option:hover, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-submenu:hover a, .dropdown-submenu:focus a {
      background: #223B21 !important;
      color: #34d238 !important;
    }
    
    /* Story filter and Follow/Favorite drop-downs */
    .dropdown-menu, .modal, .modal-footer, .modal-body span, .btn, .btn-primary, .span2, .lc, .lc-left {
        background-color: #21301F !important;
        background-image: none !important;
        color: #93be91 !important;
        text-shadow: none !important;
      }
    
    /* Color of the links in the main body */
    a, a.a2a_menu_powered_by, a:visited, a.a2a_menu_powered_by:visited {
      color: #93be91 !important;
      border: none !important;
    }
    a:hover,a:visited:hover, a.a2a_menu_powered_by:hover, a.a2a_menu_powered_by:visited:hover {
      color: #34d238 !important;
    }
    
    /* Hover color of the user account menu */
    thead,.alt1,.thead,ul.topnav ul li.active {
      background: #21301f !important;
    }
    ul.topnav li a:hover, ul.topnav ul li a:hover {
      background: #223B21 !important;
    }
    
    /* Twitter widget */
    #twitter-widget-0 {
      display: none;
    }
    
    /* Story/Author image */
    .cimage {
      display: none;
    }
    
    /* Padding between chapter selection and story */
    .storytextp {
      padding-top: 20px !important;
    }
    
    /* Max width of the story across the screen */
    #content_wrapper {
      min-width: 98% !important;
    }
    
    /* Size of the story text and the line spacing */
    #storytext {
      font-size: 1.15em !important;
      line-height: 1.4em !important;
    }
    
    }
    Dark Green
    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("fanfiction.net") {
    
    /* DLP Color Scheme:
    Background:          #21301f
    Header Background:   #0A1C0B
    Text:                #BAD6c2
    Time Text:           #A6AAA2
    Link:                #93be91
    Link Hover:          #34d238
    */
    
    
    /* Main body recolor */
    html, body, td, th, .storytextp, .storytext, .panel_wrapper, .tabs *, .zmenu, .tcat, .input-block-level, label.checkbox, .gray, div.panel_normal, .menulink.maxwidth, #top, #content_wrapper, #content_parent {
      background-image: none !important;
      background: #0A1C0B !important;
      color: #BAD6c2 !important;
    }
    
    /* Story statistics color */
    .z-padtop2.xgray, .xgray.xcontrast_txt {
      color: #A6AAA2 !important;
    }
    
    /* Drop-down menus and buttons */
    select, input, textarea, button {
      background: #0A1C0B !important;
      color: #93be91 !important;
      border: 1px solid #ccc !important;
      -moz-appearance: none !important;
      text-shadow: none !important;
    }
    
    /* Drop-down menu colors */
    #content_wrapper_inner cachehit div form select option, #content_wrapper_inner table tbody tr td select option, #myform .modal-body .filter_select option, #chap_select option {
      background: #0A1C0B !important;
      color: #93be91 !important;
    }
    #content_wrapper_inner cachehit div form select option:hover, #content_wrapper_inner table tbody tr td select option:hover, #myform .modal-body .filter_select option:hover, #chap_select option:hover, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-submenu:hover a, .dropdown-submenu:focus a {
      background: #223B21 !important;
      color: #34d238 !important;
    }
    
    /* Story filter and Follow/Favorite drop-downs */
    .dropdown-menu, .modal, .modal-footer, .modal-body span, .btn, .btn-primary, .span2, .lc, .lc-left {
        background-color: #0A1C0B !important;
        background-image: none !important;
        color: #93be91 !important;
        text-shadow: none !important;
      }
    
    /* Color of the links in the main body */
    a, a.a2a_menu_powered_by, a:visited, a.a2a_menu_powered_by:visited {
      color: #93be91 !important;
      border: none !important;
    }
    a:hover,a:visited:hover, a.a2a_menu_powered_by:hover, a.a2a_menu_powered_by:visited:hover {
      color: #34d238 !important;
    }
    
    /* Hover color of the user account menu */
    thead,.alt1,.thead,ul.topnav ul li.active {
      background: #0A1C0B !important;
    }
    ul.topnav li a:hover, ul.topnav ul li a:hover {
      background: #223B21 !important;
    }
    
    /* Twitter widget */
    #twitter-widget-0 {
      display: none;
    }
    
    /* Story/Author image */
    .cimage {
      display: none;
    }
    
    /* Padding between chapter selection and story */
    .storytextp {
      padding-top: 20px !important;
    }
    
    /* Max width of the story across the screen */
    #content_wrapper {
      min-width: 98% !important;
    }
    
    /* Size of the story text and the line spacing */
    #storytext {
      font-size: 1.15em !important;
      line-height: 1.4em !important;
    }
    
    }
     
    Last edited: Nov 13, 2013
  4. NuitTombee

    NuitTombee Dark Lord

    Joined:
    Feb 14, 2010
    Messages:
    1,811
    Location:
    The Peach State
    The @-moz-document made it unusable until I deleted it both in Chrome and Opera on Stylish. Maybe just me but I don't think so.
     
    Last edited: Nov 13, 2013
  5. pdo91

    pdo91 Professor DLP Supporter

    Joined:
    Jan 11, 2009
    Messages:
    495
    Location:
    Colorado
    You're right, the @-moz-document part only works for Firefox. I just copy-pasted the whole thing - whoops. Just delete that bit to make it work in other browsers.

    Also, I found something I missed: the pop-up message confirming when you follow/favorite something. If you want that to go with your theme instead of its normal black, you can put this in your code. Use #0A1C0B for the background color if you want dark green:

    Code:
    /* Follow/favorite pop-up */
    div.toast {
    color: #BAD6c2 !important;
    background-color: #21301f !important;
    opacity: 1.0 !important;
    }
     
  6. NuitTombee

    NuitTombee Dark Lord

    Joined:
    Feb 14, 2010
    Messages:
    1,811
    Location:
    The Peach State
    How would I go about changing these little green squares in the corners to black, hopefully without changing the corners up top?

    [​IMG]

    Here's my additional code added to yourstyle, I moved the #content_parent from your main body recolor.

    Code:
    /* Additions By NuitTombee */
    
    #content_parent {
    background-image: none !important;
    background: #000 !important;
    }
    
    .caret {
    border-top: 4px solid #fff;
    }
      
    #p_footer {
    background: #000 !important;
    }
    
    .tcat {
    background-color: #0A1C0B !important;
    border-color: #000 !important;
    }
    
    #content_wrapper_inner, .table-bordered {
    border-color: #000 !important;
    }
    I forgot to mention in case anyone else wants it, the .caret addition changes those black drop-down arrows up top to white. and I added a bit more code.

    [​IMG]

    Can't figure out how to, with my barely there coding knowledge, change the News header to similar to Fanfiction and Crossovers without fucking up the rest of the page.
     
    Last edited: Nov 14, 2013
  7. Dark Syaoran

    Dark Syaoran Persona 4 Admin

    Joined:
    Jun 4, 2005
    Messages:
    6,056
    I've also noticed that the 'add to C2' and various other buttons have vanished.

    Also, this white thing.
     

    Attached Files:

  8. NuitTombee

    NuitTombee Dark Lord

    Joined:
    Feb 14, 2010
    Messages:
    1,811
    Location:
    The Peach State
    Ah you're using Oz's, here you go.

    Code:
    .lc, .lc-left {background-color: #0a1c0b !important;}
    Also, the Add to C2 should be under actions at the bottom.
     
  9. Dark Syaoran

    Dark Syaoran Persona 4 Admin

    Joined:
    Jun 4, 2005
    Messages:
    6,056
    They used to be there, but everything is missing now. Maybe it's on Oz's.

    Edit: Using new script, it is back. For some reason, they had vanished from Oz's one. I also made my story-font a little smaller, because damn that was big.
     
  10. NuitTombee

    NuitTombee Dark Lord

    Joined:
    Feb 14, 2010
    Messages:
    1,811
    Location:
    The Peach State
    Also, while visiting a profile I saw a horrendous site. [pdo91's Light Green]

    [​IMG]

    Here's what I used to fix it.

    Code:
    .fake_link {
    color: #93be91 !important;
    border-bottom: solid 1px #93be91 !important;
    }
    [​IMG]
     
  11. Dark Syaoran

    Dark Syaoran Persona 4 Admin

    Joined:
    Jun 4, 2005
    Messages:
    6,056
    They've changed a few things and I found one thing that was missed last time. First picture is when you log out. It probably happens in other areas, as well. Second is that little weird number circle they've placed on the filter to tell you how many stories are going to be shown under what you choose. It isn't terribly annoying with the current colour but it doesn't fit completely. The last is the colour of the tabs, as well as more of that number circle stuff.
     

    Attached Files:

  12. pdo91

    pdo91 Professor DLP Supporter

    Joined:
    Jan 11, 2009
    Messages:
    495
    Location:
    Colorado
    Alright, I think I got it all. First off:

    Code:
    #p_footer.maxwidth{
      min-width: 100% !important;
      background-image: none !important;
      background: black !important;
    }
    
    .tcat, #gui_table3i.table.table-striped tbody tr:first-child td {
      background: #0A1C0B !important;
     }
    Problems solved ;).

    For the rest of you, here's the updated style. It should fix all the bugs, from the new counters to those heinous blue links.

    Light Green
    Code:
    /* DLP Color Scheme:
    Background:          #21301f
    Header Background:   #0A1C0B
    Text:                #BAD6c2
    Time Text:           #A6AAA2
    Link:                #93be91
    Link Hover:          #34d238
    */
    
    
    /* Main body recolor */
    html, body, td, th, .storytextp, .storytext, .panel_wrapper, .tabs *, .zmenu, .tcat, .input-block-level, label.checkbox, .gray, div.panel_normal, .panel_success, .gui_success, .menulink.maxwidth, #top, #content_wrapper, #content_parent {
      background-image: none !important;
      background: #21301f !important;
      color: #BAD6c2 !important;
    }
    
    /* Story statistics color */
    .z-padtop2.xgray, .xgray.xcontrast_txt {
      color: #A6AAA2 !important;
    }
    
    /* Drop-down menus and buttons */
    select, input, textarea, button {
      background: #21301F !important;
      color: #93be91 !important;
      border: 1px solid #ccc !important;
      -moz-appearance: none !important;
      text-shadow: none !important;
    }
    
    /* Drop-down menu colors */
    #content_wrapper_inner cachehit div form select option, #content_wrapper_inner table tbody tr td select option, #myform .modal-body .filter_select option, #chap_select option{
      background: #21301f !important;
      color: #93be91 !important;
    }
    #content_wrapper_inner cachehit div form select option:hover, #content_wrapper_inner table tbody tr td select option:hover, #myform .modal-body .filter_select option:hover, #chap_select option:hover, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-submenu:hover a, .dropdown-submenu:focus a {
      background: #223B21 !important;
      color: #34d238 !important;
    }
    
    /* Dropdown menu arrows */
    .caret {
      background: #BAD6c2 !important;
      border: 2px solid !important;
    }
    
    /* Story filter and Follow/Favorite drop-downs */
    .dropdown-menu, .modal, .modal-footer, .modal-body span, .btn, .btn-primary, .span2, .lc, .lc-left, #live_counter.badge {
      background-color: #21301F !important;
      background-image: none !important;
      color: #93be91 !important;
      text-shadow: none !important;
      }
    
    /* Color of the links in the main body */
    a, a.a2a_menu_powered_by, a:visited, a.a2a_menu_powered_by:visited, .fake_link {
      color: #93be91 !important;
      border: none !important;
    }
    a:hover,a:visited:hover, a.a2a_menu_powered_by:hover, a.a2a_menu_powered_by:visited:hover, .fake_link:hover {
      color: #34d238 !important;
    }
    
    /* Follow/favorite pop-up */
    div.toast {
      color: #BAD6c2 !important;
      background-color: #21301f !important;
      opacity: 0.975 !important;
    }
    
    /* Author page tab colors*/
    #l_fs, #l_fa, #l_st.current, #l_cc, span.badge, #mytab.nav.nav-tabs{
      background: #21301f !important;
      color: #93be91 !important;
      border: 0px !important;
    }
    #l_fs:hover, #l_fa:hover, #l_st.current:hover, #l_cc:hover {
      background: #223B21 !important;
      color: #34d238 !important;
    }
    
    /* Hover color of the user account menu */
    thead,.alt1,.thead,ul.topnav ul li.active {
      background: #21301f !important;
    }
    ul.topnav li a:hover, ul.topnav ul li a:hover {
      background: #223B21 !important;
    }
    
    
    /* Twitter widget */
    #twitter-widget-0 {
      display: none;
    }
    
    /* Story/Author image */
    .cimage, .round36 {
      display: none !important;
    }
    
    /* Padding between chapter selection and story */
    .storytextp {
      padding-top: 20px !important;
    }
    
    /* Max width of the story across the screen */
    #content_wrapper {
      min-width: 98% !important;
    }
    
    /* Size of the story text and the line spacing */
    #storytext {
      font-size: 1.15em !important;
      line-height: 1.4em !important;
    }
    Dark Green
    Code:
    /* DLP Color Scheme:
    Background:          #21301f
    Header Background:   #0A1C0B
    Text:                #BAD6c2
    Time Text:           #A6AAA2
    Link:                #93be91
    Link Hover:          #34d238
    */
    
    
    /* Main body recolor */
    html, body, td, th, .storytextp, .storytext, .panel_wrapper, .tabs *, .zmenu, .tcat, .input-block-level, label.checkbox, .gray, div.panel_normal, .panel_success, .gui_success, .menulink.maxwidth, #top, #content_wrapper, #content_parent {
      background-image: none !important;
      background: #0A1C0B !important;
      color: #BAD6c2 !important;
    }
    
    /* Story statistics color */
    .z-padtop2.xgray, .xgray.xcontrast_txt {
      color: #A6AAA2 !important;
    }
    
    /* Drop-down menus and buttons */
    select, input, textarea, button {
      background: #0A1C0B !important;
      color: #93be91 !important;
      border: 1px solid #ccc !important;
      -moz-appearance: none !important;
      text-shadow: none !important;
    }
    
    /* Drop-down menu colors */
    #content_wrapper_inner cachehit div form select option, #content_wrapper_inner table tbody tr td select option, #myform .modal-body .filter_select option, #chap_select option{
      background: #0A1C0B !important;
      color: #93be91 !important;
    }
    #content_wrapper_inner cachehit div form select option:hover, #content_wrapper_inner table tbody tr td select option:hover, #myform .modal-body .filter_select option:hover, #chap_select option:hover, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-submenu:hover a, .dropdown-submenu:focus a {
      background: #21301f !important;
      color: #34d238 !important;
    }
    
    /* Dropdown menu arrows */
    .caret {
      background: #BAD6c2 !important;
      border: 2px solid !important;
    }
    
    /* Story filter and Follow/Favorite drop-downs */
    .dropdown-menu, .modal, .modal-footer, .modal-body span, .btn, .btn-primary, .span2, .lc, .lc-left, #live_counter.badge {
        background-color: #0A1C0B !important;
        background-image: none !important;
        color: #93be91 !important;
        text-shadow: none !important;
      }
    
    /* Color of the links in the main body */
    a, a.a2a_menu_powered_by, a:visited, a.a2a_menu_powered_by:visited, .fake_link {
      color: #93be91 !important;
      border: none !important;
    }
    a:hover,a:visited:hover, a.a2a_menu_powered_by:hover, a.a2a_menu_powered_by:visited:hover, .fake_link:hover {
      color: #34d238 !important;
    }
    
    /* Follow/favorite pop-up */
    div.toast {
    color: #BAD6c2 !important;
    background-color: #0A1C0B !important;
    opacity: 0.975 !important;
    }
    
    /* Author page tab colors*/
    #l_fs, #l_fa, #l_st.current, #l_cc, span.badge, #mytab.nav.nav-tabs{
      background: #0A1C0B !important;
      color: #93be91 !important;
      border: 0px !important;
    }
    #l_fs:hover, #l_fa:hover, #l_st.current:hover, #l_cc:hover {
      background: #21301f !important;
      color: #34d238 !important;
    }
    
    /* Hover color of the user account menu */
    thead,.alt1,.thead,ul.topnav ul li.active {
      background: #0A1C0B !important;
    }
    ul.topnav li a:hover, ul.topnav ul li a:hover {
      background: #21301f !important;
    }
    
    
    /* Twitter widget */
    #twitter-widget-0 {
      display: none;
    }
    
    /* Story/Author image */
    .cimage, .round36 {
      display: none !important;
    }
    
    /* Padding between chapter selection and story */
    .storytextp {
      padding-top: 20px !important;
    }
    
    /* Max width of the story across the screen */
    #content_wrapper {
      min-width: 98% !important;
    }
    
    /* Size of the story text and the line spacing */
    #storytext {
      font-size: 1.15em !important;
      line-height: 1.4em !important;
    }
     
  13. NuitTombee

    NuitTombee Dark Lord

    Joined:
    Feb 14, 2010
    Messages:
    1,811
    Location:
    The Peach State
    Thanks pdo.

    Edit: Looks nice. :3

    [​IMG]

    The only problem left is with the profile page footer but eh, I can ignore that. I dunno why they decided to make the footer there so different.
     
    Last edited: Nov 27, 2013
  14. Snarf

    Snarf Squanchin' Party Bro! Prestige DLP Supporter

    Joined:
    Apr 27, 2007
    Messages:
    11
    Gender:
    Male
    Location:
    Forty-Six & 2
    High Score:
    1,832
    Before I added
    Code:
    @-moz-document domain("fanfiction.net") {
    to the latest DLP theme script, it affected the entirety of Firefox. Not sure if that was a screw up on my end or not.
     
  15. pdo91

    pdo91 Professor DLP Supporter

    Joined:
    Jan 11, 2009
    Messages:
    495
    Location:
    Colorado
    Nope, that's how the firefox version of stylish handles code. I left that part out this time - damned if I do, damned if I don't. :sherlock:
     
  16. Dark Syaoran

    Dark Syaoran Persona 4 Admin

    Joined:
    Jun 4, 2005
    Messages:
    6,056
    The first picture happens when you aren't logged in and click on reply for a review. Similar to one I've posted before. The second is while logged in and looking at private messages. The speech bubbles are all yellow.
     

    Attached Files:

  17. Dark Syaoran

    Dark Syaoran Persona 4 Admin

    Joined:
    Jun 4, 2005
    Messages:
    6,056
    Bump for justice.
     
  18. Narf

    Narf Administrator Admin DLP Supporter

    Joined:
    Apr 3, 2005
    Messages:
    5,068
    Location:
    Atlanta
    If you double post again imma have to ban you, yo.
     
  19. pdo91

    pdo91 Professor DLP Supporter

    Joined:
    Jan 11, 2009
    Messages:
    495
    Location:
    Colorado
    For your viewing pleasure. Change the 'background' color to #0A1C0B for dark green.

    Code:
    .panel_warning, .gui_warning, .round8 {
      background-image: none !important;
      background: #21301f !important;
      color: #BAD6c2 !important;
    }
     
  20. Dark Syaoran

    Dark Syaoran Persona 4 Admin

    Joined:
    Jun 4, 2005
    Messages:
    6,056
    Alas, I've found something else. Urgh. This appears when checking out my C2 archive within my account.
     

    Attached Files: