staff
1,114
edits
User:CDB-Man/CDBstyle: Difference between revisions
Jump to navigation
Jump to search
m
Capitalization and image moving
m (wishlist colour tweak) |
m (Capitalization and image moving) |
||
| (16 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
CDB`s improvements on DerIdiot`s AniDBstyle2. Contains mainly ergonomics updates. | CDB`s improvements on DerIdiot`s AniDBstyle2. Contains mainly ergonomics updates. | ||
Support forum thread here: | Support forum thread here: https://anidb.net/forum/thread/52076 | ||
Last Updated: [[User:CDB-Man|CDB-Man]] ([[User talk:CDB-Man|talk]]) | Last Updated: [[User:CDB-Man|CDB-Man]] ([[User talk:CDB-Man|talk]]) 01:31, 3 January 2015 (CET) | ||
= Improvements: = | = Improvements: = | ||
| Line 25: | Line 25: | ||
==== Application of Colours ==== | ==== Application of Colours ==== | ||
Highlight mylist entries, on mylist page, mylist timeline, and other pages where mylist entries appear. The order the colours are applied are as follows: | Highlight mylist entries, on mylist page, mylist timeline, and other pages where mylist entries appear. The order the colours are applied are as follows: | ||
* | * Red for if not fully collected (missing files), and have not started; default mylist colour | ||
* | * Red for collecting state (default behaviour, reinforces above) | ||
<pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red -- incompletely collected, .stalled</pre> | <pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red -- incompletely collected, .stalled</pre> | ||
<pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre> | <pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre> | ||
* | * Blue for .complete (fully collected and "ready to watch") | ||
<pre style="color:#000000; background:#71D8DE">background-color: #8DDFE4 !important; blue -- .complete</pre> | <pre style="color:#000000; background:#71D8DE">background-color: #8DDFE4 !important; blue -- .complete</pre> | ||
<pre style="color:#000000; background:#68CACE">background-color: #68CACE !important; blue odd -- .complete</pre> | <pre style="color:#000000; background:#68CACE">background-color: #68CACE !important; blue odd -- .complete</pre> | ||
* | * Orange for mylist state .completed but not .all_watched | ||
<pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .completed but not .all_watched</pre> | <pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .completed but not .all_watched</pre> | ||
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .completed but not .all_watched</pre> | <pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .completed but not .all_watched</pre> | ||
* | * Green for .all_watched | ||
<pre style="color:#000000; background:#A0E6A0">background-color: #A0E6A0 !important; green -- .all_watched</pre> | <pre style="color:#000000; background:#A0E6A0">background-color: #A0E6A0 !important; green -- .all_watched</pre> | ||
<pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd -- .all_watched</pre> | <pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd -- .all_watched</pre> | ||
* | * Black for .dropped | ||
<pre style="color:#FFFFFF; background:# | <pre style="color:#FFFFFF; background:#444444">background-color: #444444 !important; black -- color: #FFFFFF; font colour -- .dropped</pre> | ||
<pre style="color:#FFFFFF; background:# | <pre style="color:#FFFFFF; background:#222222">background-color: #222222 !important; black odd -- color: #FFFFFF; font colour -- .dropped</pre> | ||
* | * Orange for .watching | ||
<pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .watching</pre> | <pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .watching</pre> | ||
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .watching</pre> | <pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .watching</pre> | ||
* | * Red for .stalled | ||
<pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red -- incompletely collected, .stalled</pre> | <pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red -- incompletely collected, .stalled</pre> | ||
<pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre> | <pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre> | ||
=== Wishlist Highlighting === | === Wishlist Highlighting === | ||
Highlight with | Highlight with fuchsia accents, any item in your wishlist. | ||
<pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; | <pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; fuchsia</pre> | ||
<pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; | <pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; fuchsia odd</pre> | ||
=== Colour-based Features === | === Colour-based Features === | ||
==== Anime-Group Completion Bar ==== | ==== Anime-Group Completion Bar ==== | ||
* For anime-group in my list, the completion bar, changed from green to red to improve readability | * For anime-group in my list, the completion bar, changed from green to red to improve readability | ||
** | ** Also made the completion bar thicker, from 1px -> 2px -> 3px | ||
<pre style="color:#000000; background:#7EF27E">background-color: #7EF27E !important; anidb default green</pre> | <pre style="color:#000000; background:#7EF27E">background-color: #7EF27E !important; anidb default green</pre> | ||
<pre style="color:#000000; background:#FF0000">background-color: #FF0000 !important; new red</pre> | <pre style="color:#000000; background:#FF0000">background-color: #FF0000 !important; new red</pre> | ||
| Line 122: | Line 122: | ||
<pre style="color:#000000; background:#FF6464">background-color: #FF6464 !important; strong red odd (for use with purple)</pre> | <pre style="color:#000000; background:#FF6464">background-color: #FF6464 !important; strong red odd (for use with purple)</pre> | ||
<pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; | <pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; fuchsia -- color: #000000; font colour</pre> | ||
<pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; | <pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; fuchsia odd -- color: #000000; font colour</pre> | ||
== Text Changes == | == Text Changes == | ||
| Line 129: | Line 129: | ||
* <strike>On the anime-staff add/edit page, remove capitalization of source-info in the header</strike> Fixed on main. | * <strike>On the anime-staff add/edit page, remove capitalization of source-info in the header</strike> Fixed on main. | ||
== Icon Changes == | == Icon and Button Changes == | ||
* | * Revert to old stars on file tables | ||
* Colourized creq action buttons | |||
[[Image:CDBstyle colourized creq action buttons.png|framed|none|Colourized creq action buttons.]] | |||
== Layout Changes == | == Layout Changes == | ||
=== Whitespace Reduction === | === Whitespace Reduction === | ||
* Disallow line wrap on userpage stats block | * Insert nowrap of username on creqhist page (and possibly others) | ||
* | * Reduction of whitespace on the anime page grouplist and eplist, and the group page release list | ||
* | * Userpage: | ||
* div.data max width, to maximize the widths of image vs data div blocks (ie on group pages) | ** Disallow line wrap on userpage stats block | ||
* | ** Vertical align the user page avatar | ||
* | ** Shrink width of info box on userpages | ||
** Insert div.data max width, to maximize the widths of image vs data div blocks (ie on group pages) | |||
** Userpage sections flex adding (discussions section only so far) | |||
=== Imagepreview === | |||
* Remove the transparency from imagepreview | |||
* Make the imagepreview background white to work better with transparent images | |||
=== Main Tabs === | |||
* Moved the "main tabs" from the topright to the topleft | |||
If you want to move the tabs back to the right, use this userCSS: | |||
<pre>#layout-tabs ul | |||
{ | |||
text-align: right; | |||
} | |||
#layout-content #layout-tabs | |||
{ | |||
margin-left: 0em !important; | |||
}</pre> | |||
=== Miscellaneous Layout === | === Miscellaneous Layout === | ||
* | * Expand default text entry box size | ||
=== Action Buttons at the Top of Entry Pages === | === Action Buttons at the Top of Entry Pages === | ||
| Line 163: | Line 183: | ||
= Additional Optional Features = | = Additional Optional Features = | ||
You can enable each feature by adding it to your UserCSS. | You can enable each feature by adding it to your UserCSS. | ||
==== Force-show info blocks on main page that are hidden (likely due to resolution being too small) | ==== Hide the mouseover image for .restricted/hentai only ==== | ||
<pre>.restricted #imagepreview img { | |||
display: none !important; | |||
}</pre> | |||
==== Strikethrough rejected similar anime entries ==== | |||
<pre>#layout-main .similaranime .rejected { | |||
text-decoration: line-through; | |||
}</pre> | |||
==== Hide images from quicksearch popup menu ==== | |||
<pre>#layout-search ul.quicksearch li.g_bubble.stripe div.image { | |||
display: none; | |||
} | |||
#layout-search ul.quicksearch .g_bubble.stripe { | |||
min-height: 4.4em; | |||
} | |||
#layout-search ul.quicksearch .g_bubble.stripe div.data { | |||
margin: 0.5em 0.5em 0.5em 0.5em; | |||
}</pre> | |||
==== Force-show info blocks on main page that are hidden (likely due to resolution being too small) ==== | |||
<pre>#layout-main div.main_all #hotanime, | <pre>#layout-main div.main_all #hotanime, | ||
#layout-main div.main_all #latestended, | #layout-main div.main_all #latestended, | ||
| Line 179: | Line 220: | ||
<pre>display: none !important;</pre> | <pre>display: none !important;</pre> | ||
==== Rearrange the order of the blocks. For illustration, below`s the order that I`ve set for myself | ==== Rearrange the order of the blocks. For illustration, below`s the order that I`ve set for myself ==== | ||
<pre>#layout-main div.main_all #hotanime {order: 1;} | <pre>#layout-main div.main_all #hotanime {order: 1;} | ||
#layout-main div.main_all #latestended {order: 2;} | #layout-main div.main_all #latestended {order: 2;} | ||
| Line 188: | Line 229: | ||
#layout-main div.main_all #randcreator {order: 7;} | #layout-main div.main_all #randcreator {order: 7;} | ||
#layout-main div.main_all #randchar {order: 8;}</pre> | #layout-main div.main_all #randchar {order: 8;}</pre> | ||