SHOW:
|
|
- or go back to the newest paste.
| 1 | /* This is a short bit of CSS for reddit subreddit styling that imitates the dropdown content used in the /r/asoiaf sidebar */ | |
| 2 | /* You can see an example of this at the following link: http://www.reddit.com/r/rtheone/comments/22gv3z/sandbox_1/cjwn2tl */ | |
| 3 | ||
| 4 | /* Whipped together by /u/rtheone || /u/temp9123 for /r/TrueAnime */ | |
| 5 | ||
| 6 | /* You'll see the text "h5+h6+h4+blockquote". I use this selector to insure the comment's intent. */ | |
| 7 | /* In order to create this type of formatting, you'll have to format your comment like the following: */ | |
| 8 | ||
| 9 | /* | |
| 10 | ||
| 11 | #####	 | |
| 12 | ######	 | |
| 13 | ####	 | |
| 14 | > * The title, or the hoverable text, would go in the first line. | |
| 15 | > * The following lines contain following paragraphs. | |
| 16 | > * You can add as many paragraphs as you want into the body of the content. | |
| 17 | ||
| 18 | */ | |
| 19 | ||
| 20 | /* This system works by identifying a sequence of tags created by #####	 ######	 and ####	 */ | |
| 21 | /* Once it detects that sequence, it checks for a blockquote containing a list, and modifies it from there. */ | |
| 22 | ||
| 23 | /* This removes the vertical line that reddit creates for blockquotes. */ | |
| 24 | .usertext-body h5+h6+h4+blockquote {
| |
| 25 | border: none; | |
| 26 | } | |
| 27 | ||
| 28 | /* This sets up the entire blockquote, creating a border around the entire object. */ | |
| 29 | .usertext-body h5+h6+h4+blockquote ul {
| |
| 30 | margin: 0px; | |
| 31 | border: 2px solid #369; | |
| 32 | } | |
| 33 | ||
| 34 | /* This hides every element on the list and gets rid of the bullet points. */ | |
| 35 | .usertext-body h5+h6+h4+blockquote ul li {
| |
| 36 | display: none; | |
| 37 | padding: 2px 4px; | |
| 38 | list-style-type: none; | |
| 39 | background-color: white; /* Remove this line if you want the background to be transparent. */ | |
| 40 | } | |
| 41 | ||
| 42 | /* This generates the title box and its formatting. */ | |
| 43 | .usertext-body h5+h6+h4+blockquote ul li:first-child {
| |
| 44 | display: block; | |
| 45 | color: white; | |
| 46 | font-size: 9pt; | |
| 47 | font-weight: bold; | |
| 48 | text-align: center; | |
| 49 | background-color: #369; | |
| 50 | } | |
| 51 | ||
| 52 | /* This displays the content on mouseover. */ | |
| 53 | .usertext-body h5+h6+h4+blockquote ul:hover li {
| |
| 54 | display: block; | |
| 55 | } |
