Posted under General
Johnyyyz said:
I was wondering if the admin of the site (or just someone which has access to the html and css) could add a class to the TD on the tags page? Right now the css style is inline, like so:
<td style="background: linear-gradient(to left, #DDD 0.0%, white 0.0%)">1</td>So it's not possible to change it and the background will therefore stay white, which is very annoying when you are using a dark theme :(
Not sure how you get in contact with an admin, can you guys help?
Easy as that.
Johnyyyz said:
I was wondering if the admin of the site (or just someone which has access to the html and css) could add a class to the TD on the tags page? Right now the css style is inline, like so:
<td style="background: linear-gradient(to left, #DDD 0.0%, white 0.0%)">1</td>So it's not possible to change it and the background will therefore stay white, which is very annoying when you are using a dark theme :(
Not sure how you get in contact with an admin, can you guys help?
Might want to check out topic #9662/p8, especially forum #131909.
BrokenEagle98 said:
Might want to check out topic #9662/p8, especially forum #131909.
Already checked that and sadly you are not able to change css that is inline because that always gets the last word.
Johnyyyz said:
Already checked that and sadly you are not able to change css that is inline because that always gets the last word.
Not they don't. Lines with !important at the end have higher priority than inline elements.
Danbooru adds !important to every line of your Custom CSS so that it always has highest priority, even over inline elements. The only way for an inline element to have a higher priority is if they also have !important, which none of them do, at least not from Danbooru.
BrokenEagle98 said:
Not they don't. Lines with
!importantat the end have higher priority than inline elements.Danbooru adds
!importantto every line of your Custom CSS so that it always has highest priority, even over inline elements. The only way for an inline element to have a higher priority is if they also have!important, which none of them do, at least not from Danbooru.
Ah, you are right :) my mistake was that I used "background-color: red;" instead of "background: red;", thanks.
I know it's been asked before somewhat, I still scratching my head on how to apply the FontAwesome icons to my custom CSS (which imports custom fonts which seem to supercede/override the FontAwesome icons). Presently resorting to emoji and without them, I just see placeholder blocks. Any CCS code to add those FontAwesome icons back? I'm stumped actually as every method I have tried has not worked.
Updated
nanami said:
I know it's been asked before somewhat, I still scratching my head on how to apply the FontAwesome icons to my custom CSS (which imports custom fonts which seem to supercede/override the FontAwesome icons). Presently using emoji replace and without them, I just see placeholder blocks. Any CCS code to add those FontAwesome icons back? I'm stumped actually.
I'm not getting what you're asking. Are you asking how to add FontAwesome icons elsewhere on the site? Or are the FontAwesome icons not appearing at all, with or without your CSS?
If it's the former, you have to using Javascript to add the appropriate elements to get them to appear.
If it's the latter, then the FontAwesome icons are probably being blocked on your end. Might want to check your browser to see if there's anything that's blocking them. Also maybe try a different browser or something.
BrokenEagle98 said:
Or are the FontAwesome icons not appearing at all, with or without your CSS?
They do appear without my CSS.
BrokenEagle98 said:
If it's the latter, then the FontAwesome icons are probably being blocked on your end. Might want to check your browser to see if there's anything that's blocking them. Also maybe try a different browser or something.
Actually, this also persists across browsers and devices. I may use Javascript, on my browsers on my computer, but it may not work on my mobile devices, both on Android and iOS (version 8.4 in my case).
nanami said:
They do appear without my CSS.
If I'm reading you right, then the missing icons may be caused by your custom CSS. You might want to go through it and see if there are any CSS "i" selectors or selectors that start with ".fa-". If you want to post your custom CSS somewhere, I could take a look at it as well.
BrokenEagle98 said:
If you want to post your custom CSS somewhere, I could take a look at it as well.
Here's a link to my custom CSS, minus the emoji codes: https://shrib.com/#_jPO9d8NMuyU12GhpnE9
I hope this helps.
nanami said:
Here's a link to my custom CSS, minus the emoji codes:
I hope this helps.
Okay, looking over it I was able to see why the icons weren't loading on my browser. It's because the "*" block at the beginning of your CSS overrides ALL font choices, but the Overpass font doesn't have those Font Awesome glyphs encoded into it, so it reverts to the browser default which is Arial on mine, which doesn't show anything either. To fix the Font Awesome icons, I just had to specify that those class items get the Font Awesome 5 Pro font, and since a class has a higher specificity than the "*", that's the font that will be correctly used.
.far, .fas {
font-family: "Font Awesome 5 Pro";
}I believe I found all of the classes, but if there are any missing, then just inspect the missing icon using the dev console to find the base class.
Also, on a side note, one of your import lines is consistently causing faulty network calls since the line isn't formatted correctly.
@import url("https://fonts.googleapis.com/css?family=Russo+One");The above loads the following section in addition to what you want:
/* sampled usage */
@font-face {
font-family: 'Russo One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/stats/Russo+One/normal/400);
unicode-range: U+20;
}However, that URL is bogus so it always errors out on every single page load. To get the same fonts that you want without the bogus section above, just specify the font weight at the end.
@import url("https://fonts.googleapis.com/css?family=Russo+One:400");
BrokenEagle98 said:
Okay, looking over it I was able to see why the icons weren't loading on my browser. It's because the "*" block at the beginning of your CSS overrides ALL font choices, but the Overpass font doesn't have those Font Awesome glyphs encoded into it, so it reverts to the browser default which is Arial on mine, which doesn't show anything either. To fix the Font Awesome icons, I just had to specify that those class items get the Font Awesome 5 Pro font, and since a class has a higher specificity than the "*", that's the font that will be correctly used.
.far, .fas { font-family: "Font Awesome 5 Pro"; }I believe I found all of the classes, but if there are any missing, then just inspect the missing icon using the dev console to find the base class.
Just applied the .far/.fas code to my custom CSS. Works now. Also fixed the Russo One problem you're mentioning. I did save my emoji codes in my phone just in case. (I'm using my phone right now.) Thanks!
With the addition of IDs to the post options in the side menu (forum #159833), it's a lot easier and more stable to change the order of items how they appear in the menu. You can use the following as a template which demonstrates ordering the post options section.
#c-posts #a-show #post-options ul { display: flex; flex-direction: column; }
#post-option-resize-to-window { order: 1; }
#post-option-add-to-favorites { order: 2; }
#post-option-remove-from-favorites { order: 2; }
#post-option-edit { order: 3; }
#post-option-download { order: 4; }
#post-option-add-to-pool { order: 5; }
#post-option-add-note { order: 6; }
#post-option-copy-notes { order: 7; }
#post-option-add-commentary { order:8; }
#post-option-add-fav-group { order: 9; }
#post-option-find-similar{ order: 10; }
#post-option-flag { order: 11; }
#post-option-appeal { order: 11; }Note that all options that are available to the user must be included in the list, otherwise they get bumped to the top of the listing.
Is there a way to do a bulleted list in a note, using a specified character for the bullet (which is different between the first list-item and subsequent ones) and have the text aligned correctly in hanging indent form?
I was able to get a satsifactory result with this (see post #3636149):
<p style="... margin:-4px; padding:6px 6px 6px 23px"> <span style="margin-left:-17px; margin-right:3px">※</span>Head toward the Atmosphere Regulation Facility <span style="margin-left:-13px; margin-right:9px">!</span>Search for City 682 <span style="margin-left:-13px; margin-right:9px">!</span>Obtain map data for this area</p>
based on formatting from post #3329440. But I don't think this works in general (i.e. might look wrong to other users with different browsers).
issue #4194 was recently fixed, so now items in the upload menu can be hidden/sorted with a bit more stability.
The following is a hiding example pulled from forum #160379.
#c-uploads #a-show .upload_artist_commentary_container, #c-upload-media-assets #a-show .upload_artist_commentary_container { display: none; } /* Hide commentary section */ forum #159841 above can be used as an example for how to change the order.
Updated
Based upon a conversation in topic #16501, I thought I'd share some CSS that I've been using.
//Removes the minus link "+" next to tags
.search-inc-tag {
display: none !important;
}
//Removes the minus link "-" next to tags
.search-exl-tag {
display: none !important;
}
BrokenEagle98 said:
Based upon a conversation in topic #16501, I thought I'd share some CSS that I've been using.
//Removes the minus link "+" next to tags .search-inc-tag { display: none !important; } //Removes the minus link "-" next to tags .search-exl-tag { display: none !important; }
Thank you very much! This worked like a charm.
/* Blur instead of hiding (blacklisted) */
.post.blacklisted-active, #image-container.blacklisted-active, .post-preview.blacklisted-active { display: inline-block!important; }
.post.blacklisted-active picture, #image-container.blacklisted-active picture, .post-preview.blacklisted-active picture {filter: blur(4px) brightness(0.5);}
.post.blacklisted-active, #image-container.blacklisted-active {filter: blur(8px) brightness(0.5);}
.post.blacklisted-active:hover picture, #image-container.blacklisted-active:hover picture, .post-preview.blacklisted-active:hover picture,.post.blacklisted-active:hover, #image-container.blacklisted-active:hover {filter: blur(0px) brightness(1);}
.post-preview.post-status-flagged:not(.mod-queue-preview) img, .post-preview.post-status-pending:not(.mod-queue-preview) img, .post-preview.post-status-has-parent img, .post-preview.post-status-has-children img, .post-preview.post-status-deleted img {border: none !important;}
.post-preview a {border : 2px solid transparent !important;overflow: hidden;}
.post-preview.post-status-deleted a {border-color: var(--preview-deleted-color); }
.post-preview.post-status-has-parent a {border-color: var(--preview-has-parent-color);}
.post-preview.post-status-has-children a {border-color: var(--preview-has-children-color);}
.post-preview.post-status-flagged:not(.mod-queue-preview) a, .post-preview.post-status-pending:not(.mod-queue-preview) a {border-color: var(--preview-pending-color);}
.post-preview.post-status-has-children.post-status-has-parent a {border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);}
.post-preview.post-status-has-children.post-status-flagged:not(.mod-queue-preview) a, .post-preview.post-status-has-children.post-status-pending:not(.mod-queue-preview) a { border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);}
.post-preview.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) a, .post-preview.post-status-has-parent.post-status-pending:not(.mod-queue-preview) a {border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);}
.post-preview.post-status-has-parent.post-status-deleted a {border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);}
.post-preview.post-status-has-children.post-status-deleted a {border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);}For example, in post #3724300 Rem focus, but this post will be hidden if Emilia_(re:zero) is blacklisted. With blur, you can understand who is in focus and not miss the post.
Screenshot
Updated