Is there a way to display the workshop items in columns of say 9 instead of 3? (and still align in the center)

[Auditormadness9]

The url of site https://steamcommunity.com/workshop/browse/?appid=4000&browsesort=mostrecent&section=readytouseitems&requiredtags%5B0%5D=Model&actualsort=mostrecent&p=1

Is your request related to a problem? Please describe. Trying to view more items at a time.

Describe the result you'd like with the rule The grid instead of displaying 3 items per row to display 9 (or X number) of items per row.

Custom rule you've tried { "name": "steamcommunity.com", "url": "^https?://steamcommunity\.com/", "include": ".workshopBrowsePaging", "nextLink": "a.pagebtn:last-child", "pageElement": ".workshopBrowseItems", "pageAction": "document.querySelectorAll('.workshopBrowseItems>script').forEach(e=>{eval(e.innerHTML)})", "replaceElement": ".workshopBrowsePaging", "css": ".workshopBrowseItems {display: grid; justify-content: space-between; grid-template-columns: repeat(9, 1fr); grid-column-gap:10px; grid-row-gap:10px; position: absolute; z-index: 9999;} .pagetual_pageBar{margin-top:0px!important}", "action": 0 }

Additional context Without the CSS tag it does the pagination thing seamlessly, I added the CSS modification to achieve what I wanted to but it kinda messes up the entire thing. If you put this in and try for yourself you'll see the clusterfuck it causes, instead of displaying normally and letting me scroll down to see more it just slideshows all the items (displays all pages in one page, changing to next page every second)

[hoothin]

You can use this rule

"css": "html.responsive #profileBlock{overflow: visible;}.workshopBrowseItems {display: grid; justify-content: space-between; grid-template-columns: repeat(9, 1fr); grid-column-gap:10px; grid-row-gap:10px; position: relative; z-index: 9999;margin-left: -450px;} .pagetual_pageBar{margin-top:0px!important}"

But I don't think it's a good idea

[Auditormadness9]

seems like it's displaying 30 by 30:

It's 9, 9, 9, 3 repeat

[Auditormadness9]

nvm, fixed by "pageElement": ".workshopBrowseItems > .workshopItem",

thanks a lot! I know it's hella messy but it still is a good alternative view

[Madnessday2006]

nvm, fixed by "pageElement": ".workshopBrowseItems > .workshopItem",

Sorry, this seems to have disabled the hover preview text. Is there a way to make them appear but also make them be lined up consistently and not 30 by 30?

[Auditormadness9]

nvm, fixed by "pageElement": ".workshopBrowseItems > .workshopItem",

Sorry, this seems to have disabled the hover preview text. Is there a way to make them appear but also make them be lined up consistently and not 30 by 30?

[Auditormadness9]

You can use this rule

"css": "html.responsive #profileBlock{overflow: visible;}.workshopBrowseItems {display: grid; justify-content: space-between; grid-template-columns: repeat(9, 1fr); grid-column-gap:10px; grid-row-gap:10px; position: relative; z-index: 9999;margin-left: -450px;} .pagetual_pageBar{margin-top:0px!important}"

But I don't think it's a good idea

hey, here's my current rule:

{
    "name": "Garry's Mod",
    "url": "^https?://steamcommunity\\.com/workshop/browse/",
    "example": "https://steamcommunity.com/workshop/browse/?appid=4000&browsesort=mostrecent&section=readytouseitems&requiredtags%5B0%5D=Model&actualsort=mostrecent&p=1",
    "css": "html.responsive #profileBlock{overflow: visible;} .workshopBrowseItems {display: grid; justify-content: center; grid-template-columns: repeat(12, 1fr); grid-column-gap: 5px; grid-row-gap: 5px; position: relative; z-index: 9999; margin: 0 auto; width: 100%; max-width: 100vw;} .workshopBrowseItems > * {box-sizing: border-box;} .pagetual_pageBar {margin-top: 0px!important;} @media (max-width: 1200px) { .workshopBrowseItems {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}}",
    "pageElement": "body > div.responsive_page_frame.with_header > div.responsive_page_content > div.responsive_page_template_content > div.default > div > div.clearfix > div > div.workshopBrowseItems>*",
    "action": 0
}

it's not bad, but can we make it fit inside the original grid's territory so it doesn't overlay into other buttons and settings, and also when you hover over the items the text descriptions overlay on them?

oh and one more: can we make it automatically scale? like if we tell it to be 12 columns per screen, it should automatically make the texts and thumbnails smaller to fit?