Skip to content

Home

Jump to bottom
mindashq edited this page Aug 29, 2014 · 9 revisions

About Mindashq

Mindashq is a reusable CSS theme for reddit to have a clean, compact and awesome customization!

Mindashq works best even without images, and just by a simple copy-paste of stylesheet, or extending features using the opt-in modules.

The general idea for this theme is to add a minimum dash of quality to the standard Reddit appearance.

It can be used by the moderators of a subreddit as custom theme, or by the users as stylish theme.

When Reddit looks nice, its easier and more pleasant to browse the links and comments; making it a better experience for the reader!

And the Mindashq theme is written with the hope that it helps make Reddit a better place, or at least help those who want slightly more than the default reddit interface - in an easy to reuse format.

Salient Features

  • Distinct header and footer :A light and roomy top area, and a matching footer to go with it. The local subreddit name is seen very prominent in header for easy identification and is super intuitive for clicking. The header handles all sizes of images and logos, and keeps them in true-to-reddit format (header logo links to reddit.com homepage) and looks sleek without compromising the space.
  • Compact and Crisp : The comments, the sidebar, the links posts and all the pages (wiki, search, related pages, submit page and all) are done in a way to avoid nested boxes, borders are removed (free world) and distinctions are handled without compromising the reddit defaults.
  • Readability improvements : Minimal borders and breaks to give a nice reading experience. The buttons change colors based on context. The "Reply" button on comments is more prominent to make replying to a comment more obvious (rather than hiding the submit link/text buttons)
  • 100% text-only theme, no images required for the standard theme. Even the voting arrows are theme-based and manageable for color changes without having to depend on images.
  • Modular CSS for controlled and easy to manage changes with opt-in modules (custom css code) and images as needed. There are no images added by the theme, only the images that would be needed as per the subreddit customization.
  • All areas (moderator, user pages, and settings pages) also accounted for. This makes the base theme suitable for use with stylish, or stylebot across reddits (Works perfectly with Stylish for Google Chrome).
  • RES compatible (top bar, never ending reddit, night-mode full support, fixed header, custom buttons on links/posts/comments).
  • Works with Reddit Companion for Chrome
  • In built Vibgyor Flairs

Two step setup

It takes only two steps to apply mindashq on any subreddit

  • visit http://www.reddit.com/r/myReddity/about/stylesheet (where myReddity is your subreddit name)
  • There is an editable area with heading "stylesheet". Paste the Mindashq CSS code in this box.

You are good to go!! and all default subreddit will have a refined and clean appearance based on Mindashq base CSS.

Further, depending on customizations needed, the opt-in modules can be added as required. Refer to Mindashq Usage article for further details on reusing and extending the Mindashq theme.

Theme Preview

Base Theme : /r/mindashq

Preview : /r/stage_mindashq

More about Mindashq

This theme comes with extensive wiki and help information about usage, customization and readymade code in form of opt-in module. The following links detail out various aspects of theme usage:

Modules in Mindashq

The information about the opt-in modules for Mindashq theme is organized with following pages :

In the preview at /r/stage_mindashq; the status of Modules is :

# Module Status on Stage Type
C1 Header Images Active Opt-in
C2 Sidebar Buttons - in situ Inactive Opt-in
C2 Sidebar Buttons - on Top Active Opt-in
C3 Pinned Notification Active Opt-in
C4 Navigator Active Opt-in
C5 Sidebar Collapsible Boxes Active Opt-in
C6 Sidebar Images - Clickable Active Opt-in
C6 Sidebar Images - View Only Inactive Opt-in
C7 Rage Faces from F7U12 Active Opt-in
C8 Text Switchers - Reddit Name Inactive Opt-in
C9 Text Switchers - # Subscribers and Users here Inactive Opt-in
C10 Emoticons Active Opt-in

Refer to /r/stage_mindashq sidebar for updated information on this.

Development

GitHub

Mindashq.Reddit.Theme is hosted at Github for collaboration and contribution.

For easy copy paste, click the Raw button in the button group at the top-right of the code block on Github. Example urls :

Planned updates

  • Improve the space handling and all major reddit styles
  • Add RES and Reddit Companion support
  • Add Night mode support for RES
  • Clean up sidebar, and make consistent widths
  • Clean up wiki page action links, and TOC block
  • Update CSS comment blocks scheme to have section based numbering
  • Redistribute sections A.9. Misc Styling and B.9. Misc Styling for better modularity
  • Header modules in very narrow screen widths
  • Add a blue flag for the sidebar colored boxes
  • Documentation
  • How to copy/paste /r/mindashq/wiki/usage
  • How is CSS organized CSS organization explained
  • Document the modules Modules in Mindashq
  • How to add modules
  • How to swap/interchange standard modules
  • How to organize sidebar (boxes, character limits etc)Code Snippets
  • Treat wiki headings for more distinction
  • Add nightmode to all 7 modules
  • Refactor for shorter css for header (no change in appearance, but lesser lines for standard header, header images and nightmode code)
  • Make ALL primary buttons consistent emphasized blue, rest side buttons transparent
  • Link Flair, auto tagging More research and information gathering

v2 (or upcoming...)

  • More?
  • different styles for headers, sidebar boxes, logo ...
  • RTL support if there are enough requests for it
  • updated header design (different one, additionally? or as replacement?)
  • Voting Score and subscribe buttons styling
  • RESiprocator (planned) : a more detailed RES bar. And with option to move to left/right/bottom to make reddit lighter. The top reddit bar, often given a contrasts color makes the reddit look top heavy, for lighter less contrary versions, more space is required.

Credits

The comments and organization of CSS is based on /r/onepiece by eldatto (a more comprehensive list at onepiece css )

Mindashq Extends the colored boxes from /r/edurne/ by rolmos - more info at Github

Inspirations

Some examples that did influence the thinking, and are by far the example of better CSS theme customizations that provided insights in the process to go about writing the custom css; and remain good reference to see the variety of customizations possible on reddit

  • /r/Aerial
  • /r/apple
  • /r/Android
  • /r/awesome
  • /r/cowboys
  • /r/Diablo
  • /r/Diablo3
  • /r/funny
  • /r/Gametales
  • /r/gloving
  • /r/googleplus
  • /r/google
  • /r/homeworkhelp
  • /r/leagueoflegends
  • /r/mindcrack
  • /r/minimalism
  • /r/nexus4
  • /r/onepiece
  • /r/pickrick
  • /r/Rainmeter
  • /r/rockets
  • /r/sooners
  • /r/starcraft
  • /r/TechNewsToday
  • /r/tf2trade
  • /r/WebWorkshop
  • /r/xbox360

Feedback

Add a comment at this thread or message the moderators, or use the Github repository to collaborate or improve this theme.

To know more about pre built and reusable themes for reddit, refer to /r/themes and Subreddits with CSS stylesheets made to be shared.

Also, refer to Reddit's general rules for modifying the appearance for keeping aware of what's allowed, and what can be potentially out of line customization.

The Mindashq wiki is a living document, and will be updated regularly to include more content for clarity and ease of customization. Watch this space for updates and changes.

Clone this wiki locally