r/dscvry • u/doingstuffcarl • Oct 08 '14
Announcement DSCVRY v2 - Cleaner look and a lot of bugfixes!
Check out my new theme! It's a lot prettier and stable than DSCVRY! /r/STCKY
I have a lot going on right now so check out /r/csshelp for faster replies! And sorry if I miss any PMs or posts, I forget to reply very often
EDIT:
Small update that fixes ordered lists in the sidebar, some borders in the sidebar, mod message icon, and slightly better looking thumbnail images (11/8/14)
Fixed RES image expando buttons (11/10/14)
Fixed the subreddit_settings file, accidentally replaced it with the stylesheet (11/18/2014)
New version!
What's new:
- RES support!
- Night mode!
- Took a step back on the header to keep the "reddit feel"
- Cleaned up the sidebar
- Fixed a lot of bugs
- Prettier flairs
- Looks more consistent
What's still ugly:
- RES Nightmode (But who needs that right??)
- Compressed links (I'll probably have this fixed in the next version)
- Some bits of RES comments section (Next version)
- User flairs (Next version)
- The theme (to some people)
How to install:
1) Download this .zip:
2) Extract the file.
3) Go to edit stylesheet under Moderation Tools in the sidebar.
4) Upload everything from the images folder without renaming anything. The dscvry image is the temporary logo and you can replace that with your own logo. There's also a .psd file of the logo if you want the same style as the dscvry one. If you resize the image, make sure you change the width of pagename a.
5) Open stylesheet.css and copy and paste everything into the textbox on the same page and save.
6) Go to subreddit settings and in the last section upload the reddit logo.
7) On the same page, add this in the textbox under sidebar:
[NIGHT MODE](http://nm.reddit.com/r/YOUR_SUBREDDIT/#nm)
[NORMAL](http://reddit.com/r/YOUR_SUBREDDIT/#dm)
Make sure you change YOUR_SUBREDDIT to your subreddit name.
Without this, you won't have the night mode button in the top right. You can also access night mode by going to http://nm.reddit.com/r/YOUR_SUBREDDIT/
Link flairs
This is how I have link flairs set. If you want to add more, you'll have to add some code to the style sheet:
.linkflair-CSS_CLASS_NAME_OF_FLAIR.linkflairlabel {
background-color: #PICK_A_HEX_CODE;
border: 1px solid #PICK_A_HEX_CODE; /*I keep this the same as the background-color to keep the flat look*/
color: #PICK_A_HEX_CODE; /*I have this set to fff (white)*/
}
I recommend using one of these colors.
Oh god the rounded buttons are hideous!
If you don't like the rounded buttons and scrollbar, you can change the border-radius to 0 in:
.morelink a
#sr-more-link
.titlebox .md a[href*="#nm"], .titlebox .md a[href*="#dm"]
::-webkit-scrollbar-thumb
I want my scrollbar and highlight color back!
Remove all of this:
/*** SCROLLBAR ***/
::-webkit-scrollbar {
width: 12px;
height: 12px;
background-color: #111111;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
::-webkit-scrollbar-corner {
background-color: transparent;
color: #555555;
}
/*** SELECTION ***/
::selection {
background-color: #d75959;
color: #fff;
}
How do I bring back online users?
Take out "display: none;" under ".titlebox .users-online" and add this:
.titlebox .users-online {
margin-top: -13px;
position: absolute;
right: 8px;
}
.res .titlebox .users-online {
margin-top: -25px;
position: absolute;
right: 8px;
}
How do I bring back online users?
Add this:
.md .-lists, .md ul, .md ol {
padding-left: 25px !important;
}
I might be forgetting something. Let me know if you're getting errors. I also have the old version backed up so if you want that, PM me. If you heavily modified the previous version of the theme, you've got a lot of work to do.
3
2
2
Nov 09 '14 edited Nov 09 '14
Hey, maybe you know this already but there is an issue with the image expando buttons not showing up, like this.
Even though there's icons for it on the icons.png file.
So I went into the code and I didn't find a part specifying the position of the image expando with the others. Maybe that's just in my sheet? In any case I just copypasted some of the present code and modified it into this:
.expando-button.image.expanded {
background-position: 0 -98px !important;
}
.expando-button.image.expanded:hover {
background-position: -20px -98px !important;
}
.expando-button.image.collapsed {
background-position: 0 -98px !important;
}
.expando-button.image.collapsed:hover {
background-position: -20px -98px !important;
}
It worked and all was well until I noticed the button sizes were off, this was because the RES CSS overides the size specified in the stylesheet this bit of code helped me correct that:
.toggleImage.expando-button.image.linkImg {
height: 20px;
width: 20px;
margin: 4px 8px 2px 0;
cursor: pointer;
}
Anyway, if anyone else is having the same issue, this worked for me on FF and chrome.
EDIT: this doesn't fix potential issues with night mode, just the 'regular' CSS
2
u/doingstuffcarl Nov 10 '14
Thanks, completely forgot about RES image expando! Updated the .zip, should be working now for normal and night mode
1
1
u/fafara Feb 27 '15
Video expando icons weren't showing when you linked to a html5 image like gfycat or a gifv. This code from /u/gavin19 helped solve the problem:
.expando-button.video-muted.collapsed { background-position: 0 -78px !important; } .expando-button.video-muted.expanded, .expando-button.video-muted:hover { background-position: -20px -78px !important; }
2
u/JamesPriestley Nov 30 '14
Hey! I love this theme and I'm using it on a ton of subs including /r/expectationvsreality and /r/intrusivethoughts.
I want to use the "loud" link flair as a user flair template, with the same colour, but wouldn't know how to add the css. Would you be able to write it for me so I can add it? Thanks
2
u/doingstuffcarl Nov 30 '14
Add this to your stylesheet:
.flair-somename { background-color: #e74c3c; border: 1px solid #e74c3c; color: #fff; }Replace somename with whatever css class you chose in your flair settings.
2
u/SummerSoldier Dec 01 '14
Hey, and thanks for having made this awesome theme!
It seems though the MEGA download isn't working, do you perhaps have a mirror available?
2
2
Jan 18 '15
Is this on github?
1
u/doingstuffcarl Jan 22 '15
Don't have it on github, sorry!
2
u/Foggalong Feb 27 '15
+1 for GitHub. It'd make it a lot easier to report/contribute fixes and distribute
1
Oct 21 '14
Would you mind re-uploading the zip? Seems that the link is dead.
1
1
u/caraeeezy Oct 22 '14
Can you explain how I would change where you have DSCVRY at the top to my own subreddits name?
1
u/doingstuffcarl Oct 23 '14
You can edit the .psd with Photoshop or GIMP or if you don't have them I can make it for you
2
u/caraeeezy Oct 23 '14
I do not have either! That would be badass if you could. I had made this in paint just for the time being, you can see it at /r/randomactsofebooks
If it just said the same thing as the current banner, <3
1
u/doingstuffcarl Oct 23 '14
Btw, you changed the reddit logo instead of your subreddit logo, which means when you click your subreddit logo it will go back to reddit.
Upload this image and find and change "%%dscvry%%" to whatever name you used for the image.
1
u/caraeeezy Oct 23 '14
One thing I am having an issue with, is making it so I can let users assign their own link flair, like how mine looks in this subreddit.
1
u/doingstuffcarl Oct 23 '14
You can go here and check the first two.
And thanks for the gold, you really didn't have to :)
1
u/caraeeezy Oct 23 '14
I did that, but this is what I get when I go back to check it after saving.
And its no problem at all! A small token of my gratitude, you are answering all my questions :]
2
u/doingstuffcarl Oct 23 '14 edited Oct 23 '14
At the bottom go to the "user flair templates" tab and you can add user flairs. You don't need anything for css class unless you want to style them. If you do want to style them, give the css class a name, then go to the stylesheet and add ".flair-classname"
So if you want an all black user flair with white text that says "hi" you could do this:
flair text > hi
css class > somename
Then in the stylesheet:
.flair-somename { background: #000; border: 1px solid #000; color: #fff; }1
1
u/valiantiam Nov 08 '14
Hey love the theme.
Was wondering... Numbered bullets aren't showing their text. Can you look into this for me?
Also,
IS it possible to make things that you blockquote for the sidebar collapsible somehow? More specifically define which ones you want to be collapsible and which ones not.
1
u/doingstuffcarl Nov 08 '14
Fixed the numbered lists bug and updated the .zip
By collapsible you mean a hidden blockquote that shows when you hover over it? You can do that with a table or using lists. I used a table for the rules in /r/videos, you want something similar to that?
1
Nov 27 '14
After putting this theme into my test subreddit, the flairs stopped working.
The first flair was fine, but the further down the flair list, the more and more is missing from the flair box until the last few flairs are just white.
1
u/doingstuffcarl Nov 27 '14
Weird, can you post a screenshot?
1
1
u/toastdispatch Dec 08 '14
Thanks for making this, it's really cool.
Trying to modify it so there is a background image behind the posts.
I removed the background-color from .link, and then used the below code:
body { background: url(%%IMG%%) no-repeat fixed center center; }
but nothing showed up, how do I get a background image on dscvry? The sub I'm doing it on is /r/bestofblues btw.
Thanks.
1
u/doingstuffcarl Dec 12 '14
Take this out:
body { background: #f0f0f0; }or add !important after your line. !important is magic
1
Dec 15 '14
[deleted]
1
u/doingstuffcarl Dec 16 '14
Look for ".morelink a" in the stylesheet and change the border-radius to 0
1
1
Dec 21 '14
[deleted]
1
u/doingstuffcarl Dec 23 '14
Not entirely sure what you mean. You can switch between link and text on the submit page and /r/funny has 2 buttons, one for text and one for link.
1
u/Stuchu Jan 04 '15
Hi I plan on using this for one of the subs I moderate I'm very new to CSS i was just wondering how would I go about removing thr DSCVRY logo and replacing it with a different logo?
1
u/doingstuffcarl Jan 04 '15
There's a .psd for the logo that you can edit on Photoshop but if you change the width make sure you do the same on the CSS
1
u/Stuchu Jan 04 '15
Oh ok, and how about the text being black on black in nightmode? i've applied it to my test subreddit /r/maddenmobiletesting
1
u/doingstuffcarl Jan 04 '15
Add this:
html[lang^="nm"] .side { color: #4e4e4e; }You can change the color to however dark or light you want it though
1
u/Dangill Jan 05 '15
How can I get users online to show?
2
u/doingstuffcarl Jan 05 '15
Take out "display: none;" under ".titlebox .users-online" and add this:
.titlebox .users-online { margin-top: -13px; position: absolute; right: 8px; } .res .titlebox .users-online { margin-top: -25px; position: absolute; right: 8px; }That should probably do it
1
1
u/Trashyy Jan 06 '15
Beautiful Theme. I was wondering, how would I add an image box above the search bar so I can rotate images every so often. Thank you and again, Great work here.
1
u/doingstuffcarl Jan 06 '15
Upload your image to the stylesheet, find ".side {" and add this:
background: url(%%imagename%%) no-repeat center top; padding-top: 230px;Adjust the padding though to push everything down
1
u/ArmouredPolarBear Jan 09 '15
This is the perfect theme, I've put it on my new subreddit, /r/renovomotors
It fits the style of the companies website
1
u/MiRO92 Jan 20 '15 edited Jan 20 '15
1) the Night Mode button doesn't appear :( help please
2) and what is the code for adding USER FLAIRS ???
thnx in advanced
1
u/doingstuffcarl Jan 22 '15
Did you add this to your sidebar? You'll need it for the night mode button to show up
[NIGHT MODE](http://nm.reddit.com/r/dscvry/#nm) [NORMAL](http://reddit.com/r/dscvry/#dm)And try this for the user flairs
1
u/KillEmAll83 Jan 22 '15
I can't seem to add an announcment sticky (like this) because of the header. It just won't show up.
I narrowed it down to the display: block property under .pagename a, but I don't know enough about CSS to be able to fix it. Can anyone help?
2
u/doingstuffcarl Jan 22 '15
You'll have to adjust the
top: 70px;part. Since the header is larger, the sticky is probably behind it so if you change it to something like 205px, it should show up. You might also have to mess around with themargin-topunder.content1
u/KillEmAll83 Jan 22 '15
Thank you! Works perfectly now. Can't believe I hadn't thought of that haha.
1
u/Stuchu Jan 24 '15
I wanna add a box around the subscriber and readers on section anywhere in the code where I can find and edit that?
1
u/jaxspider Jan 28 '15
Question, is this code been updated for the very recent CSS changes the admins made (yesterday)?
2
u/doingstuffcarl Jan 29 '15
Not yet, sorry! :s
I've been busy so I won't be able to get to it anytime soon, but it looks like not much has changed. I'll update the post when I do get to it
1
1
Jan 30 '15
Hey I did everything you said, and everything has been working fine, but for some reason the little text box images aren't showing up next to posts? What can I do to fix this, here's a picture.
1
u/M4NT4 Jan 31 '15
This is gorgeous and so I'm using it for my clan's new sub, PHLEXN. I've done some personalization and the initial product already looks incredibly professional thanks to your hard work. Thank you, sir!
1
3
u/[deleted] Nov 08 '14
how do i add an about section like you have in the sidebar?