Custom CSS for subs


#1

Before we talk design and whether to have a nice looking CSS theme and all that, I think we should look back on the mistakes others have made: For example, reddit made personalizing comments hard AF for mods because they hardcoded the design inside the code - every redesign meant breaking subreddits’ CSS code, and that sucked big time for everyone.

For starters, it began with embedding all the buttons on a single .gif or .png file, to save bandwidth. Then guess what? The admins decided to add more stuff in there, and ended up shifting some pixels to some of the icons. Contratulations, now all the buttons are broken! :anger: :angry:

And what to say about “Reddit Enhancement Suite”? If you’ve ever gone to /r/cyberpunk, prepare to have your eyes bleed out because RES made white the default background color, and cyberpunk had clear text over black background. Now click on a comment and you have yellow text over white background. Eep.

We could enumerate the mistakes:

  • Lack of a coherent convention
  • Premature optimization
  • Hardcoding CSS and style
  • Missing classes that were needed to personalize an item
  • Overusing !important

And so on.

If we don’t want to repeat the same mistakes over and over, we need a clear foundation. If you start building a house with the facade and then decide to change the pillars, the next time you change the pillars, all the front of the construction is totally obliterated.

So, why don’t we start with having a well-structured HTML with semantic tags and attributes? Have them for the content, the comment section, the sidebar, and so on. Among the data-* attributes (see https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ), you can add anything you want to provide the future designer with the elements they need to personalize their comment section: the row number, the post id, the flair, the nesting level (you could even say whether the nesting level is even/odd! That’d be VERY useful! Instead of having to do something like .comment, .comment .comment .comment, .comment .comment .comment .comment .comment { some stuff }, you could have one single style for .comment[data-nesting=“odd”] and another for .comment[data-nesting=“even”]. Same goes for whether a comment was made by a mod/admin, whether it was distinguished, etc.

Make good semantic markup first, and the design will follow. You’ll be painting in a blank, firm canvas with no hassles. Nothing better for a web designer to have all the relevant classes available in the same parent element.

Of course, we should document the convention so the sub designers can easily learn how things are done. (In fact, why not have a wiki?)

Some hints: On the CSS, separate color themes from other design attributes, and make a “base CSS” so other design choices can be built on top of them.

Furthermore, if we’re building this from the ground up, why not use SCSS (https://sass-lang.com/) and use their powerful styling features?

Also, this:


#2

Thank you for moving that thread here :slight_smile:

Custom-styled subs are something worth considering but that brings as a lot of troubles and tough decisions. I’m not a heavy reddit user but i totally understand that having an option for sub admins to fully customize it’s look using CSS is an important reddit feature and it brings kind of unique fill for each sub using it.

Initially i was thinking about allowing only avatar/cover photo and few “accent” colors to be changed as it scales well and is not limiting prismo future development but if we want to encourage ex-redditors, we should consider cusomizable css as something pretty important (or is it not that important? Any reddit admins in here?)

Apart from the above - can i consider you @rick_777 as someone pretty skilled with CSS/SCSS? If so, would it be possible for you to prepare a markup of comments tree straight from your CSS dreams? :smiley: Jsfiddle will totally do the trick.

Thoughts?


#3

I can try, but it will take time. Also, we need to consider all the elements: links, arrow buttons, usernames, etc.

Maybe I can come up with something this weekend.


#4

That’s sweet! I’m gonna send you the current comments list markup later today, maybe it’s gonna make it a bit easier for you.


#5

One thing to consider is that we need two different containers: one for the comment tree, and one for just the comment and its buttons. Maybe another one for the comment’s children, right below the comment container.


#6

Here’s a typical comment page I designed - with added CSS for illustration purposes. Notice the extensive use of semantic markup and role attributes. Styling this thing is going to be way easier than styling reddit :wink:

If you need more styles for the borders, feel free to add more div containers to the comments and articles.

<!DOCTYPE html>
<html>
<head>
    <title>Check out this cyberpunk Lorem Ipsum Generated text!</title>
    <meta name="submitter" value="@[email protected]" />
    <meta name="submission-date" value="2018-10-02 22:32:00 -0500" />
    <link rel="submitter-homepage" href="https://example.social/@mr_submitter" />
    <link rel="submitted-to" href="https://example.social/subs/prismo" />
    <link rel="sub-info" href="https://example.social/subs/prismo/about" />
    <style type="text/css">
        body {
            font-family: Arial,Sans-serif;
        }
        h1.post-title {
            font-size: 2em;
            margin-top:0;
            margin-bottom:0.5em;
        }
        #sidebar { 
            float: right; border:1px solid #f00;margin-left:2em;
            width: 200px;
            height:1000px; 
            padding: 1em;
            background:#fff;
        }
        section.main {
            width: auto;
            margin-right: 250px; /* Must be greater than sidebar width */
            padding-right: 1em;
        }
        header[role="banner"] {
            color: #fff;
            background-color: #00f;
        }
        header[role="banner"] nav li {
            display: inline;
        }
        .user-flair {
            font-family: Arial,Sans-serif;
            font-size: 0.8em;
            font-weight:bold;
            background-color:#999;
        }
        .comment-nav {
            font-size: 0.8em;
            margin-top: 8px;
            padding-left: 0px;
        }
        .comment-nav li {
            list-style-type: none;
            display: inline;
        }
        footer[role="banner"] {
            clear: both;
            color: #fff;
            background-color: #00f;
            border-top: 1px solid #000;
            margin-top: 1em;
        }
        span.toggle { font-size: 0.8em; float: left; margin-right: 0.5em; }
        div.comment-margin { float: left; }
        
        article.main-post {
            padding: 1em;
            border:1px solid #000;
        }
        .comment {
            border:1px solid #000;
            padding: 1em;
        }
        li.comment-item {
            margin-top: 1em;
            list-style-type: none;
        }
        .user-signature {
            font-size: 0.8em;
            border-top: 1px solid #000;
            margin-top: 1em;
        }
        article.comment header {
            display: inline;
        }
    </style>
</head>
    <body>
        <header role="banner">
            <!-- Insert HTML markup here -->
            [ Mascot goes here :) ]
            Welcome to the unofficial Prismo sub at example.social! 
            <!-- Insert HTML markup here -->
            <nav>
                <ul class="sub-navigation">
                    <li>home</li>
                    <li>hot</li>
                    <li>new</li>
                    <li>rising</li>
                    <li>controversial</li>
                    <li>top</li>
                    <li>gilded</li>
                    <li>wiki</li>
                </ul>
            </nav>
        </header>
        <aside id="sidebar">
            <section class="controls">
                <!-- Here go the users controls -->
                <section class="search">
                    <!-- Here goes the search form -->
                </section>
                <section class="submit-link">
                    <a href="submit?mode=link">Submit Link</a>
                </section>
                <section class="submit-text">
                    <a href="submit?mode=text">Submit Text</a>
                </section>
            </section>
            <section class="about">
                <div class="sub-name">/Prismo</div>
                <p>/Prismo is the unofficial official sub for prismo at example.social!</p>
                <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            </section>
        </aside>
        <section class="main">
            <section class="posts">
                <article role="main" class="main-post">
                    <header>
                        <h1 class="post-title">Check out this cyberpunk Lorem Ipsum Generated text!</h1>
                        <div class="post-metadata">
                            <span class="submitted-info">
                                submitted <time datetime="2018-10-02 22:32:00 -0600" title="Oct 2, 2018 22:32:00 GMT-0500 (CDT)">18 days ago</time> by <span itemprop="submitter-fancy-name">* * * Mr. Submitter * * *</span> (<a href="https://example.social/users/@mr_submitter" itemprop="submitter" class="user-handle">@[email protected]</a>)
                                <span class="user-flair">The One and Only</span>
                                <!-- insert reader's stats on the submitter here, like number of personal upvotes, user notes, etc. These are personal. -->
                            </span>
                        </div>
                    </header>
                    <div class="post-text">
                        <p>free-market wristwatch otaku crypto- Kowloon futurity pistol disposable long-chain hydrocarbons. cyber- tube garage soul-delay fetishism apophenia -ware realism construct. fluidity -ware sunglasses decay decay assault grenade katana faded. neural bridge girl Shibuya smart- crypto- jeans faded network. render-farm sentient modem assassin digital vehicle drone Shibuya tube. tanto sensory San Francisco hotdog dead boat kanji A.I. digital.</p>

                        <p>singularity nodality singularity pen receding motion tank-traps singularity crypto-. digital rifle augmented reality girl systema geodesic woman spook smart-. rain tank-traps uplink modem receding franchise augmented reality engine advert. garage fetishism computer BASE jump shoes fluidity disposable pre- pen. vehicle military-grade jeans vehicle market boy papier-mache courier plastic. corporation physical rifle hacker RAF youtube San Francisco rebar shoes.</p>

                        <p>meta- car voodoo god claymore mine boy cyber- marketing footage crypto-. Tokyo cardboard table concrete 3D-printed 8-bit stimulate weathered face forwards. carbon -ware Tokyo bomb meta- boy face forwards saturation point geodesic. corporation wonton soup spook -space decay face forwards sub-orbital claymore mine augmented reality. meta- garage realism corporation cyber- office -ware crypto- media. 3D-printed apophenia network towards pre- into digital shrine Chiba.</p>

                        <p>film denim rain corporation dead Legba augmented reality military-grade San Francisco. corporation paranoid wonton soup numinous narrative neural tanto into neural. car convenience store boy skyscraper augmented reality disposable BASE jump vinyl film. San Francisco free-market dolphin construct market artisanal table render-farm convenience store. narrative hotdog hacker assassin kanji -ware tube faded systemic. savant wonton soup render-farm boy BASE jump garage dolphin voodoo god semiotics.</p>
                        
                        <p>(Generated with <a href="http://loremgibson.com">Lorem Gibson</a>)</p>
                    </div>
                    <footer>
                        <div itemprop="submitter-signature" class="user-signature" data-owner="[email protected]" title="User signature">
                            <pre>
*************************************************
* * * MESS WITH THE BEST, DIE LIKE THE REST * * *
*************************************************
</pre>
                        </div>
                    </footer>
                </article>
                <ul role="menu" class="comment-nav">
                    <li role="menuitem"><a rel="permalink" href="https://example.social/posts/prismo/2018-10-02/00000001/check-out-this-cyberpunk-Lorem-Ipsum-Generated-text">permalink</a></li>
                        <!-- Navigating by date should also be a thing! ;-) -->
                    <li role="menuitem"><a href="javascript:void();">embed</a></li>
                    <li role="menuitem"><a href="javascript:void();">share</a></li>
                    <li role="menuitem"><a href="javascript:void();">like</a></li>
                    <li role="menuitem"><a href="javascript:void();">boost</a></li>
                    <li role="menuitem"><a href="javascript:void();">report</a></li>
                    <li role="menuitem"><a href="javascript:void();">give gold</a></li>
                    <li role="menuitem"><a href="javascript:void();">reply</a></li>
                </ul>
            </section>
            <section class="comments">
                <h2>Comments</h2>
                <ul id="comments_top" role="tree" class="comment-tree" data-depth="0" data-depth-even="even">
                    <li class="comment-item" id="comment_00002501" role="treeitem" data-comment-id="00002501" data-depth="1" data-depth-even="odd">
                        <div class="comment-margin">
                            <!-- Insert like / dislike buttons here -->
                        </div>
                        <article data-comment-id="00002501" class="comment">
                            <header>
                                <span class="toggle"><a href="javascript:void();" onclick="return toggle_comment(this);">[ - ]</a></span>
                                <div class="comment-metadata">
                                    <span class="submitted-info">
                                        <span itemprop="commenter-fancy-name">Justin Tyme</span> (<a href="https://example.social/users/@justin_tyme" itemprop="commenter" class="user-handle">@[email protected]</a>)
                                        <span class="user-flair">Never the last</span>
                                        <!-- insert reader's stats on the user here, like number of personal upvotes, user notes, etc. These are personal. -->
                                        <span class="comment-score">1 like</span>
                                        <span class="comment-boosts">0 boosts</span>
                                        <time datetime="2018-10-02 22:32:00 -0600" title="Oct 2, 2018 22:32:00 GMT-0500 (CDT)">18 days ago</time>
                                    </span>
                                </div>                                
                            </header>
                            <div class="comment-text">
                                <p>Noice. ^_^</p>
                            </div>
                            <footer>
                                <div itemprop="comment-signature" class="user-signature" data-owner="[email protected]"  title="User signature">
                                    /// Swoosh ///
                                </div>                                
                            </footer>
                        </article>
                        <ul role="menu" class="comment-nav">
                            <li role="menuitem"><a rel="permalink" href="/comments/prismo/2018-10-02/00000001/check-out-this-cyberpunk-lorem-ipsum-generated-text/comments/2501#comment_2501">permalink</a></li>
                            <li role="menuitem"><a href="javascript:void();">embed</a></li>
                            <li role="menuitem"><a href="javascript:void();">share</a></li>
                            <li role="menuitem"><a href="javascript:void();">like</a></li>
                            <li role="menuitem"><a href="javascript:void();">boost</a></li>
                            <li role="menuitem"><a href="#comments_top">parent</a></li>
                            <li role="menuitem"><a href="javascript:void();">report</a></li>
                            <li role="menuitem"><a href="javascript:void();">give gold</a></li>
                            <li role="menuitem"><a href="javascript:void();">reply</a></li>
                        </ul>
                        <ul role="tree" class="comment-tree child-comments" data-parent-id="00002501" data-depth="1" data-depth-even="odd">
                            <!-- here go the child comments -->
                            <li class="comment-item" id="comment_00002502" role="treeitem" data-comment-id="00002502" data-depth="2" data-depth-even="even">

                            <article data-comment-id="00002503" class="comment">
                                <header>
                                    <span class="toggle"><a href="javascript:void();" onclick="return toggle_comment(this);">[ - ]</a></span>
                                    <div class="comment-metadata">
                                        <span class="submitted-info">
                                            <span itemprop="commenter-fancy-name">4chan rulz</span> (<a href="https://example.social/users/@somespammer" itemprop="commenter" class="user-handle">@[email protected]</a>)
                                            <span class="user-flair"></span>
                                            <!-- insert reader's stats on the user here, like number of personal upvotes, user notes, etc. These are personal. -->
                                            <span class="comment-score">0 likes</span>
                                            <span class="comment-boosts">0 boosts</span>
                                            <time datetime="2018-10-02 22:32:00 -0600" title="Oct 2, 2018 22:32:00 GMT-0500 (CDT)">18 days ago</time>
                                        </span>
                                    </div>                                
                                </header>
                                <div class="comment-text">
                                    <p>Sauron did nothing wrong</p>
                                </div>
                                <footer>
                                </footer>
                            </article>
                            <ul role="menu" class="comment-nav">
                                <li role="menuitem"><a rel="permalink" href="/comments/prismo/2018-10-02/00000001/check-out-this-cyberpunk-lorem-ipsum-generated-text/comments/2502#comment_2502">permalink</a></li>
                                <li role="menuitem"><a href="javascript:void();">embed</a></li>
                                <li role="menuitem"><a href="javascript:void();">share</a></li>
                                <li role="menuitem"><a href="javascript:void();">like</a></li>
                                <li role="menuitem"><a href="javascript:void();">boost</a></li>
                                <li role="menuitem"><a href="#comment_00002501">parent</a></li>
                                <li role="menuitem"><a href="javascript:void();">report</a></li>
                                <li role="menuitem"><a href="javascript:void();">give gold</a></li>
                                <li role="menuitem"><a href="javascript:void();">reply</a></li>
                            </ul>
                                
                                <ul role="tree" class="comment-tree child-comments" data-parent-id="00002502" data-depth="2" data-depth-even="even">
                                    <p><a href="javascript:void();">... click to load more comments (1 children) ...</a></p>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </section>
        </section>
        <footer role="banner">
            <br /><br />
            <div style="text-align:center">... insert legal stuff and links here ...</div>
            <!-- Insert instance stuff here -->
            <br /><br />
        </footer>
    </body>
</html>

#7

The markup for the feed page is going to be simpler, of course. I’ll see if I can make one this weekend.

I suppose, for the comments you’re going to use AJAX, right?