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!

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.

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.

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!

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.

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.

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.

Font Family

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

Font Size

Try a higher or lower value, as desired.

Font Weight

This removes excessive bolding in some areas.

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!

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.

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!

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.

Headers

This prevents header text from being cut off.

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!

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.

Legacy Avatars

Properly styles avatar blocks for larger fonts.

Legacy Counts

Decreases GeekGold and thumb counts sizes.

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.

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!

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.

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.

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.

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.

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. 

Width

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

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!