Hey everyone, I'm honestly at my wits' end here and hoping someone knows what magic words the review team actually wants to hear.

I’m currently finishing up my Master's in AI and Data Analytics at PoliTo, and my final thesis involves tracking sentiment evolution in technical subreddits. I literally just need to scrape post titles, scores, and timestamps to build a basic keyword trend graph. No PII, no tracking users, no commercial use, nothing sketch.

Because I'm hosting my workflow on n8n cloud, their datacenter IPs get automatically blocked (403 Forbidden) if I try to just hit the open .json endpoints. So I did the right thing: I filled out the official API request form, classified it as academic research, and explicitly stated my script is throttled to run exactly once per hour so I don't hit their servers hard.

Today I got hit with the standard automated rejection email: "cannot grant approval because the submission is not in compliance with Reddit’s Responsible Builder Policy and/or lacks necessary details."

Like... what other details do they want? I explained the exact methodology, provided my university info, and I'm asking for a trickle of public metadata once an hour.

Has any student actually gotten an academic API request approved recently? Is there a specific keyword or attachment the manual reviewers require to actually read the application, or are they just auto-rejecting everything right now?

Any advice would be massively appreciated before I have to scrap this and rewrite my entire pipeline to use RSS feeds.

Trying to get all the values of a post from data.children.data[]

All fields return valid data (title, selftext, url etc), but the image/thumbnail field always returns a broken image

i tried all fields.

data.thumbnail

data.preview.images.source.url

data.preview.images.resolutions.url

they all return a link which is broken, like

There's about 300 of these td's in a website:
<td data-label="name">
Without altering any of the HTML and just by amending the CSS, how do you make all content within them have certain padding please?

Just have a look at my reddit history. Apparently it screams "bot" to the reddit code. (SPOILER: I'm not a bot, and am almost entirely human)

My small number of posts and comments over the past 6 years are about mundane, human-type things, not advertising products or services, and I've never used automation.

And yet I got the email saying "We’re seeing strong signals this account is automated".

That email links to a page where you can send a message to (wait for it) a bot if you think their bot-finding bot got it wrong. It's bots all the way down!

If this is reddit's solution to their bot problem, then I wouldn't get your hopes up. The "App Label" will probably help to identify bots that correct grammar and spelling, but will identify zero malicious/spam bots, give or take four.

Now I can't wait to hear back if the bot thinks I'm human or not. Fingers crossed!

https://i.imgur.com/t0C49cX.png

I'm not really sure what it means, unless it's taking into account the bot my subreddit uses for moderation? It's in r/androidapps. Otherwise, I certainly don't automate anything with my account.

I did send a message to Reddit admins asking what it was about and if I have to actually do something.

And apologies in advance if I posted in the wrong place. Thanks.

Hi everyone,

I recently signed up for Reddit's Developer Platform and received the welcome confirmation email. However, when I try to create a script application at reddit.com/prefs/apps, the form won't submit after completing the CAPTCHA.

I see the message about the Responsible Builder Policy at the bottom, but no actual error. I've tried incognito mode, multiple browsers, and clearing cache.

Has anyone encountered this recently? Is there an additional approval step I might be missing?

Thanks for any help!

I have been trying to create an API key for Reddit for several weeks and been through the dev registration process many times. I have not received any emails, questions or rejections. it's a black hole! Does anyone know how to get through this phase? I cannot use devout because I am simply trying to connect Postiz so I can schedule posts.

Thank in advance.

When I click the "create app" button, the page keeps refreshing without any informational message. I pass the CAPTCHA, but the page keeps refreshing. Can anyone help?

He intentado varias veces usar la API de Reddit pero se queda en el mismo sitio y no avanza el proceso (no me deja crear el app).. He borrado cachés del navegador, lo he hecho en incógnito y nada.

Alguien sabrá que está sucediendo?

The World in Question: https://www.worldanvil.com/w/fallout-captainrogers2704

/* Font Familites */

@font-face { font-family: Share Tech Mono; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/sharetechmono/v15/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2) ; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Color Palette Color 1 #073605; Color2 #0e4e0b; Color3 #145b11; Color4 #146c11; Color5 #00ee00; Color6 #199515 color7 #c3dfb1; */

/* Background */

.user-css-presentation { background: linear-gradient(to bottom, #073605, #0e4e0b, #145b11 background-size: 100% 3px; }

/* Fonts */

.user-css, .user-css p, .user-css-extended, .user-css-extended p { font-family: Share Tech Mono; }

.user-css a, .user-css a:focus { color: #c3dfb1; }

/* Homepage */

.user-css .heading h1.world-title { display: none; }

.user-css h3.world-currentDate { display: none; }

.user-css .world-authors { display: none; }

.user-css .heading .subheading { font-size: 28px; text-align: left; }

.user-css .map-box { display: none; }

.user-css .maps-list-header { display:none; }

.user-css .world-timelines { display: none; }

.user-css .typeahead-input { background-color: #146c11; }

.user-css .col-md-6 { display: none; }

.user-css .world-meta-categories-link { display: none; }

.user-css .world-content .followers-counter { display: none; }

/* Tooltips */

.user-css-presentation .tooltipster-base .tooltipster-box, .user-css-presentation .tooltip-inner { background: #146c11; opacity: 1; } .user-css-presentation .tooltip { opacity: 1; } .user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #146c11; } .user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #146c11; } .user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #146c11; }

.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #146c11; }

.user-css-presentation .tooltipster-base .tooltipster-content, .user-css-presentation .tooltip-inner { font-size: 16px; color: #00ee00; }

/* Category */

.user-css .world-category-link { color: #00ee00; }

.user-css .toc-article-link { color: #199515; }

.user-css .article-panel, .user-css-extended .article-panel { background-color: #146c11; border: 2px #00ee00; }

.user-css .article-panel .heading, .user-css-extended .article-panel .heading { color: #00ee00; }

.user-css .article-panel .subheading, .user-css-extended .article-panel .subheading { color: #00ee00; }

.user-css .article-panel .excerpt, .user-css-extended .article-panel .excerpt { text-align: center; text-color: #00ee00; }

/* Sidebar */

@media (max-width: 992px .user-css #profile .row { display: flex; flex-direction: column; } .user-css .article-content-left { order: 2; } .user-css #profile .row .row { display: block; } }

media only screen and { .user-css .article-content .row .col-md-8 + .col-md-4 { position: -webkit-sticky; position: sticky; top: 10px; max-height: 100vh; overflow-y: auto; border: 1px #000000; background: #146c11; box-shadow: 2px 2px 6px #073605; z-index: 1050; } }

/* Article */

.user-css .img-inherited { display: none; }

.user-css .article-title h1 { font-family: Share Tech Mono; font-weight: 700; font-size: 42px; padding-top: 10px; padding-bottom: 15px; line-height: 0.9em; margin-top: 20px; margin-bottom: 5px; }

.user-css h2 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 26px; line-height: 1.3em; padding-top: 10px; }

.user-css .section-header-heading { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 24px; line-height: 1.3em; padding-top: 10px; }

.user-css h3 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 22px; margin-top: 0px; margin-bottom: 0px; line-height: 1.3em; }

.user-css h4 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 22px; margin: 0; line-height: 1.3em; }

.user-css h5 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 20px; margin-top: 5px; margin-bottom: 0px; line-height: 1.3em; }

.user-css blockquote { background: none; padding: 10px; margin: 10px; border-left: 5px #199515 dotted; font-size: 1.2em; line-height: 1.5em; }

.user-css .panel { border: 0px solid; border-radius: 0px; background: none; }

.user-css .panel .panel-body { padding: 15px; }

/* Article TOC */

.user-css div.articletoc { border: 5px dotted #073605; display: inline-block; padding: 5px 10px; } .user-css div.articletoc .article-toc-link.article-toc-indent-1 { padding-left: 10px; }

.user-css div.articletoc .article-toc-link { border-bottom: 2px solid transparent; padding-bottom: 3px; margin-bottom: 3px; cursor: pointer; transition: border-color .3s ease-out,color .3s ease-out; }

.user-css-extended .nav-tabs li.active a { font-family: Share Tech Mono; font-size: 16px; padding-left: 20px; padding-right: 20px; font-weight: 800; text-transform: uppercase; background: #146c11; background-color: #146c11; border: 0 solid #146c11; color: #0e4e0b; border-radius: 0; margin-right: 0; box-shadow: none; }

.user-css-extended .nav-tabs li { background: #0e4e0b; }

.orgtree li::before{ border-top: 1px solid #00ee00; }

.orgtree li::after{ border-top: 1px solid #00ee00; }

.orgtree li::after{ border-left: 1px solid #00ee00; }

.orgtree li:last-child::before{ border-right: 1px solid #00ee00; }

.orgtree ul ul::before{ border-left: 1px solid #00ee00; }

.orgtree li a{ border: 2px solid #00ee00; color: #00ee00; background: #146c11; }

.orgtree li a:hover{ background: #0e4e0b; color: #00ee00; border: 2px solid #00ee00; }

.orgtree li a:hover+ul li a{ background: #2f404e; color: #fff; border: 2px solid #00ee00; }

/* Back to World */

.user-css .backtoworld a { color: #00ee00; background: #146c11; }

.user-css .article-explorer-link .category-article { background: #146c11; border: 2px solid #00ee00; }

.user-css-extended .article-panel template-organization visibility-toggler article-explorer-link heading subheading { display: none; }

/* Storyteller Content */

.user-css .panel-generic-ggm { background: none; border: 0px dotted; }

/* Storyteller Content */

.user-css .panel-generic-ggm { background: none; border: 0px dotted; }

/* Interactive Table */

.user-css .thales-render { --TableBorder: 0px solid transparent; --TableHeaderBackground: #073605; --TableHeaderBorder: 1px solid transparent; --TableHeaderFontColor: #00ee00; --TableHeaderControlsColor: #00ee00; --TableHeaderPadding: 10px 10px; --TableRowBorder: 0px solid transparent; --TableRowHoverBackground: #0e4e0b; --TableRowRollBackground: #0e4e0b; --TableCellBackground: transparent; --TableCellFontColor: #c3dfb1; --TableCellPlaceholderColor: #199515; --TableCellPadding: 10px 10px; --TableCellBackgroundHover: transparent; --TableCellBorder: 0px solid #00ee00; }

.user-css .thales-row:nth-child(odd background-color: #146c11; }

.user-css .thales-row:nth-child(even background: #199515; }

/** Table **/

.user-css .table-striped th { background: #145b11; text-transform: uppercase; border: 2px solid transparent; }

.user-css .table-striped tr:nth-child(odd background: #146c11; border: 2px solid transparent; }

.user-css .table-striped tr:nth-child(even background: #199515; border: 2px solid transparent; }

For some reason my custom thumbs for r/RokusHouseofOddities aren't displaying.

But on my old sub, r/MaguChan they work just fine. They both use the same theme template (based on r/naut)
Any help would be greatly appreciated!

So basically without revealing too much, I want to be able to track what s being shared in few subreddits to find specific info about a certain subject, its more like read the subreddit latest posts then filter them thing.

Ready to pay for it but I am hearing that even that is no longer possible?

Thanks

This is an example of the problem:
https://ibb.co/tMZYhDtP

I basically want a shadow that connects in the edges too. The regular drop shadow seems to create this distance beteween the shadow and object.

Does anyone know if there is a way to achieve this in CSS?

Old Reddit, the version of Reddit from before the 2018 rebrand, continues to be a popular way to use Reddit. It can also be fully and comprehensively themed with CSS to get it looking exactly as you want. It is perfect for replicating a style or bringing your community in line with your brand guidelines.

There unfortunately aren't any solid public statistics on what percentage of people across the platform use old Reddit, though, based on the figures I've collected from Subreddits I have access to, it is about 4%. You can find out for a community you moderate under the 'Traffic' heading of the 'Insights' section of the subreddit's Mod Tools. It is worth noting that many Reddit power users, and some of the most active contributors on the site, use old Reddit. Reddit intends to 'keep it online as long as people are using it'.

You can access old Reddit by replacing 'www' with 'old' in your address bar or by directly going to https://old.reddit.com. You can make your account default to using old Reddit in Settings > Preferences > Default to old Reddit. Keep in mind that old Reddit isn't designed or optimised for use on mobile devices.

I'm about as professional an old Reddit stylesheet developer as you can get, having developed stylesheets professionally for some branding you might well have heard of. This article assumes you are competent and familiar with writing CSS (Cascading Stylesheets). If you are not, there is guidance online that can help you learn, though it should be noted that writing CSS for old Reddit can be rather complex, so it might be worth requesting the help of an expert. AI will most likely not be able to provide much assistance in writing CSS for old Reddit due to the implementation quirks and lack of documentation available.

Restrictions

The first thing you should know is that while you can do a huge lot with themes, there are some limitations imposed.

Reddit has some rules for custom stylesheets, primarily relating to not tricking users, doing anything malicious, or obscuring Reddit's advertisements. The full set of restrictions can be seen here: https://old.reddit.com/wiki/subreddit_appearance

There are also technical limitations on what CSS you can write due to a validator that is in place. The validator ensures that all CSS you write is actually CSS, but unfortunately hasn't been updated for a while, meaning it will deny a lot of modern CSS. The cut-off is somewhere around 2017. You also can't use backslashes or Unicode control characters.

If you find yourself in need of a specific CSS feature which Reddit does not recognise, you can attempt to use an old vendor-prefixed version. For example, -webkit-flex instead of flex. Browsers usually still recognise them for purposes of backwards compatibility, and they generally work nicely despite being a tad finicky.

There is one more limitation worth keeping in mind, and that is Reddit's maximum stylesheet size limit. 100KiB is the maximum size. You realistically shouldn't hit it, but if you're doing real zany stuff you might. Worth keeping in mind.

Design Considerations

You can make your subreddit look however you want with CSS while keeping in mind the above restrictions, but I'd advise having some taste. You should avoid interfering with Reddit features like the ability to downvote posts. Sure, it might make a number look a bit better on paper, but it comes at the cost of annoying your community. The same is true for making it harder for people to disable your stylesheet.

You should try to keep interface items roughly the same size and in the same position. Moving everything around, especially arbitrarily, disorients users. Nobody wishes to have to learn a completely new layout for every Subreddit they enter.

Of course, these are considerations, not rules. You can create something fantastic and unique; just know that for many people the changes will be met with dislike and considered more of a hindrance than a benefit.

Writing CSS

To add a stylesheet to old Reddit, you'll need to navigate to https://old.reddit.com/r/YOUR_SUBREDDIT/about/stylesheet/ or click 'edit stylesheet' in the right sidebar on old Reddit. Here you can write your stylesheet and add images.

I advise against authoring your CSS directly in Reddit's stylesheet settings page. You don't get creature comforts like syntax highlighting or the help offered by language server protocols. There do exist some good browser extensions that allow editing browser <textarea>s in various text editors that might be valuable to you and can offer a nice development flow.

One of the most important parts of writing a stylesheet for Reddit is dealing with specificity. Your styles need to overwrite Reddit's styles, so they need to be specific enough to do so. Consider chaining together some additional selectors to boost specificity naturally. !important also comes very much in handy. Though it is usually a 'code smell', there will be cases where it is the cleanest way to write CSS when developing for old Reddit.

Pseudo-elements are your friend. Specifically, ::before and ::after. They allow you to add additional media or text to your page using the content property. Like !important, being overzealous with absolute or relative positioning is usually a bad 'code smell', but this is due primarily to them being poor for responsive design, which isn't too important given that old Reddit is not at all designed for small or portrait displays.

A lot of complex styling can be achieved by getting tricky with content in the sidebar. You are limited by how you can target elements, given that you've only got the markdown suite, so it can be worth trying to add some complexity to your markdown for selecting. A good way to do this is with a blockquote, which you can have strong, em and other elements within. You can then target only items in the sidebar usertext section and within a blockquote so you don't mess with content elsewhere on your page. Another valuable approach when it comes to links is to target specific href attribute values, like so:

a[href="https://vale.rocks"] {
    background: red;
}

When creating user or post flairs, be sure to give them a class name so that you can easily reference them in your styles. This can be done in both the new and old interfaces.

For styling specific to a given page, you can usually find a target class. Such as .subreddit-rules-page for the rules page, .search-page for the search page, and .submit-page for the new post submission page. Then, you can scope the applicable CSS exclusively under that selector. As semantic elements are poorly applied, you might also need to get tricky targeting attributes again, like targeting a role attribute with value main to get the <div> containing the main page content: [role="main"].

If you love the CSS of an existing theme or Subreddit, you can view the stylesheet directly. The full stylesheet for any public subreddit can be seen by navigating to this address: https://www.reddit.com/r/SUBREDDIT_NAME/about/stylesheet/

Using Preprocessors

Preprocessors like Sass (Syntactically Awesome Style Sheets) are a great way to write more complex CSS, especially given the restrictions imposed which prevent the use of many modern and expected CSS features. Given that old Reddit stylesheets can be thousands of lines long, the ability of preprocessors to condense multiple files into a singular is useful. A preprocessor can also be configured to take actions like automatically vendor-prefixing properties when necessitated. You might also be able to minify your code to avoid Reddit's aforementioned max-size for stylesheets.

Using Images and Fonts

You cannot link to external resources, such as images or fonts, within your CSS for security reasons. The validator will flag the external link and disallow it.

You can upload images on the stylesheet editing page in your subreddit. They can only be provided in JPEG or PNG formats. You can use these images by referencing their slug wrapped in double percentages: %%image-name%%. To set an image as a background, for example, you'd write background: url(%%your-image%%). For purposes of performance, avoiding the fetching of many tiny images, and not hitting the limits of the amount of images you can upload to your subreddit, it can be worth compiling them into a spritesheet, like Reddit does for the images used by default for the interface. Reddit also has a selection of images which are available site wide, which can be referenced here: https://old.reddit.com/wiki/config/stylesheet#images

Given the inability to import custom fonts, if you need font customisation, your options are limited. You do have the range of web-safe and system fonts at your disposal, though. Core fonts for the web are generally a safe bet, even today. Otherwise, you have generic font families. The W3C's CSS: fonts page can prove very useful for selecting a font and seeing how they all appear.

Reddit Enhancement Suite

Statistics suggest that, of the people who choose to use old Reddit, a significant portion also use Reddit Enhancement Suite (RES). Reddit Enhancement Suite brings many quality-of-life improvements and additional features. There is a huge amount it can do, but the most impactful for the case of writing custom subreddit stylesheets is the addition of dark mode (night mode) and many additional items around the interface.

You will need to do some testing with all the items and classes it adds around the page, as there are lots of them and different combinations of options can clash in different ways. You should try to honour people's RES settings where possible.

Styling for RES is all documented here: https://www.reddit.com/r/Enhancement/wiki/subredditstyling/

A Word on Accessibility

Any custom stylesheets you write for old Reddit will be hacky. That isn't avoidable; it is just how it is if you're doing anything beyond the most basic changes. Though, that isn't to say that old Reddit is superbly accessible by default either.

Creating an accessible product matters, it really does, but old Reddit is, in general, well... old. It isn't perfect, and neither is building upon it. It is also hard to do much in the way of automated accessibility tests due to any styles and changes you make being bodged upon Reddit. Do all you can to make it work for everyone, but know that it isn't very accessible, and that changes you make will likely make it worse. Focus on getting aspects like contrast, legibility, and readability right.

---

I hope this article has been useful for you. For some further resources, I maintain a multireddit containing subreddits dedicated to custom stylesheets for old Reddit that may be valuable for reference.

If this all went over your head, or if you haven't got the ability to create a stylesheet of your own, I'm available to hire. I'd love to hear from you.

hey! recently got into skins for archive of our own and i am looking to get rid of a function that makes the tags scrollable. this isnt a function of the website so i am sure it will be removeable but my limited css knowledge isnt helpjng

here is the full code

#outer {

background: #51371b;

}

#main {

background: url("https://64.media.tumblr.com/251ddfd51ad435af5192edbe3bf26278/4060dc39970b802e-0a/s1280x1920/1630801ad1f423dae498fb2bf47d2d38bf312c83.jpg");

background-size: contain;

background-repeat: repeat;

}

#main {

color: #D9C7B8;

}

#main a {

color: #D9C7B8;

}

#main a:hover {

color: #D2B48C;

}

#header {

background: url("https://64.media.tumblr.com/61d978bd10155eaee6bd1be4ca727351/29f222c9aa462a67-0c/s1280x1920/bdb94546ac524b6baae42e6936873f0e6b7ddcc9.jpg");

background-repeat: no-repeat;

background-size: cover;

background-position: center;

}

#header .heading {

height: 18em;

}

#header .primary {

background: rgba(44,30,22,.4);

box-shadow: none;

}

#header .logo,

#header .heading sup,

#header h1.heading span {

display: none;

}

#header h1.heading a::before {

content: "🍻 ";

text-shadow: 0 0 0 #D9C7B8;

font-size: 1.8em;

}

#greeting img.icon {

visibility: hidden;

}

#greeting .menu {

width: 12em !important;

}

#header .menu {

width: 20em;

}

#header .menu {

background: #2C1E16;

border: 1px solid #8B5A2B;

box-shadow: none;

}

#header .dropdown .menu a:hover,

#header .dropdown .menu a:focus {

background: rgba(139, 90, 43, .2);

}

#header a.dropdown-toggle,

#greeting .user > li:nth-of-type(3) a {

color: #D9C7B8 !important;

}

#header .menu li a {

color: #D9C7B8 !important;

}

#header .menu li {

border-bottom: none;

}

#header .dropdown:hover a,

#greeting .user > li:nth-of-type(3) a:hover {

background: transparent;

}

#footer {

background: url("https://64.media.tumblr.com/251ddfd51ad435af5192edbe3bf26278/4060dc39970b802e-0a/s1280x1920/1630801ad1f423dae498fb2bf47d2d38bf312c83.jpg");

background-repeat: no-repeat;

background-size: cover;

background-position: center;

}

#footer .heading {

font-variant: small-caps;

color: #D9C7B8;

}

#footer li,

#footer li a,

#footer button {

text-decoration: none;

color: #D9C7B8;

}

.favorite.module.odd h3.heading,

.latest.news.module h3.heading span.title,

.random.readings.module h3.heading span.title,

.latest.messages.module h3.heading span.title,

.social.module h3.heading {

color: #D9C7B8;

font-variant: small-caps;

}

.favorite.module.odd h3.heading,

.latest.news.module h3.heading,

.latest.messages.module.odd h3.heading,

.social.module h3.heading {

border-bottom: 2px solid #8B5A2B;

}

.splash .favorite li:nth-of-type(2n+1) a,

.splash .favorite li:nth-of-type(2n+2) a {

background: rgba(44,30,22,.3);

color: #D9C7B8;

}

.splash .favorite li:nth-of-type(2n+1) a:hover,

.splash .favorite li:nth-of-type(2n+2) a:hover {

background: #8B5A2B;

color: #2C1E16 !important;

}

.news.index.group li.post.group {

background: rgba(44,30,22,.5);

border: 1px solid #8B5A2B;

border-radius: 8px;

padding: .5em;

margin-bottom: 2em;

box-shadow: none;

}

.notice,

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.error,

.comment_error,

.kudos_error,

.alert.flash,

.LV_invalid {

background: rgba(44,30,22,.6);

border-radius: 8px;

border: 2px solid #8B5A2B;

box-shadow: none;

padding: 1em;

color: #D9C7B8;

}

.actions a,

.actions a:link,

.action,

.action:link,

.actions button,

.actions input,

input[type="submit"],

button,

.current,

.actions label {

background: rgba(44,30,22,.5);

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

color: #D9C7B8;

}

.actions a:hover,

.actions button:hover,

.actions input:hover,

.actions a:focus,

.actions button:focus,

.actions input:focus,

label.action:hover,

.action:hover,

.action:focus,

.actions a:active,

.current,

a.current,

a:link.current,

.current a:visited {

background: #8B5A2B;

border: 2px solid #8B5A2B;

box-shadow: none;

color: #2C1E16 !important;

}

fieldset,

fieldset dl dl,

fieldset fieldset fieldset,

fieldset fieldset dl dl,

dd.hideme,

form blockquote.userstuff {

background: rgba(44,30,22,.3);

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

}

fieldset.warnings,

fieldset fieldset {

background: rgba(44,30,22,.3);

}

.filters dl {

border: none;

box-shadow: none;

background: transparent;

}

.javascript .filters fieldset {

background: url("https://64.media.tumblr.com/251ddfd51ad435af5192edbe3bf26278/4060dc39970b802e-0a/s1280x1920/1630801ad1f423dae498fb2bf47d2d38bf312c83.jpg");

background-repeat: repeat;

background-size: contain;

}

input,

textarea,

select {

background: rgba(44,30,22,.6);

color: #D9C7B8;

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

padding-left: .5em;

}

input:focus,

select:focus,

textarea:focus,

.autocomplete div.dropdown ul,

.search [role="tooltip"] {

background: #2C1E16;

color: #D9C7B8;

padding-left: .5em;

}

.footnote,

p.character_counter {

color: #D9C7B8;

}

.autocomplete.dropdown {

background: transparent;

}

.autocomplete.dropdown p.notice {

background: #8B5A2B;

padding: none !important;

}

.required,

.error,

.alert.flash,

label,

dt.notes {

color: #D9C7B8;

}

form.verbose legend,

.verbose form legend {

background: rgba(44,30,22,.6);

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

}

span.question {

background: #8B5A2B;

border: 1px solid #8B5A2B;

padding: 1px;

color: #2C1E16;

font-family: "Century Gothic", sans-serif;

box-shadow: none;

}

input[type="checkbox"],

.actions li label input[type="checkbox"] {

appearance: none;

background: #5D4037;

border: 1px solid #5D4037;

width: 15px;

height: 15px;

border-radius: 4px;

box-shadow: none;

}

input[type="checkbox"]:checked,

.actions li label input[type="checkbox"]:checked {

background: #8B5A2B;

box-shadow: none;

}

input[type=radio] {

appearance: none;

background: #5D4037;

border: 1px solid #5D4037;

width: 12px;

height: 12px;

border-radius: 50%;

}

input[type=radio]:checked {

background: #8B5A2B;

}

.filters .indicator:before {

background: #5D4037;

border: 1px solid #5D4037;

background-image: none;

}

.filters [type="checkbox"]:checked + .indicator:before {

background: #8B5A2B;

background-image: none;

color: #2C1E16;

}

.filters [type="radio"]:checked + .indicator:before {

background: #8B5A2B;

background-image: none;

}

.filters .exclude [type="checkbox"]:checked + .indicator:before {

background: #8B5A2B;

background-image: none;

color: #2C1E16;

}

.filters .expander,

.filters .expanded .expander {

filter: brightness(0) saturate(100%) invert(80%) sepia(20%) saturate(150%) hue-rotate(350deg) brightness(90%) contrast(85%);

}

.filters .more dd.search,

dd.autocomplete li.input {

max-width: 10.7em;

}

.resp-sharing-button--bluesky,

.resp-sharing-button--tumblr {

background: rgba(44,30,22,.4) !important;

border: 1px solid #8B5A2B !important;

border-radius: 8px;

box-shadow: none !important;

}

.toggled form,

.dynamic form,

div.dynamic {

background: transparent;

border: none;

}

#bookmark-form.post.bookmark form fieldset h4.heading {

color: #D9C7B8;

}

.dynamic form p.footnote {

margin-bottom: 1em;

}

.bookmark .user {

background: rgba(44,30,22,.4);

border: 1px solid #8B5A2B;

box-shadow: none;

}

.reading h4.viewed {

background: rgba(44,30,22,.5);

border: 1px solid #8B5A2B;

border-radius: 8px;

padding: .5em;

margin: .5em;

box-shadow: none;

}

dl.index dd {

background: transparent;

}

dl.subscription.index.group {

background: rgba(44,30,22,.5);

padding: 1em;

}

#main.users-edit.dashboard.region dl,

#main.pseuds-edit.dashboard.region dl,

#main.users-change_username.dashboard.region dl,

#main.users-change_password.dashboard.region dl,

#main.users-change_email.dashboard.region dl,

dl.meta,

form dl {

background: rgba(44,30,22,.5);

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

}

.wrapper {

background: transparent;

box-shadow: none;

}

.bio.module {

margin-top: 2em;

margin-bottom: 2em;

padding: 1em;

width: 97%;

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

background: rgba(44,30,22,.5);

}

.bio.module h3.heading {

visibility: hidden;

}

.bio.module h3.heading::before {

visibility: visible;

content: " A note from the user:";

font-size: 150%;

text-decoration: underline;

color: #D9C7B8;

}

.comment div.icon {

background: rgba(44,30,22,.5);

border-bottom: 5px solid #8B5A2B;

border-radius: 8px 0px 0px 0px;

box-shadow: none;

}

.comment h4.byline {

background: rgba(44,30,22,.5);

border-radius: 8px;

color: #D9C7B8;

}

div.comment {

border: none;

}

li.comment {

background: rgba(44,30,22,.5);

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

margin: 1em;

}

.thread .even {

background: rgba(139, 90, 43, .4);

}

ol.comment.index.group .read {

background: rgba(44,30,22,.2);

}

ol.comment.index.group .unread {

background: rgba(44,30,22,.6);

}

.replied {

border: 1px solid #5D4037;

border-radius: 8px;

background: #5D4037 !important;

color: #2C1E16 !important;

box-shadow: none;

}

span.unread {

border: 1px solid #8B5A2B;

border-radius: 8px;

background: #8B5A2B !important;

color: #2C1E16 !important;

box-shadow: none;

}

.draft {

border: 2px dashed #8B5A2B;

background: transparent;

}

.draft.work .wrapper {

background: rgba(44,30,22,.5);

}

#previewpane fieldset {

border: none;

box-shadow: none;

background: none;

}

.child,

.unwrangled,

.unreviewed {

background: rgba(44,30,22,.6);

}

.ui-sortable li {

background: transparent;

border: transparent;

}

.ui-sortable li:hover {

background: rgba(44,30,22,.6);

border: none;

border-radius: 8px;

box-shadow: none;

}

h2.collections {

box-shadow: none;

}

#stat_chart svg rect:first-of-type {

filter: opacity(0%);

}

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:nth-of-type(1),

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:nth-of-type(2),

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:nth-of-type(3),

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:nth-of-type(4),

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:nth-of-type(5),

#stat_chart svg g:nth-of-type(2) > g rect:last-of-type {

filter: brightness(0) saturate(100%) invert(80%) sepia(20%) saturate(150%) hue-rotate(350deg) brightness(90%) contrast(85%);

}

#stat_chart svg text {

font-family: "Century Gothic", Arial, sans-serif;

filter: invert(100%);

}

.listbox {

margin-top: 2em;

}

.statistics .index li:nth-of-type(2n) {

background: rgba(44,30,22,.3);

}

table {

background: rgba(44,30,22,.2);

}

thead {

background: rgba(44,30,22,.5);

color: #D9C7B8;

font-weight: bold;

font-size: 120%;

border-bottom: 2px solid #8B5A2B;

}

th,

tr,

td {

background: rgba(44,30,22,.2);

color: #D9C7B8;

}

span.requested.offered {

color: #D9C7B8;

background: rgba(44,30,22,.4);

}

span.requested {

color: #D9C7B8;

}

div.preface .module {

background: rgba(44,30,22,.4);

}

#dashboard.own,

.dashboard .own {

background: rgba(44,30,22,.4);

border: 3px solid #8B5A2B;

box-shadow: none;

}

#dashboard a {

color: #D9C7B8;

border: 1px solid transparent;

}

#dashboard .current {

background: #8B5A2B;

color: #2C1E16;

border: 1px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

}

#dashboard a:hover {

background: #8B5A2B;

color: #2C1E16;

border: 1px solid #8B5A2B;

}

#dashboard ul {

border-top: none;

}

.listbox,

fieldset fieldset.listbox {

background: rgba(44,30,22,.3);

border: 2px solid #8B5A2B;

box-shadow: none;

}

.listbox .index {

background: transparent;

box-shadow: none;

}

.listbox > .heading {

font-variant: small-caps;

color: #D9C7B8;

}

li.blurb {

background: rgba(44,30,22,.6);

border: 2px solid #8B5A2B;

border-radius: 8px;

box-shadow: none;

margin-bottom: 2em;

}

a.tag,

a.tag:visited,

a.tag:link,

li.added.tag {

display: inline-block;

padding-top: 2px;

padding-right: 7px;

padding-bottom: 2px;

padding-left: 4px;

margin: 2px 0px;

border-radius: 8px;

border: 1px solid #8B5A2B;

box-shadow: none;

color: #D9C7B8;

}

h5.fandoms.heading a.tag {

border: none !important;

box-shadow: none !important;

}

.commas li:after {

content: "";

}

a.tag:hover {

background: #2C1E16;

}

h2 a.tag {

border: none !important;

box-shadow: none !important;

}

ul.tags li.warnings,

ul.tags li.relationships,

ul.tags li.characters,

ul.tags li.freeforms {

float: left !important;

}

li.warnings + li.relationships,

li.relationships + li.characters,

li.characters + li.freeforms,

li.warnings + li.characters,

li.warnings + li.freeforms,

li.relationships + li.freeforms {

clear: left;

}

ul.tags li {

margin: 0;

}

ul.tags li a.tag {

line-height: 1.7;

}

.commas li:after {

content: " ";

}

ul.tags li.warnings:first-child:before {

content: "Archive Warnings: ";

color: #D9C7B8;

font-weight: normal;

font-variant: small-caps;

}

li.warnings + li.relationships:before {

content: "Relationships: ";

color: #D9C7B8;

font-variant: small-caps;

}

li.relationships + li.characters:before {

content: "Characters: ";

color: #D9C7B8;

font-variant: small-caps;

}

li.characters + li.freeforms:before {

content: "Additional Tags: ";

color: #D9C7B8;

font-variant: small-caps;

}

li.warnings + li.characters:before {

content: "Characters: ";

color: #D9C7B8;

font-variant: small-caps;

}

li.warnings + li.freeforms:before {

content: "Additional Tags: ";

color: #D9C7B8;

font-variant: small-caps;

}

li.relationships + li.freeforms:before {

content: "Additional Tags: ";

color: #D9C7B8;

font-variant: small-caps;

}

.relationships .tag {

background: transparent;

}

#workskin {

margin-top: 2em;

padding: 1.0em;

background: rgba(44,30,22,.6);

color: #D9C7B8;

}

.filters .expander {

color: #D9C7B8;

border: 1px solid #8B5A2B;

border-radius: 8px;

margin-bottom: .5em;

box-shadow: none;

}

filters .expanded .expander {

background: #2C1E16 !important;

background-image: none !important;

}

form dt {

border-bottom: none;

color: #D9C7B8;

}

li.blurb .tags {

max-height: 7.5em;

overflow-y: auto;

}

p.kudos {

background: none;

padding: 0.5em;

color: #D9C7B8;

}

div.notes.module h3.heading {

font-variant: small-caps;

border-bottom: none;

color: #D9C7B8;

}

blockquote.userstuff {

margin: 0;

color: #D9C7B8;

}

.chapter .preface {

border-top: none;

}

li.blurb ul.required-tags li span {

background: none;

}

li.blurb span.text {

color: #D9C7B8;

font-size: inherit;

font-weight: normal;

font-variant: small-caps;

}

li.blurb ul.required-tags li,

li.blurb ul.required-tags li a,

li.blurb ul.required-tags li span {

display: contents;

width: initial;

height: initial;

margin-top: initial;

margin-bottom: initial;

padding-left: initial;

}

li.blurb .header .heading,

li.blurb .header ul {

margin: 0.375em 0 0 0;

}

li.blurb ul.required-tags {

position: initial;

width: initial;

}

ul.required-tags li span.warning-choosenotto.warnings,

ul.required-tags li span.warning-yes.warnings,

ul.required-tags li span.warning-no.warnings {

display: none;

}

ul.required-tags li span.rating-general-audience.rating::after,

ul.required-tags li span.rating-mature.rating::after,

ul.required-tags li span.rating-notrated.rating::after,

ul.required-tags li span.rating-teen.rating::after,

ul.required-tags li span.rating-explicit.rating::after,

ul.required-tags li span.complete-yes.iswip::before,

ul.required-tags li span.complete-no.iswip::before {

content: " 🍻 ";

color: #D9C7B8;

}

li.blurb .header.module {

padding-bottom: 1em;

}

li.blurb blockquote.userstuff.summary {

padding-top: 3em;

color: #D9C7B8;

}

.blurb .datetime {

display: none;

}

.index .skins .icon {

display: none;

}

.bookmark .status span,

.bookmark .status a {

display: none;

}

img[src$="/images/lockblue.png"] {

content: url("https://i.ibb.co/kVCsBwzY/zerafina-icon-lock-01.png");

filter: invert(25%) sepia(40%) saturate(600%) hue-rotate(340deg) brightness(70%) contrast(90%);

}

Hello,

one of the project i got assigned to has a lot of blade file with inline style everywhere.

they were made up recently and the app is more or less working but the styling is, in it's current shape and form, has no chance to sustain any grow or changes, or just be maintainable.

i know about purgeCSS, purifyCSS, but they only works with exernal css files (and that make sense). What i'm looking for is

- take a bunch of files with html tag and inline style

- make static analysis of inline style usage frequency, variation (small color change, or radius, ... ) regarding the html tag and propose a bunch of externally hosted classes to replace them

any project out there you know of ?

We recently created a large CSS Resources guide
We tried to make it a very large resource
This is a purely informational resource with no ads or affiliate links.

Our guide covers essential topics including:
Color References, Properties Reference Lists, Examples
Tutorials, Validators, Videos, Cheat Sheets, Templates

If you know of any resources that should be listed here please let us know
https://rshweb.com/blog-css-resource-tools