Customizing the new forum — Guild Wars 2 Forums

Customizing the new forum

Khisanth.2948Khisanth.2948 Member ✭✭✭✭
edited November 4, 2017 in Players Helping Players

I really don't like the style of the new forum so I decided to change it. Stylus makes this very easy to do.

Here is what it looks like https://imgur.com/a/CPs2X

If you like it you can either copy the CSS code below or download it from https://pastebin.com/FAppXqVX

Edit: it looks like the forum doesn't like unicode characters being pasted in so a bit at the end has to be deleted but that just adds a chain next to the timestamp of a post to make it more obvious that it is usable for getting a link to the post.

@-moz-document domain("en-forum.guildwars2.com") {
/* main sections */

/* shrink the space between threads */
.Item td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* hide the last person to post in a thread column */
.Section-DiscussionList.UserLoggedIn .DiscussionsTable .BlockColumn-User.LastUser {
    display: none;  
}

/* hide user avatars */
.Section-DiscussionList .DiscussionsTable .BlockColumn-User .PhotoWrap {
    display: none;  
}

/* increase size of the views column to avoid overlapping the number with the gear icon */
.DataTable td.CountViews {
    min-width: 110px;   
}

/* increase the size of the thread creator column so the name and timestamp can both fit */
.Section-DiscussionList .DiscussionsTable .BlockColumn-User.FirstUser {
    width: 250px;
}

.Section-DiscussionList .DiscussionsTable .BlockColumn-User.FirstUser .UserLink {
    float: left;
}

.Section-DiscussionList .DiscussionsTable .BlockColumn-User .BlockTitle,
.Section-DiscussionList .DiscussionsTable .BlockColumn-User .Meta {
    float: right;
}

/* thread that has been read and contains 1 or more new posts */
.Section-DiscussionList .DiscussionsTable .DiscussionName .HasNew.HasNew {
    background-color: lightgreen;
}

/* new thread that is either completely unread or has not been fully read yet */
.Section-DiscussionList .DiscussionsTable .DiscussionName .HasNew.JustNew {
    background-color: lightblue;
}

/* background and foreground for a thread that has been read */ 
.Section-DiscussionList .DiscussionsTable .Read {
    background-color: whitesmoke;
}
.Section-DiscussionList .DiscussionsTable .Read a.Title {
    color: lightgrey;
}
}

@-moz-document domain("en-forum.guildwars2.com") {
/* inside threads */

/* hide avatar icons */
.Section-Discussion .Content .Item-Header .AuthorWrap .Author .PhotoWrap {
    display: none;  
}

/* border with rounded corners around each individual post */
.Section-Discussion .Content .Item {
    padding: 2px;
    border-radius: 8px;
    margin-bottom: 5px;
    border: 4px solid lightgray;
}
.DataList .Item {
    background: none;   
    border-bottom: 4px solid lightgrey;
}

.Section-Discussion .Content .Item-Header::after {
    background-image: none; 
}

.CommentHeader, .DiscussionHeader {
    border-bottom: 4px solid lightgray; 
}

.Section-Discussion .Content .Item .Item-BodyWrap .Item-Body {
    width: 100%;
    display: grid;
    grid-template-columns: 8fr 2fr;
    grid-template-rows: fit-content;
    grid-template-areas:
        "m r"
        "s s"

}
/* change the post body and report/quote/etc. buttons to be side by side instead */
.Section-Discussion .Content .Item .Item-BodyWrap .Item-Body .Message {
    grid-area: m;
}

.Section-Discussion .Content .Item .Item-BodyWrap .Item-Body.Signature {
    grid-area: s;
    grid-column: span;
}
.Section-Discussion .Content .Item .Item-BodyWrap .Item-Body.Signature p {
    min-width: 1000px;  
}

.Section-Discussion .Content .Item .Item-BodyWrap .Reactions {
    grid-area: r;
    min-width: 150px;
}

.Section-Discussion .Content .Item .Item-BodyWrap .InlineTags {
    grid-area: s;
    float: left;
    clear: both;
}
body.Section-Discussion .ReactMenu {
    display: block;
    margin-left: 0;
}

.Reactions .ReactButton {
    width: 100% !important; 
}

.PollQuestion {
    clear: both;
}

/* prevent code blocks from squishing the reaction menu */
code, pre {
    max-width: 800px;   
}
}

Note on the colors on the thread listing page.

Blue new = thread you haven't read yet

Green new = thread you've read but contains new posts you haven't read

Row with grey background = thread you've read and there are no new posts

There is no indicator for "thread you have started reading but haven't fully caught up yet" since I haven't figured out how or if the forum handles that.

Edit: 2017-11-04 Updated to handle the signature block

Comments

  • I've been using this for nearly a week and I love it. The forums look better to me: it's much easier to see what's new, what's tagged, and what I've recently read. Plus, it hides the near-identical avatars that take up so much screen real estate.

    Like the OP, I'm using Stylus to overwrite ANet's preferred Style Sheets and it works a treat. It also makes it easy to remind myself how the forums look for everyone else (plot twist: I can't go back; it's just too hard to read).

    Great work, OP.

    "Face the facts. Then act on them. It's ...the only doctrine I have to offer you, & it's harder than you'd think, because I swear humans seem hardwired to do anything but. Face the facts. Don't pray, don't wish, ...FACE THE FACTS. THEN act." — Quellcrist Falconer

  • joneirikb.7506joneirikb.7506 Member ✭✭✭✭

    Thank you, that helped a whole lot to make this forum readable!

    Can this be used to change the colors (night mode) as well ?

    Elrik Noj (Norn Guardian, Kaineng [SIN][Owls])
    "Understanding is a three edged sword: your side, their side, and the truth." - J. Michael Straczynski
    Currently playing: One Must Fall 2097, Spirit Island (board game)

  • Khisanth.2948Khisanth.2948 Member ✭✭✭✭

    @joneirikb.7506 said:
    Thank you, that helped a whole lot to make this forum readable!

    Can this be used to change the colors (night mode) as well ?

    Sure but that will take a bit more effort. For example those profession pictures on the side really clashes with a black theme.

  • Clever. You must be an Asuran. Have you met Taimi yet? Still waiting on Rata Sum to invent a way to make gold in the game.

  • Khisanth.2948Khisanth.2948 Member ✭✭✭✭

    @Evolseed.9104 said:
    Clever. You must be an Asuran. Have you met Taimi yet? Still waiting on Rata Sum to invent a way to make gold in the game.

    There is already plenty of gold. Not much demand for it though ...

  • joneirikb.7506joneirikb.7506 Member ✭✭✭✭

    @Khisanth.2948 said:

    @joneirikb.7506 said:
    Thank you, that helped a whole lot to make this forum readable!

    Can this be used to change the colors (night mode) as well ?

    Sure but that will take a bit more effort. For example those profession pictures on the side really clashes with a black theme.

    Ah ok. Personally don't care about the avatars, and for some reason they doesn't display after I added your script above, and I'm quite pleased without. Thought it was a feature! ;)

    Found that since the avatars are all the same, they confused more than I gained by them anyways. I find it much easier now that my eyes look over the username instead, much easier to follow who says what.

    Elrik Noj (Norn Guardian, Kaineng [SIN][Owls])
    "Understanding is a three edged sword: your side, their side, and the truth." - J. Michael Straczynski
    Currently playing: One Must Fall 2097, Spirit Island (board game)

  • Khisanth.2948Khisanth.2948 Member ✭✭✭✭

    @joneirikb.7506 said:

    @Khisanth.2948 said:

    @joneirikb.7506 said:
    Thank you, that helped a whole lot to make this forum readable!

    Can this be used to change the colors (night mode) as well ?

    Sure but that will take a bit more effort. For example those profession pictures on the side really clashes with a black theme.

    Ah ok. Personally don't care about the avatars, and for some reason they doesn't display after I added your script above, and I'm quite pleased without. Thought it was a feature! ;)

    Found that since the avatars are all the same, they confused more than I gained by them anyways. I find it much easier now that my eyes look over the username instead, much easier to follow who says what.

    I meant the black and white images on the left and right. With the scrapper, chrono, dh, etc. Hiding the avatars IS a feature. :)

  • joneirikb.7506joneirikb.7506 Member ✭✭✭✭

    @Khisanth.2948 said:

    @joneirikb.7506 said:

    @Khisanth.2948 said:

    @joneirikb.7506 said:
    Thank you, that helped a whole lot to make this forum readable!

    Can this be used to change the colors (night mode) as well ?

    Sure but that will take a bit more effort. For example those profession pictures on the side really clashes with a black theme.

    Ah ok. Personally don't care about the avatars, and for some reason they doesn't display after I added your script above, and I'm quite pleased without. Thought it was a feature! ;)

    Found that since the avatars are all the same, they confused more than I gained by them anyways. I find it much easier now that my eyes look over the username instead, much easier to follow who says what.

    I meant the black and white images on the left and right. With the scrapper, chrono, dh, etc. Hiding the avatars IS a feature. :)

    Ooh! Bonus feature! \m/ ^_^ \m/ (Mostly been annoyed by them, as I run nightmode plugin, so they are flashed white on my screen)

    Anyways, nice job so far, loving it. Comboed with nightmode plugin, it makes the forums pretty decent.

    Elrik Noj (Norn Guardian, Kaineng [SIN][Owls])
    "Understanding is a three edged sword: your side, their side, and the truth." - J. Michael Straczynski
    Currently playing: One Must Fall 2097, Spirit Island (board game)

  • shadow.6174shadow.6174 Member ✭✭

    I know this is an old thread and such but it's still relevant. By chance @Khisanth.2948 is there any update to the CSS? It seems to be broken right now, the names are all grouped at the top of page.

  • Khisanth.2948Khisanth.2948 Member ✭✭✭✭

    That is odd. I don't remember running into that issue.
    https://pastebin.com/raw/JghMqpNf is what I am using right now. Main difference was to move the "Go To Top" button.

  • shadow.6174shadow.6174 Member ✭✭

    Oh my mistake. I just noticed that it was a dark theme by @StinVec.3621 based on yours @Khisanth.2948. This one https://imgur.com/a/3WKKO
    (They just put a note telling that it was based on this one, with a link to this thread. I must have skimmed over and thought it came from here :P )

  • StinVec.3621StinVec.3621 Member ✭✭✭✭
    edited July 13, 2018

    @shadow.6174 said:
    Oh my mistake. I just noticed that it was a dark theme by @StinVec.3621 based on yours @Khisanth.2948. This one https://imgur.com/a/3WKKO
    (They just put a note telling that it was based on this one, with a link to this thread. I must have skimmed over and thought it came from here :P )

    Thanks for tagging me as well. I did base the side-by-side layout on @Khisanth.2948's theme, though I've made many, many updates and alterations to the theme over the past year and have also recently begun providing it in multiple color schemes.

    If many user names in threads are all grouped at the top, it is likely an out-of-date version that you are using. If you like the theme and would like to continue using it, please consider updating to the current version to correct any display issues (current images and CSS available via my signature). Sharing any thoughts on the theme via PM are welcome as well.

    WOW - Done with forums for good now! - Someone creates a thread about Pharus's light on crit effect asking if it is a bug - I get warned for being "off topic" for commenting how to use the search and pointing out threads discussing Pharus and it being an intended effect... Goodbye all. Happy gaming.

©2010–2018 ArenaNet, LLC. All rights reserved. Guild Wars, Guild Wars 2, Heart of Thorns, Guild Wars 2: Path of Fire, ArenaNet, NCSOFT, the Interlocking NC Logo, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.