DFON style edits

Discussion in 'Feedback & Suggestions' started by James, Aug 18, 2015.

  1. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    I like to edit the style sheet for DFO Nexus. I have quite a few edits that would be useful for other people, so I'm posting them for others to use.

    To use these themes, you will need Stylish for your browser. Click the links for the Firefox version, and the Chrome version.

    The edits are small vanity changes to make the site more appealing to me, or to whomever uses them. It will only affect their view, like mods on DFO.

    Here's some for DFO Nexus:

    Custom link colors. You can change it to whichever color is your favorite. Also, make sure you choose the correct theme for the one you're using.
    Dark buttons for the dark theme.
    Remove the header image. Hate MFighter nipples? It's your lucky day!
    Miss the borders around everyone's avatar? This will add them back.
    Bigger avatars!
    Hide forum sections! (See below posts for a guide to choosing multiple sections.)
    _

    This isn't for DFO Nexus, but is for the DFO-World wiki.
    Dark theme for the wiki.

    I can also do completely new themes for some forums and websites.

    _____________

    I'll also take in custom requests if you'd like. I can give you a custom header image, background image, slight visual changes, etc.
     
    • Like Like x 5
    • Wizard Wizard x 1
    • Edgy Edgy x 1
    • List
    Last edited: Aug 28, 2015
  2. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    whys this stickied

    cool
     
  3. vera farmiga what life form does god take the most delight in?

    Posts:
    1,153
    how is it edgy to make the site more comfortable on the eyes
    fucking geeks
     
  4. Curt :denking:

    Posts:
    874
    option to make my own banner pls
     
  5. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    just give me the image you want as the banner. i'd need to crop it and make it the right size to fit.

    pm it to me if u dont want to post it public or w/e
     
  6. Curt :denking:

    Posts:
    874
  7. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    Since I'm not going to upload custom requests on the website, you're going to need to know how to put it in yourself.

    On Firefox:

    Find your Stylish icon.
    Write new Style -> Blank Style... .
    Paste the following code into the box.

    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("www.dfonexus.com") {
    
      #logoBlock {
        background-image: url("http://i.imgur.com/DfPLelI.png") !important;
        background-position: 50% top;
        background-repeat: no-repeat;
      }
    }

    For Chrome:

    Find your Stylish icon.
    Write Style For: www.dfonexus.com
    Make sure "Applies to" is set to "URLs on the domain". In the text box it should say dfonexus.com.
    Paste the following code in the box.

    Code:
      #logoBlock {
        background-image: url("http://i.imgur.com/DfPLelI.png") !important;
        background-position: 50% top;
        background-repeat: no-repeat;
      }
     
    • Like Like x 1
    • Useful Useful x 1
    • List
  8. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    I made a new style. This one hides forum sections.

    It's pretty much equivalent to a collapse system on other forums. This means you can now hide sections that you don't browse!

    You can install it here.

    __________________

    However, the simple install will only allow you to block only one section. In a few following lines, I'm going to teach you how to manually style it for your own pleasure! You can hide as many sections as you want, as well as certain sub-sections*!.

    *: Meaning, you can have class discussions still there, but only Fgunner and Mslayer will show if you so desire.

    To start:

    Find your Stylish icon.
    Write new Style -> Blank Style...

    Find your Stylish icon.
    Write Style For: www.dfonexus.com
    Make sure "Applies to" is set to "URLs on the domain". In the text box it should say dfonexus.com.

    The following spoiler will be the raw code. You will need to replace a few things, or add some things to make it work.
    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("www.dfonexus.com") {
      
    .node_(x) {
      visibility: hidden !important;
      display: none !important;
    }
      
    }
    Code:
    .node_(x) {
      visibility: hidden !important;
      display: none !important;
    }

    Paste the raw code into the page you opened up a second ago.

    This may look like a mess of information you might not know about, but the main thing you need to focus on is node_(x). (x) is the variable that you will replace with a number. Each section and subsection has a number, and putting the number where (x) is will make it hidden.

    DFO Nexus - 1
    • News & Announcements - 2
    • Events & Contests - 113
    • Introductions & Absences - 4
    • Feedback & Suggestions - 5

    The Marketplace - 5
    • Buying & Selling - 6
    • Professions - 79

    Dungeon Fighter Online - 7
    • General Discussion - 8
    • PvP Discussion - 10
    • Questions & Answers - 9
    • Guides & Game Mechanics - 13
    • Looking For Party - 72
    • Guild Recruitment - 16
    • Media - 14
    • Mods - 15
    • Other Versions - 17

    Class Discussion - 18
    • Male Slayer - 21
    • Female Slayer - 87
    • Female Fighter - 26
    • Male Fighter - 27
    • Male Gunner - 28
    • Female Gunner - 29
    • Female Mage - 30
    • Male Mage - 31
    • Priest - 32
    • Thief - 33
    • Knight - 84

    Everything Else - 34
    • Off-Topic Discussion - 35
    • Other Games - 36
    • Artist's Corner - 70
    • Spam - 37

    User Groups & Guilds - 71
    Guilds - 75**

    **: This is the one on the bottom of the page, not guild recruitment.
    [/list][/list]

    There's a lot here. If you want to simply hide one section or sub-section, just copy the raw code, and replace (x) with the number. If you want more, it will be slightly more complicated.

    To hide multiple sections, you will need to make more. You will need to put a comma after the (x), and then put a space.
    After that you will write .node_(y). (y) will be the second section you want to hide. Do the same as you did with (x). If you wish to hide more, you will do the process starting from the comma again.

    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("www.dfonexus.com") {
      
    .node_34, .node_2, .node_18 {
      visibility: hidden !important;
      display: none !important;
    }
      
    }
    

    Now, give the style a name. Any name. "Section hider." It needs a name to save. There should be a text-box for it.
    That should be it! You can now hide all the sections you want. If you wish to show the section, click the Stylish icon, and uncheck the style.
     
    • Useful Useful x 2
    • Winner Winner x 1
    • List
    Last edited: Aug 23, 2015
  9. Poison Guest

    Moved & Stickied to Feedback & Suggestions.

    Good work. :)
     
  10. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    New style. It's a simple one.

    Bigger avatars!
    They're 125x125px. I tried 150x150, but it actually looked kinda huge.
     
    • Winner Winner x 1
    • Useful Useful x 1
    • Idol Idol x 1
    • List
  11. James ░░░░░░░░░░░░░░

    Posts:
    2,376
  12. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    not quite dfon, but

    [​IMG]

    WIP pixiv dark theme
     
  13. Space Fish Global Moderator

    Posts:
    3,843
    IGN:
    Sociopath
    Server:
    Cain
    It's kinda flat. Needs some contrast.
    You're getting better with this though.
     
  14. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    i was going for flat. i like that
     
  15. James ░░░░░░░░░░░░░░

    Posts:
    2,376
    I brought back the old dark theme. Mostly for myself, I prefer it. It's not perfect.

    Unfortunately, the code is too long for stylish to allow, so you're going to need to input it manually. here's the pastebin for the code
    Stylish -> Create new style -> Blank Style -> Paste the entirety of this into it.


    edit: WARNING: this page is extremely fucking long and may crash your browser if anyone specifically wants to use it but can't access that page, i will upload a .txt file to download.
     
    Last edited: Mar 28, 2016
  16. Necrofancy Blame Blob™

    Posts:
    1,252
    IGN:
    You already know!
    Server:
    Cain
    Some people wanted to force a specific banner for DFO Nexus, instead of having the rotating one, so here you go:

    DFO Nexus - Force Specific Header

    The index for all the headers are here, if you want another header image instead.
     
    • Like Like x 1
    • Wizard Wizard x 1
    • List
  17. luminantAegis Page of Light

    Posts:
    258
    Alternatively use this link and load it infinitely faster.
     
  18. Necrofancy Blame Blob™

    Posts:
    1,252
    IGN:
    You already know!
    Server:
    Cain
    I don't know if this is a recent change with the interface, but today I noticed that you need to make adjustments to this style edit depending on whether you prefer light or dark theme.

    Light theme needs to affect #header, Dark theme needs to affect #logoBlock
     

Users Viewing Thread (Users: 0, Guests: 0)