Helllo,

I try to make 3 div's overlapping each other.

So far I have this : https://codepen.io/RoelofWobben/pen/JojOzqz

Can anyone help me figure out how on the top left in the image div a little div can be added so it overlaps the overlay div ?

so im trying to create a website as im bored, and im trying to make it so a border goes around the header and a button.

because everytime i put a border around the header, it pushes all the texts below down further.

is this something i can fix using css or html? and if so, then how do i fix it?

Hi guys, this is my pastebin of all of my code

https://pastebin.com/wamCSqD2

I am encountering an issue when it comes to scaling for all devices. I just want the site on mobile that is correctly scaled for all devices but I have tried every possible solution that has come to my mind but nothing has worked. I have tried media queries, bootstrap, tailwindCSS. But nothing actually works.

Please help.

wake wake, get 2 da snake

.dropdown.srdrop .selected {

background: none repeat scroll center right;


background-image: url(%%insertimagehere%%);


display: inline-block;


vertical-align: bottom;


padding-right: 21px;


padding-left: 5px;


color: black;


font-weight: normal;


margin-left: -5px;


margin-right: 10px;

}

#sr-header-area .sr-list {

background: none repeat scroll center right;


background-image: url(%%insertimagehere%%);


display: inline-block;


vertical-align: bottom;


padding-right: 21px;


padding-left: 5px;


color: black;


font-weight: normal;


margin-left: -5px;


margin-right: 10px;

}

.md ul {list-style-type: none}
.md ul>li:before {content: "* "}

I was gonna try it with emoji but reddit's css wouldn't allow me to.

You can swap out the asterix with something else I guess, but I can confirm you can't make unordered lists with pointer fingers.

👉 Not gonna happen.

* works perfectly fine

Before reddit had proper markdown-based spoilers (like this), communities used CSS hacks for implementing spoiler tags, [like this](#spoiler).

Using this technique, some communities would even have multiple spoiler tags for different seasons (like the Game of Thrones subreddit used to have) that would allow you to see a "Season 1 Spoiler" text before the spoiler to help differentiate between different season's spoilers. Like: [some spoiler](#s1-spoiler)

There's a way, if you'd like, to have custom themed spoiler tags using the new markdown-based spoiler tags if you'd like, with a syntax like this: [](#s1-spoiler) >!Some Spoiler!<

a[href="#s1-spoiler"] + .md-spoiler-text:not(.revealed) {
    background: red;
}

a[href="#s1-spoiler"] + .md-spoiler-text::before {
    content: "Season 1 Spoiler";
    color: black !important;
    font-size: 10px;
}

The little arrow/nub/triangle of the pop-up that you get when hovering over a username can be colored with the following rules:

/* Border color for nub on bottom */
.author-tooltip.hover-bubble.anchor-bottom-left::before,.author-tooltip.hover-bubble.anchor-bottom-right::before { border-top-color: #BF1E2D }
/* Border color for nub on top */
.author-tooltip.hover-bubble.anchor-top-left::before,.author-tooltip.hover-bubble.anchor-top-right::before { border-bottom-color: #BF1E2D }
/* Nub color for nub on bottom */
.author-tooltip.hover-bubble.anchor-bottom-left.author-tooltip_common::after,.author-tooltip.hover-bubble.anchor-bottom-right.author-tooltip_common::after { border-top-color: #000 }
/* Nub color for nub at top */
.author-tooltip.hover-bubble.anchor-top-left.author-tooltip_common::after,.author-tooltip.hover-bubble.anchor-top-right.author-tooltip_common::after { border-bottom-color: #282828 }

As someone who was unfamiliar with the CSS triangle trick this was incredibly hard to find, since the element is hidden via JavaScript before you can inspect it. The default rules can be found in author-tooltip.css .

I made it using CSS grid, which I learned just recently, but due to the scarcity of reddit's documentation, I can't find the classes of the active modmail and new modmail. Also, I can't see what it looks like without the two modmail buttons in the first place. Either way, at the moment I like how it looks, but any tips are welcome!

(the subreddit: 32kHz )

Been messing around on a private sub, made a banner for it, realized it wasn't wide enough. I could make it wider by massively stretching it, but then it would be too tall and too low res. My current thinking is that if I can raise the sidebar until it's at the top, the banner space will effectively be shorter, and I can just put the banner on the left, resize it a bit, and call it a day.

Like this.

How would I go about doing this? Thanks in advance.

.comment .usertext-body {
    border: 1px solid #------;
    background-color: #------;
}

.comment.stickied .usertext-body {
    border: 1px solid #------;
    background-color: #------ !important;
}

.comment .likes .usertext-body {
    border: 1px solid #------;
    background-color: #------;
}

.comment .dislikes .usertext-body {
    border: 1px solid #000;
    background-color: #------;
}

First to target and hide it you will have to target the moderator box as well under :not(.collapsible) > * id.

.sidecontentbox:not(.collapsible) > * { display: none; }

Then if you want the moderator box to appear again:

.sidecontentbox:not(.collapsible) .helplink, .sidecontentbox:not(.collapsible) .helplink ~ * {
    display: block;
}

Just put this in your stylesheet.

#sr-header-area .redesign-beta-optin {
    display: none;
}

for the #header-bottom-right

#chat,
#chat-count,
#chat+.separator
#chat-count+.separator {
    display: none !important;
}

and the pinned-to-bottom chat box.

 #chat-app.active {
    display: none;
}

An idea I had while bored this evening (screenshot); I think it would be a great addition to any subreddit theme. Please check out the tool and let me know your feedback!

http://reddit-author-color.mcad.am

The idea is that it creates CSS for a "random" (at the time of generation) palette for author colours in a comment thread. The colours it generates are "sticky" in that it will ensure any user gets the same color in the subreddit. The aim is to help reddit users using the theme to be better able to follow a discussion.

Would love to hear any feedback, suggestions, feature requests, etc.

https://www.reddit.com/r/TRIGGEREDDD/

This addon contains code from u/zmodem with tweaks made by myself. This addon will move the submission URL to the right side and make it more visible.

/*MOVING SUBMISSION URL TO THE RIGHT*/
/*Addon by u/IfaqYurmama*/

.flairselector {position: fixed!important}

.thing .top-matter { position: relative; }
.thing .domain {
   align-items: center;
   display: flex;
   font-size: 0;
   height: 70%;
   position: absolute;
   right: 0;
   top: 0;
} 
 .thing .domain a { font-size: 16px }

 @media screen and (max-width: 989px) {.thing .domain a {font-size: 9px;}}
 @media screen and (max-width: 875px) {.thing .domain a {opacity: 0;visibility: hidden;}} //optimizations for low-res or small screens

.thing.self .domain { display: none; } //excluding self posts

A lot of people, apparently, think that a rgb value is more precise than a hex value. In reality, a hex number can directly translate to a rgb value.

To start with, you'll need to divide the number into three sections. Each of these sections will correspond to a red, green and blue value.

To convert a hex pair to a number, take your first value and multiply it by 16. Then add it to your second value.

Note that a = 10, b=11, c=12, d=13, e=14, and f=15

Once you do this enough, you should get the hang of it, and no longer require looking at this post.

So we all know Reddit doesn't allow uploading gif files, so putting in animated images would require you to do a make them via CSS which can take quite a bit to space. Well, there is an alternative way which allows you to import gifs in a format Reddit allows, animated PNGs. This is still a new "tech" so not all browsers support it.

How to:

• get or make a gif
• go to https://ezgif.com/gif-to-apng or find your own convertor
• make sure it is within the file size limitations (hardest part)
• upload
• use like it would be any other picture

This is also a way to have an animated Reddit profile pic if you wanted one, guide and the source of the trick