How to Improve BoardGameGeek with Custom CSS Coding

March 11, 2020 | Guides | 4 comments

Learn how to use custom CSS and styling to make BoardGameGeek easier to read and use after the design updates.

I prefer function and usability over appearance in many senses. Many of my board games are beautiful, but the key is to have a set of mechanics and rules that work well! BoardGameGeek has undergone a few new design changes that didn’t play well with my eyesight and other preferences. Read on to see how custom CSS can help solve some issues!

The Greatest Web Team

To prepare for the work ahead, I sent out a call for assistance from the Calico Critters. They were ready!

With a blank sort of canvas, they stopped by with all the tools necessary to work on coding. You know… Pencils, rulers, notebooks, and the like. Professional tools.

Maybe they weren’t exactly well-equipped for something of this magnitude! Note that one of these ladies looks like she’s Edie McClurg from Ferris Bueller’s Day Off. Ha ha!

Regardless, settle in for a bit. This may not be the most visually-appealing post, but I hope it proves to be useful!

Important Notes

First of all, the goal of this custom CSS is to improve the usability of BoardGameGeek. I created it to help me personally, and this post isn’t meant to reflect negatively on the site. I can be extra sensitive to small fonts, and it’s good to know that there are options out there! Some of my style choices might not the best, but they work for me.

Requirements for Using This Code

Although this CSS can be used in any sense, the following are a few basic requirements:

  • Desktop: This code is designed to be used on a desktop, and it is not optimized for tablets nor mobile devices.
  • Stylus Extension: Stylus for Chrome*, Firefox, or Opera is recommended, but any custom CSS importer will work.

You do not need to understand any sort of coding! There is a step-by-step guide below to run through all of the options. If an element doesn’t work for you and you want to change it, you can. Just test and save along the way. You’re all set!

*As of March 2020, Stylus for Chrome may or may not show up correctly. There is a beta release that may be an option.

Installation Instructions

No worries! This may look like a lot, but it’s very straightforward. Should you run into any trouble or have any questions, I’m rather easy to find and contact. I’m happy to help! To install this custom CSS, use the following steps:

  1. Open Stylus, which can often be accomplished by clicking on the icon and then the “Manage” button.
  2. Click on the option to “Write new style” but leave the checkbox for Usercss blank.
  3. Locate the section that states “Applies to” near the bottom of the page.
  4. Add “URLs on the domain” for boardgamegeek.com, rpggeek.com, and videogamegeek.com.
  5. In the main “Code 1” section, paste any and all custom CSS code you would like to use from the download below.
  6. Check the boxes labeled “Enabled” and “Live preview” to see how the site looks in another tab.
  7. Make any changes to the CSS that you would like, and continue to check BoardGameGeek in another tab.
  8. Click on the “Save” button to save the CSS code and enjoy!

This is simply a way to restyle how the site looks, so if anything should go horribly wrong, remove the custom CSS and start over. The actual site is unaffected: You’re simply changing how it appears to you. Good luck, and enjoy!

Full Download of the Custom CSS

Use the following link to download this custom CSS. That’s it! If you’re comfortable with seeing how the code works yourself, feel free to stop right here. The rest of this post goes into detail about the changes, what each section does, and some ideas for other options should my choices not work for you. I hope it helps improve BoardGameGeek!

Download the Full Custom CSS Code (Version 5.0 CSS File)

You may also want to stay subscribed to the Custom CSS Skins GeekList. I post updates occasionally, and there are also a lot of excellent options available! The point is to find what helps you, whether or not that comes from me.

A Note on Screenshots

Since I make changes and updates pretty regularly, what you see below may not entirely represent what the custom CSS currently looks like. It should still provide a rough idea, though! Everything is customizable, so you can achieve a lot of different looks with just a few lines of CSS. As always, ask away if you have a question or request. 

Original Home Page

Your screen resolution and browser will change this overall appearance. In general, though, this is how the BoardGameGeek home page should normally look.

The following elements don’t work for me:

  • Small Fonts: The text is difficult to read.
  • White Background: Stark white can be painful.
  • Empty Space: There is wasted space in the top bar.
  • Vertically Tall: Each topic takes up a lot of room.

Some of these aspects apply to the entire site design in general, though hopefully it makes sense to include them!

Custom CSS Home Page

At a glance, this may actually look a little worse! There is less contrast, though, which is what I wanted to accomplish. Remember that the CSS is customizable.

I went with a wider page style because I wanted to avoid excessive scrolling all over the place. Successful choice?

Perhaps this isn’t the most beautiful example simply due to the fact that I don’t use the home page that much. It can be rather cluttered, though I like the summaries!

Note how different the site can look with some custom CSS. I think that’s the main idea: It’s possible to change it!

Original Details

A closer inspection might showcase some of my issues with the design. In particular, the font is small and difficult to discern. Boring fonts can be better!

Other elements that may not be obvious are the following:

  • Fixed Sidebar: The links disappear when scrolling.
  • Wasted Space: The right side of the items is empty.

Effectively, I found that it was hard for me to read through the home page on a desktop. There was a lot of scrolling, and my eyes had to look all over the place. Not great.

Custom CSS Details

I went with a more compact view here. I removed some excessive details that told me nothing and just took up space. Too much? Potentially. But it can  be changed!

The counts for thumbs and comments might seem a little spaced out, yet I sometimes only scan through these areas.

So again, I made this work for me. I like how I can read through everything in an easier way. Is it perfect? Far from it. I actually update this custom CSS pretty regularly.

At the same time, the major improvement centers around the font. I can read the text without getting a headache!

Original Forum Post

The newest update to the site design came in the presentation of the forum posts. Ouch. My eyes!

I had many issues with this, including the following:

  • Monochromatic: Everything blends together.
  • No Colors: Elements are hard to distinguish.
  • Minimal Spacing: One post is very close to the next.
  • Split Footer: Reply and quote are on the far right.

I knew I had to simply get used to some of these design choices, but some of them created headaches and usability issues. Back to the drawing board of my custom CSS!

Custom CSS Forum Post

There we go! After some careful work, I managed to put things in their place and help make this easier to use.

For me, this made an enormous difference and helped me bring back a little bit of nostalgia. This felt a little bit like the old forums, which was a nice side effect.

Ah, I should mention that there is a little surprise when replying or quoting a post! It’s small… No worries. I had to have a little fun while putting this together. Ha!

There may be some minor changes over time, though I was very happy with how this initially turned out.

Forum Post Closeup

Perhaps I would have gotten used to some of this design with time. I have to stress, however, that a lot of these elements made me physically ill. Not so good.

I appreciate how mobile users now have a better way to browse through the forum posts, though!

It might not be that apparent, but nearly everything is either black, grey, or white. This high contrast can be jarring, especially when coupled with a small, thin font.

Yet I don’t mean to harp on any negatives! This is where my desire to fix things kicked in, and off I went.

Custom CSS Post Details

I made many changes in this space, such as the following:

  • Labels: Designers and publishers are easy to find.
  • Thumbs: Counts are in a happy sort of green.
  • GeekGold: The icons and “Tip” are gently tinted.
  • Buttons: Reply and quote are aligned on the left.
  • Quotes: Colors help make these stand out.
  • Spoilers: These are larger and easier to open.

As I mentioned above, the section to reply or quote is also a little different. Oh! And the post header scrolls with the page, so that navigation is possible from anywhere.

A Wall of Text Warning

The following section goes through all of the options in-depth. One of the recommendations for good blogs is to avoid walls of text. Well, I’m breaking that rule like a monster! Possibly the best way to use this post is to search for specific functions of the custom CSS download. I wish you luck, and apologize for the practically endless text!

Please note that for the sake of saving some space, classes and IDs have been omitted. If you have any trouble finding something, though, ask away! I can always reformat this section if it makes sense to include those values, too.

Borders

This set of CSS adds borders to various elements in order to create more separation.

Feel free to change the 1px or 4px values to anything else. This will either increase or decrease the overall size of the specific border.

The color can also be changed to anything. Use a hex color chooser in order to find something that works for you.

The box-shadow property is optional and just adds a bit of flair. If it seems distracting, simply remove it to only use standard borders.

Note that increasing the size of borders can change the appearance of some elements.

/* Sets the border around various elements */

border: solid 1px #aaaaaa !important;

/* Sets specific borders around various elements */

border-right: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;

/* Adds a more prevalent border to the selected article */

border: solid 4px #565281 !important;
box-shadow: 0 0 6px 0 rgba(88, 156, 177, 0.2);

/* Outlines unread items like forum posts and GeekList items */

border: solid 4px #d71925 !important;
box-shadow: 0 0 6px 0 rgba(215, 25, 37, 0.2) !important;

Background Colors

These options change the background colors. It is recommended to keep the first section a bit darker, and the middle section lighter.

The final section simply fixes an issue with the way the legacy elements show up with these values set. No need to change it at all!

/* Sets the darker background color for main elements */

background-color: #e7e7ea !important;

/* Sets the lighter background color for secondary elements */

background-color: #f7f7f8 !important;

/* Sets the background color for the legacy GeekGold and thumbs */

background: transparent !important;

Buttons

This changes the way buttons appear. They typically utilize a dark background with light text, but feel free to experiment!

The second section is for the appearance of buttons when they are hovered over.

/* Sets the colors of buttons */

background-color: #565281;
color: #ffffff;

/* Sets the colors of buttons on hover */

background-color: #3e3b5d;
color: #ffffff;

Commands

This is a minor set of CSS that changes the style of some commands around the site.

It mostly has to do with fixing heights and widths to avoid anything overlapping or getting cut off. Feel free to try other values.

Note the background-color property, too.

/* Sets the styling of the command divider */

background-color: #565281;
width: 2px !important;
height: 2em !important;
margin-top: 10px;

/* Increases the line height of certain commands */

line-height: 2em;

Font Colors

This set of properties affect the appearance of text, particularly in the way of color for links.

I use the same color for visited and unvisited links, but the codes are separate. This should make it easy to customize them!

The hover properties include a slightly different color and the underline property.

Finally, note that some darker elements require a lighter font color to show up. This is what the final section controls.

/* Sets the font color for links and other elements */

color: #565281;

/* Sets the font color for visited links */

color: #565281;

/* Sets the font color and styling for focus and hover links */

color: #3e3b5d !important;
text-decoration: underline;

/* Sets the font color for darker elements */

color: #f7f7f8 !important;

Font Family

Use the font that is the easiest to read for you.

/* Sets the font family of text elements */

font-family: Verdana, sans-serif;

Font Size

Try a higher or lower value, as desired.

/* Sets the font size of text elements */

font-size: 15px !important;

Font Weight

This removes excessive bolding in some areas.

/* Sets the font weight of various elements */

font-weight: 100;

Forum Posts

Here is the official wall of text within a wall of text! Everything here is designed to change the styling of elements in forum posts.

Most of the descriptions should be pretty straightforward, particularly if you’ve looked at some previous sections. CSS isn’t too bad!

This is probably the most drastic set of changes, aside from any of the global CSS.

I wanted to achieve the following:

  • Better Content Separation
  • More Color Between Elements
  • Improved Element Alignment
  • Uniform Site Appearance

One other side effect was a somewhat vintage feel to forum posts with the color scheme. As always, this is completely customizable.

I recommend keeping colors the same across all elements. A quick search and replace on the CSS document should do the trick.

Some of these updates might be unnecessary. Adding color to the GeekGold icon was a fun project, but feel free to remove it for yourself!

The best way to understand how each element works is to change or remove one, then see how the site is different.

I had some other ideas to improve usability. Unfortunately, CSS can’t do everything!

A lot of these fixes move elements from the far right to the left side of the page. This is to avoid eyestrain from going back and forth.

Those who know me may also find someone hiding out in the CSS… It’s easy to take out!

The forum header will now scroll down the page, though this sometimes leads to slightly cutoff content. Use it as you like, or not at all.

Note that this section is for the new forum design, so it may end up affecting other areas of the site as they are moved over.

This CSS document is a constant work-in-progress, though, and I do my best to make sure it works with every new update.

For reference, this section covers the following areas of forum posts:

  • Breadcrumb Trails
  • Cancel Buttons
  • Designer Buttons
  • Empty Spaces
  • Formatting Links Location
  • Forum Headers
  • GeekGold Icons
  • GeekGold Tips
  • Guidelines Location
  • Icon Sizes
  • Legacy Editor Location
  • Page Links
  • Post Buttons
  • Post Footers
  • Post Spacing
  • Preview Tabs
  • Publisher Buttons
  • Text Areas
  • Thumb Counts
  • Timestamps
  • Usernames
  • Write Tabs

It’s certainly a lot! Yet I hope it isn’t too difficult to understand and get through.

If it all seems like a giant jumble, I can look into making some sub-headings and doing a little more cleanup to make it easier to use.

Remember that you can always add another element class or ID to any of these sections!

I often find little elements that aren’t covered, which is where a lot of the updates come from.

Just this section of CSS should make a drastic difference in the appearance of forum posts. Be sure to include other CSS, too!

The font and width sections are probably the most important global improvements.

However, this CSS is meant to be used in whatever ways work for you. Add, change, or remove anything that you want to.

Should any additional changes come to forum posts, this section will be updated. Hopefully, this will entail improved desktop usability!

/* Sets the hover color of the forum post footer buttons */

color: #3e3b5d !important;

/* Sets the styling of the reply and quote buttons */

font-weight: bold !important;

/* Sets the styling of the forum write and preview tabs */

color: #565281 !important;
font-weight: bold !important;

/* Sets the styling of the forum write and preview tabs on hover */

color: #3e3b5d !important;

/* Moves the legacy editor next to the write and preview tabs */

margin-left: 0 !important;

/* Moves the guidelines and formatting links further to the left */

margin-left: 8px;
text-align: left !important;

/* Adds an optional and fun little element of the stealthy sort */

content: “🐘”;

/* Adds separation between the forum post and cancel buttons */

margin-right: 40px;

/* Sets the styling for the designer and publisher buttons */

background-color: #ec5e2a !important;
color: #ffffff !important;

/* Moves the post footer contents to the left side */

color: #565281 !important;
display: block !important;
margin-left: -.6rem !important;

/* Sets a maximum height for the text area of a reply */

background-color: #f7f7f8 !important;
max-height: 300px !important;
overflow: auto !important;

/* Makes the forum header sticky so it scrolls down the page */

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;
width: 100%;
z-index: 100;

/* Prevents real names from being truncated on forum posts */

line-height: 1.2em;
max-width: 20em !important;

/* Sets the styling of usernames on forum posts */

color: #565281 !important;
font-weight: bold;

/* Sets the styling of the GeekGold tip section */

fill: #efe4a2 !important;
fill: #d0b343 !important;
color: #ac9537 !important;

/* Sets the styling for thumb and GeekGold tip counts */

color: #3b8524 !important;

/* Sets the size of most icons */

-webkit-transform: scale(1.3) !important;
-ms-transform: scale(1.3) !important;
transform: scale(1.3) !important;

/* Reduces the size of specific icons */

transform: scale(0.8) !important;

/* Aligns the top thumb count with the rest of the post header */

height: 30px !important;

/* Removes the empty space on the right side of the page */

display: none;

/* Sets the styling of the page links on forum posts */

background-color: #565281;
border-color: #586fb1;
color: #586fb1;

/* Sets the color of the breadcrumb trail links */

color: #565281 !important;

/* Sets the color of the breadcrumb trail links on hover */

color: #3e3b5d !important;

/* Sets the styling of the forum post timestamp */

color: #565281 !important;

/* Adds more separation between forum posts */

margin-bottom: 40px !important;

Game Pages

This set of CSS may look like a lot, yet it covers only a specific set of elements. Namely, the forum and GeekList areas on game pages.

As with the rest of the width properties, feel free to experiment with different sizes to find something that works for you.

I always recommend keeping the colors uniform across the whole site, so be sure to make any updates to all related elements.

One of the other main aspects of this CSS code is the ability to hide the “Buy a Copy” button that appears on all game pages.

I thought it was a little annoying to be constantly reminded to purchase another copy… Particularly for games I already own!

This section will only affect elements of the game pages, so be sure to be in the correct area to test any changes you want to make.

/* Sets the styling of the forum and GeekList overview pages */

max-width: 200px !important;
overflow: inherit;
background-color: #ffffff;
color: #565281;
background-color: #3e3b5d;
color: #ffffff;
margin-left: 40px;
margin-left: 10px;
width: 220px;
max-width: 300px;
overflow: auto;
text-align: right !important;
font-weight: bold;
text-align: left !important;

/* Sets the styling of game page sections */

color: #565281;
color: #3e3b5d;

/* Hides the Buy a Copy button on game pages */

display: none;

GeekLists

I spend a lot of time on GeekLists, so a lot of these elements are personal preferences.

The first section increases the size of titles, and the second adds a small border on the left.

Only the final item may not be ideal, as it makes every GeekList item title stand out a bit. Feel free to change it in any way you like!

/* Sets the styling of GeekList titles */

font-size: 30px !important;

/* Adds a small border to the lower area of GeekList items */

border-left: 1px solid #aaaaaa;

/* Sets the styling of a GeekList item title */

background-color: #bdd9c4;
line-height: 3em;

Header Navigation

This section covers the CSS for the top navigation bar that appears across the site.

It features some color modifications, including a way to make the notifications appear in the original orange color. Vintage!

The navigation search box also appears in a wider format to make searches easier.

One element that may or may not be useful is the ability to hide the “Next” button.

This is a useful way to navigate through subscriptions. However, it also changes the position of certain links.

I hide it so that I always know how the header navigation will look like. It’s easy to remember where to click, at least for me.

Everything that usually appears on the right side is also now closer to the left side.

This may create a slightly cluttered look, but as always, everything here is customizable.

/* Sets the position of the user notifications and search bar */

flex: 0 !important;
text-align: left !important;

/* Sets the size of the navigation search box */

max-width: 300px;
min-width: 300px;
width: 300px !important;

/* Changes the color of notifications to match the original orange */

background: #ff5100;

/* Sets the style of the GeekMail and notification icons */

color: #e7e7ea !important;

/* Sets the style of the GeekMail and notification icons on hover */

color: #f7f7f8 !important;

/* Hides the Next button for subscription notifications */

display: none;

/* Sets the background color of the search dropdown menu items */

background-color: #f7f7f8 !important;

Headers

This prevents header text from being cut off.

/* Fixes the header line height size so hanging letters aren’t cut off */

line-height: normal !important;

Home Page

The home page is one area that looks drastically different with this set of CSS. I set out to make it more compact for myself.

The first section reduces a lot of extra spacing. Feel free to try out different padding or margin values to make it work for you.

Hiding the author and subforum names cuts down on the data. These details aren’t useful to me because I focus on the post titles.

All of the metadata, such as thumb and comment counts, is located on the right side and neatly aligned with a little separation.

Finally, the color scheme is maintained with the rest of the elements with the custom post reactions color. Change as needed!

/* Reduces the padding and margin on the home page */

padding: 2px 4px;
font-weight: normal;
max-width: 850px;
line-height: 1.5em;
margin: 0;
width: 1.2em;

/* Hides the author and subforum names from the home page */

display: none;

/* Moves metadata on the front page to the right side */

display: flex;
justify-content: space-between;
padding-left: 5px;

/* Changes the color of the post reactions on the home page */

color: #565281;

Image Pages

Most of the aspects of image pages are covered by other global CSS changes.

However, padding and colors are important to update in order to more easily use the pages.

/* Makes the metadata easier to read on the image page */

color: #000000 !important;
padding: 5px !important;

/* Increases the padding for the breadcrumb trail */

padding: 5px;

Legacy Avatars

Properly styles avatar blocks for larger fonts.

/* Sets the styling of legacy avatar blocks */

overflow: auto;

Legacy Counts

Decreases GeekGold and thumb counts sizes.

/* Sets the styling of legacy GeekGold and thumb counts */

font-size: 0.8em !important;

Polls

This set of elements changes a lot of style elements for polls. It’s mostly just visual.

The max-width and width properties can help space out the columns better, though.

/* Sets the styling of polls */

background-color: #565281 !important;
max-width: 60% !important;
width: 60% !important;
border: 4px solid #ff5100 !important;
background-color: #bdd9c4 !important;

QuickBar

This might be one of my favorite CSS changes! It makes the QuickBar sticky so that it scrolls down the page. Very, very handy.

Depending on your browser, the top and/or width properties may need to be adjusted.

If you don’t use the QuickBar, this might not be useful. But for those who do, enjoy!

/* Sets the position of the QuickBar */

padding: 0 0 0 0 !important;
position: -webkit-sticky;
position: sticky;
top: 72px;
width: 215px !important;

/* Sets the style of the header text on hover */

color: #f7f7f8 !important;

Quotes

There are generally different quote sections known as the legacy version and the new version. This CSS updates both.

In particular, colors and borders can be customized. Legacy quotes work well enough, though this helps keep them uniform.

Where a major difference may be seen is with the new quote version. Take a look at a forum post with any quotes to see the changes.

I focused on making sure that quotes stood out and could easily be seen from a distance.

Nested quotes should also be easy to find with the border. Not enough? Try increasing the 1px value or changing the color.

Quote headers should also stand out a bit more. In general, quotes are easier to find and read with this set of CSS coding.

/* Sets the styling of legacy quotes */

background: #d9d8e6;
border: solid 1px #aaaaaa;
margin-left: 1em;

/* Sets the styling of legacy quote titles */

margin-left: 1em;

/* Sets the styling of the the new quote sections */

background: #d9d8e6 !important;
border: solid 1px #aaaaaa !important;
margin-left: 1em !important;

/* Prevents quote titles from being cut off vertically */

line-height: 1.4em !important;

/* Sets the styling of the new quote header */

background-color: #3e3b5d;
color: #ffffff;
line-height: 1em !important;
padding: 10px;

Ratings

The rating pages found on game pages suffer a little bit from larger fonts and more spacing.

This set of CSS makes sure that this small section appears correctly without any overlap.

/* Reformats the ratings page */

margin-bottom: 30px;
margin-top: 30px;
-webkit-flex-basis: 150px;
flex-basis: 150px;
max-width: 150px !important;

Sizing and Spacing

Most of these elements are global CSS updates that are a little more random. However, most focus on controlling empty space.

A lot of these elements are about the size of input fields or windows. The descriptions should be self-explanatory in most cases.

There is also a legacy element for adding spacing around year badges and microbadges.

Remember that the site is currently in the midst of multiple designs. Legacy elements may go away at any time.

It still never hurts to leave in CSS for unused elements, though. I’ll certainly look into removing unneeded coding, though!

For any fixed widths, be sure to experiment with the values should you need to adjust.

/* Sets the size of the file input field for uploads */

overflow: auto !important;
width: 400px !important;

/* Sets the width of modal windows */

max-width: 1000px;

/* Adds spacing around year badges and microbadges */

margin-bottom: 2px;
margin-top: 2px;

/* Sets the size of the file description window */

max-width: 100% !important;

/* Sets the styling the legacy pop-up box */

width: 1000px;
background-color: #3e3b5d;
color: #f7f7f8;
font-weight: bold;

Spoilers

As with quotes, both legacy and new versions of spoilers are affected by this set of coding.

Legacy spoilers will overflow into space for extra padding without the transparency.

This will make a big difference in how spoilers appear. For one, they will take up the entire line and make it easier to reveal.

Both revealed and unrevealed spoilers are customized separately with this CSS.

/* Sets the styling of legacy spoilers */

background: transparent !important;

/* Sets the styling of legacy and new spoilers */

background-color: #3e3b5d !important;
display: block !important;
min-height: 50px;
padding: 0 !important;
padding: 10px !important;
background: #d9d8e6 !important;
border: solid 1px #aaaaaa;
padding: 10px !important;

User Profiles

This section is mostly used for the cleanup of user profiles. They exist in an odd space where they need a little extra help to look good!

In particular, the CSS allows for more spacing on tabs to accommodate larger fonts.

And, of course, the final section has to do with the hover properties of the tabs. 

/* Sets the styling of user profile content */

min-width: 110px !important;
padding-left: 1em;
padding-right: 1em;
text-align: center;

/* Sets the style of the tab text on hover */

color: #f7f7f8 !important;
text-decoration: underline;

Width

Adjust based on your screen size, or use 100%.

/* Sets the width of the entire site content */

max-width: 2200px;

Technology Troubles

You made it through everything! That’s more than can be said for the Calico Critters… I had to undertake this project by myself once some facts came to light.

Namely, the most technologically advanced of the critters only knew how to use a basic cash register. Oh, my!

I had a little laugh as they prepared to help with books, notebooks, pens, and pencils. Still, it was the thought that counted! These red glasses were also simply adorable.

So perhaps the Calico Critters can’t tackle CSS, but hopefully you can with this guide to custom CSS!

Continue the Conversation

What do you think of this set of changes? Are there any elements you need help finding, or possibly requests for other codes? I may not have the time to create custom code for everyone, but I’m happy to help in any way I can. Making the site usable is important, particularly for those of us who prefer larger fonts. Enjoy, and long live BoardGameGeek!

4 Comments

  1. Being on BGG for so many years, I never knew this was possible. Thanks for such a practical article. Now I have a new toy to enjoy 😉

    Reply
    • Enjoy, Jay! I’ve slowly been building on this coding since last year, which explains why it’s so long.

      If you have any questions or need any help, you know who to contact. I hope it works out well for you!

      Reply
  2. Thank you, Jessica. I am amazed that I was able to follow your directions successfully on my own. I am so happy with the changes you have created. Please extend my appreciation to the Calico Critters!

    Reply
    • You’re very welcome, Chris! I’m happy to hear that my rambling is at least semi-coherent. Ha ha!

      This CSS is the only way I can use the BoardGameGeek site nowadays. It’s a shame that the changes aren’t that user-friendly for everyone, but at least these sorts of custom solutions exist.

      If you ever have any questions or need help doing something, feel free to ask away.

      And I’ll definitely thank the Calico Critters! They did quite an awesome job. Ha!

      Reply

Submit a Comment

Your email address will not be published.

I accept the Privacy Policy