GameBanana shows no ads to members. Sign up now!
Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

Finer categories lists (aligned)

A Config Script for GameBanana

43 1 kb Raw Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* categories icons - equal width, centered */
#CategoriesListModule record .Icon,
#SubcategoriesListModule record .Icon {
    min-width: 60px;
    text-align: center;
}

/* handle categories without icons */
#CategoriesListModule record .Info,
#SubcategoriesListModule record .Info {
    margin-left: 1em;
    padding-left: 60px;
}

/* do not apply the latter rule to categories with icons */
#CategoriesListModule record .Icon + .Info,
#SubcategoriesListModule  record .Icon + .Info {
    margin-left: 0;
    padding-left: 0;
}

/* the 3rd column handles the whitespace in the li tag in subcategories */
#CategoriesListModule record .Info .SubcategoriesListWrapper li {
    display: grid;
    grid-template-columns: 55px auto 10px 100px;
    white-space: nowrap;
}

/* handle subcategories without icons */
#CategoriesListModule record .Info .SubcategoriesListWrapper li a {
    grid-column-start: 2;
}

/* has not been implemented for SubcategoriesListModule */
#SubcategoriesListModule record itemcount {
    margin-left: 1em;
}

/*
AUTHOR: s0nought , https://github.com/s0nought
LICENSE: Unrestricted reuse in any form, for any purpose.
WARRANTY: THERE IS NO WARRANTY, TO THE EXTENT PERMITTED BY LAW.
*/
This code changes the way categories and subcategories lists are rendered.

Changes:
  • Icon wrappers (not to be confused with the icons themselves) are 60px in width
  • Icons are centered
  • Subcats lists display changed from flex to grid (looks like a table now)

This code applies to any page on gamebanana.com

Tested in the latest desktop version of Firefox

See screenshots below.

Knows "issues":
  • If there is no icon for the category (subcategory), there will be a blank space to the left of the category (subcategory) title.
Sign up to access this!

No comments yet

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
s0nought
s0nought Joined 10y ago
Offline
8,716 points Ranked 788th
22 medals 2 legendary 3 rare
  • Submitted 50 Gamefiles Medal icon
  • 10 years a member Medal icon
  • 6 years a member Medal icon
  • Submitted 20 Gamefiles Medal icon
  • Returned 1000 times Medal icon
  • Reached 1,000 Points Medal icon
Code

Submitter

s0nought avatar
s0nought Joined 10y ago
Offline
8,716 points Ranked 788th
22 medals 2 legendary 3 rare
  • Submitted 50 Gamefiles Medal icon
  • 10 years a member Medal icon
  • 6 years a member Medal icon
  • Submitted 20 Gamefiles Medal icon
  • Returned 1000 times Medal icon
  • Reached 1,000 Points Medal icon
s0nought
Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Sub-category
UI Themes
Super-category
Cascade Style Sheets

License

Unrestricted reuse in any form, for any purpose.

Attributes

Platform
Desktop
Language
CSS
Page
Any

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • 1
  • 65
  • 15d

More from Submitter

WiPs by Submitter

More UI Themes Scripts