Customization

Custom CSS can be added directly as an option. Javascript can also be added to run either when the extension is first loaded, on each page change, or when the DOM is loaded.

All these code snippets are added under the "Advanced" tab in the settings popup. The fields only show one line, so it's best to edit what you want somewhere else and paste it in when you're finished.

Here are some examples of what can be done:

CSS Changes

Margin width

You can change the margin width for the post and comments. To the "Custom CSS" field, add:

/* Width of the post */
.single-post-container > .container {
    width: 1000px;
}

/* Width of the comments */
.comments-page > .container {
    width: 1000px !important;
}

Replace with 1000px with whatever width you want. If you're using the old styling setting, you'll have to set post width to 50px more than the comment width if you want them to match visually:

/* Width of the post */
.single-post-container > .container {
    width: 1050px;
}

New comment formatting

New comments are given the .new-comment class, so you can use that to format them however you like. To change the background for example, add to the "Custom CSS" field:

.new-comment .comment-content {
    background: #e67e2240;
}

In the case of background, if you're using the old styling setting, you'll need to change it to

.new-comment .comment-content td:nth-child(2) {
    background: #e67e2240 !important;
}

Check out Flat UI for color ideas.

See the structure of comments on the site for more options.

Custom string for new posts

To change the text that marks new posts (default "~new~"), add to the "Custom CSS" field:

/* hide the default text */
.new-tag-text {
    display: none;
}

/* new text */
.new-tag-css:after {
    content: "<text>";
    color: red;
}

You can apply any styling you want to .new-tag-css:after, including size, background color, and opacity.

Unfortunately, any text you add may not be searchable depending on your browser.

JS Changes

Add comment permalinks to history

Right now, clicking the button to go to the a parent comment isn't reflected in the browser history. To do that, in the "Custom onStart JS" field, put:

$(document).on("click", ".comment-actions > span:nth-child(1)", function() {
    let comment = $(this).closest(".comment");
    let parentComment = $(comment).parent().closest(".comment");
    if (parentComment.length > 0) {
        window.location.hash = getCommentId(parentComment[0]);
    }
});

Collapse all comments on load

If you want to collapse all the comments so you just see the top level ones whenever you first load a page, add to the field "Custom onLoad JS":

setTimeout(function() {
    $(".comment > .comment-list > .comment-list-collapser:not(.custom-collapser)").click();
    $(".custom-collapser").remove();
}, 5000);

This should work with the "Load all comments" option. If it doesn't, you can try increasing the timeout 5000 to something like 10000. (There isn't currently a good way to do this other than wait for a while and hope all the comments have appeared by then.)