How to Customize Remark42 CSS via a Proxy Workaround

If you're using Remark42 to implement comments on your static website, you may also be looking to customize its CSS to better fit your site theme. Remark42 integrates itself with your website via an iframe. If you set up Remark42 under a subdirectory you're in luck as you are able to change that content directly without violating any browser security features. If you set up your Remark42 instance under a subdomain (e.g. remark42.yourdomain.com), you cannot edit the iframe content as it would be violating the Same Origin Policy. The only solution that exists is to proxy /web/remark.css and/or /web/last-comments.css to your new CSS file(s). The best solution also stores the original CSS under a different path such that our CSS file can import the previous version and override the styles we wish to change. Below is an example of how you could do this with Nginx and a static site built using Gatsby.

Proxying to the updated CSS

server {
    listen      80;
    server_name remark42.yourdomain.com;
    
    #...

    location = /web/remark.css {
        proxy_pass http://gatsby:8000/remark-updated.css;
    }
    
    location = /web/last-comments.css {
        proxy_pass http://gatsby:8000/last-comments-updated.css;
    }

    location /web-orig/ {
        proxy_pass http://remark42:8080/web/;
    }
}

Extending the CSS

yourdomain.com/remark-updated.css

@import '/web-orig/remark.css';

/* As an example, let's remove the padding from around the Remark42 comment box. */
body {
	padding: 0;
}

yourdomain.com/last-comments-updated.css

@import '/web-orig/last-comments.css';

/* Override whatever CSS you would like here. */

Remember: Your CSS changes will not be applied if your CSS selector is less specific than the one found in the original CSS files.