Can I get some CSS for the forum specifically?
There are no borders anywhere so I get confused sometimes...
Here is what I'm using atm,
.forum-post > .content {
border: 2px solid grey;
padding: 0.8em;
border-radius: 10px;
}
Posted under General
toshiya4 said:
Can I get some CSS for the forum specifically?
Are you asking for someone to develop CSS, or are you proposing the above CSS so that other's may use it as well?
If it's the former, you need to provide more of what you're looking for, as the code you provided seems to be sufficient at delineating forum posts.
This is what it looks like https://i.imgur.com/akRXAUE.png
I want to do something about the names of posters and maybe make the posts look nicer.
toshiya4 said:
I want to do something about the names of posters and maybe make the posts look nicer.
Could you be more specific...? Maybe prototype something out with an image program like MSPaint and post it here so that we can see what you're looking for and whether it's possible with CSS or not.
Here are some CSS for Janitors who are using the mod queue:
#c-moderator-post-queues .post[data-tags~="bad_anatomy"], #c-moderator-post-queues .post[data-tags~="bad_perspective"], #c-moderator-post-queues .post[data-tags~="bad_proportions"], #c-moderator-post-queues .post[data-tags~="bad_hands"], #c-moderator-post-queues .post[data-tags~="bad_leg"], #c-moderator-post-queues .post[data-tags~="bad_feet"], #c-moderator-post-queues .post[data-tags~="bad_ass"], #c-moderator-post-queues .post[data-tags~="bad_vulva"] {
background: #D3D3D3;
}
#c-moderator-post-queues .post[data-tags~="hard_translated"], #c-moderator-post-queues .post[data-tags~="self_upload"], #c-moderator-post-queues .post[data-tags~="nude_filter"], #c-moderator-post-queues .post[data-tags~="photoshop"], #c-moderator-post-queues .post[data-tags~="screencap"] {
background: #FFF7CC;
}
#c-moderator-post-queues .post[data-tags~="md5_mismatch"], #c-moderator-post-queues .post[data-tags~="resized"], #c-moderator-post-queues .post[data-tags~="upscaled"], #c-moderator-post-queues .post[data-tags~="downscaled"] {
background: #FFCCCC;
}
#c-moderator-post-queues .post[data-tags~="image_sample"], #c-moderator-post-queues .post[data-tags~="duplicate"] {
background: #FFFF64;
}
#c-moderator-post-queues .post-pos-score {
background: transparent;
}
#c-moderator-post-queues .post-neg-score {
background: transparent;
}Edit: Made some changes to the CSS.
Now mostly unneeded with the new update adding more CSS to the mod queue. This is still useful if you want to customize the color/tag highlighting though.
Updated
Nitrogen09 said:
Here are some CSS for Janitors who are using the mod queue:
That's pretty brilliant, although the image sample might be a rare encounter, since those are added mostly by myself and RaisingK. The bad anatomy tags also require manual tagging, but there more users that can add those.
BrokenEagle98 said:
That's pretty brilliant, although the image sample might be a rare encounter, since those are added mostly by myself and RaisingK. The bad anatomy tags also require manual tagging, but there more users that can add those.
Yeah, but sometimes it's easy to miss these sample tags when watching the mod queue, so the CSS above should help when it does happen (currently only posts with duplicate tag in the mod queue are marked with yellow). Also, highlighting banned_artist should help with quickly banning these posts after they are uploaded.
I agree with Nitrogen here. It is always better to mark such posts and make them more prominent.
Another case @Nitrogen09 are uploads with no source. The source is mentioned in the queue, but sometimes you don't notice that.
Provence said:
I agree with Nitrogen here. It is always better to mark such posts and make them more prominent.
Another case @Nitrogen09 are uploads with no source. The source is mentioned in the queue, but sometimes you don't notice that.
I thought it's already obvious enough to notice the source in the mod queue? Otherwise, I have no idea about the element for the source info though...
With the lastest update, a new slew of CSS classes are available for DText links (Help:Dtext).
The following is the class hierarchy:
The following is some example CSS code that will suround post search links with brackets:
.dtext-post-search-link::before { content: "【";}
.dtext-post-search-link::after { content: "】";}
Is it possible to use custom CSS to show the post ID of similar posts when they're detected on the upload page? I think it would make it easier to make that post a parent/child (I could just copy and paste the ID, instead of having to open the post and copy from the URL) but it seems too petty to make a feature request for
fossilnix said:
Is it possible to use custom CSS to show the post ID of similar posts when they're detected on the upload page? I think it would make it easier to make that post a parent/child (I could just copy and paste the ID, instead of having to open the post and copy from the URL) but it seems too petty to make a feature request for
No, CSS only changes the visualization of existing elements. Javascript is what you're looking for.
Custom CSS to move the paginator on post listings to the top (see topic #13851):
#posts {position: relative;}
#posts>div:first-child {top: 5em; position: relative; margin-bottom: 5em;}
#posts>.paginator {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
Here is some quick and dirty CSS to make favoriting and other actions possible on the mobile layout:
@media screen and (max-width: 660px) {
#c-posts #a-show {
display: flex;
flex-direction: column;
}
/* Hide the responsive tag list */
#c-posts #a-show #responsive-tag-list {
display: none;
}
/* Unhide the normal sidebar and move it beneath the post. */
#c-posts #a-show #sidebar {
display: block;
width: auto;
float: none;
order: 2;
}
}
This hides the tags sidebar when browsing /posts. Screenshot. This is useful if you have a smaller screen and want more space for thumbnails.
/* Move the posts beneath the sidebar. */
#c-posts #a-index #content {
margin-left: 0;
padding-left: 0;
}
/* Move the sidebar above the posts and lay it out horizontally. */
#c-posts #a-index #sidebar {
display: flex;
flex-direction: row;
width: auto;
float: none;
}
/* Hide Tags and Related sections. */
#c-posts #a-index #sidebar #tag-box, #sidebar #related-box {
display: none;
}
/* Add spacing between search bar and mode menu. */
#c-posts #a-index #sidebar section {
padding-right: 3em;
}
evazion said:
This hides the tags sidebar when browsing /posts. Screenshot. This is useful if you have a smaller screen and want more space for thumbnails.
/* Move the posts beneath the sidebar. */ #c-posts #a-index #content { margin-left: 0; padding-left: 0; } /* Move the sidebar above the posts and lay it out horizontally. */ #c-posts #a-index #sidebar { display: flex; flex-direction: row; width: auto; float: none; } /* Hide Tags and Related sections. */ #c-posts #a-index #sidebar #tag-box, #sidebar #related-box { display: none; } /* Add spacing between search bar and mode menu. */ #c-posts #a-index #sidebar section { padding-right: 3em; }
Many thanks :3.
^Wrong thread. The above should go in topic #9127.
Some CSS code that makes the forum post content appear beneath the name instead of being squished to the right on the mobile layout. Example of issue: https://my.mixtape.moe/gerfwa.png
@media screen and (max-width: 660px){
.forum-post .content {
float: left;
clear: left;
margin: 0;
}
}