Thumb up
3 Posts

BoardGameGeek» Forums » BoardGameGeek Related » BGG General

Subject: Let me see your user CSS rss

Your Tags: Add tags
Popular Tags: [View All]
Heiko Günther
flag msg tools
Coming soon: Peak Oil!
I spent 100 GG so you can read this.
I assume I am not the only one using a user stylesheet to make BGG look a bit better (subject to personal taste©); I would like to see how yours looks like, and of course the stylesheet that does the trick.

Here are 2 screenshots of mine, startpage and a geeklist, the rest is pretty similar:

And my current stylesheet. I keep adding and/or changing stuff as it annoys me and it has grown quite a bit with the years, so please excuse the relative mess.

#header {border-color: #EEE !important;}
#container {margin-left: 5px !important;}
.menu_login {background-color: #fff !important;
border-color: #fff !important;}
.mainmenutabs {background-color: #fff !important;
border-color: #fff;}
.mainmenutabs li a.selected {background-image: none !important;
background-color: #fff !important;
color: #000; !important}
.searchmenutabs li a:visited {color: #000 !important;}
.menucontainer {background-image: none !important;
background-color: #fff !important;}
.searchmenu {background-image: none !important;
background-color: #fff !important;}
.menu_quickbar {background-color: #fff !important;
border-color: #fff !important;}
.spotlight th {background-image: none !important;
background-color: #999 !important;}
.moduletable th {background-image: none !important;
background-color: #fff !important;
color: #000 !important;
border-top-left-radius: 5px;}
.moduletable > tbody > tr > td {background-color: #ddd !important;}
.recentitems .innermoduletable tbody tr {background-color: #fff !important;}
.hotitems .innermoduletable tbody tr {background-color: #fff !important;}
.module_title {color: #000 !important;
font-size: 16px !important;}
.innermoduletable tbody tr {background-color:#ddd !important;}
th + th {border-top-left-radius: 0px !important; }
.right a:link {color:#900 !important;}
.hotitems th {background-image: none;}
.moduletable th a.selected, .moduletable th a:visited.selected {color:#000 !important;}
.modulecommands select {background-color:none !important;
color: #000 !important;}
a:link {color:#000 !important;}
a:visited {color:#000 !important;}
a:hover {color:#a51 !important;}
a:active {color:#25a !important;}
.moduletable {border-style:none !important;}
#subdomain_module {display: none;}
#main_content {margin-top:10px !important;}
.profile_table th {background-image: none !important;
background-color: #999 !important;}
.tabOn, .tabOff, .geekmail_header, .menu_table {background-image: none !important; }
.tabOff, .geekmail_header{ background-color: #DDD !important;}
.tabOn, .menu_table { background-color: #999 !important;}
.bluebox {background-color: #B0E1E2 !important;
border-color: white !important; }

.forum_index_table th, .forum_table th {
background-color: white !important;
color: #000000;}

div.recommend_block {
background-color: rgba(150, 150, 150, 0.2) !important;
border: none !important;}
div.recommendbox_str {
background: none repeat scroll 0 0 #666 !important;}

#blog_categories h2, #blog_contributors h2, #blog_admin h2, #blog_subscribe h2, #blog_search h2, #blog_dashboard_title h2, #blog_dashboard h2 {
background: none repeat scroll 0 0 #fff !important;
color: #000 !important; }
#blog_header { background: none repeat scroll 0 0 #C5E9EA !important;
color: #000 !important; }
.blog_header {
border-color: #edd !important; }
.blog_post { background-color: white !important;
border: none !important; }
.post_categories ul li a, .post_nlinks ul li a, .post_numcomments {
background: none repeat scroll 0 0 #fee !important;
border: none !important;}
#blog_categories ul, #blog_contributors ul, #blog_admin ul, #blog_subscribe ul, #blog_dashboard_commands ul, #blog_search div {
background: none repeat scroll 0 0 white !important;
border: none !important;}

.geeklist_title {
background: none repeat scroll 0 0 #C5E9EA !important; }
.article > .geeklist_title + dl {background-color: #fff !important;}
.article > .geeklist_title + dl + dl {background-color: #fff !important;}
.geeklist_item_title {
background: none repeat scroll 0 0 #C5E9EA !important; }
.geeklist_item_comments { margin-left: 35px !important; }

.article { border-radius: 0px;
border-color: white !important;
background-color: white !important;
//border-bottom: 4px silver solid !important; }
.article > dl + dl {background-color: #eee !important;}
.article > dl {border-bottom: 0px solid #eee !important;
background-color: #eee !important}
.subbed_selected, .subbed { border-color: #d99 !important; }

.quotetitle {
background-color: #ddd !important;
border: none !important;
color: #000 !important;}
.quote {
background-color: #fff !important;
border: none !important;
color: #000;}

.profile_block { border-radius: 0px; border-color: white !important;}
.header {border-radius: 0px; border-color: white !important;}
a > img.fl { width: 30px !important; opacity: 0.01;}
.comment_toolbar {
background: none repeat scroll 0 0 transparent !important;
border: none !important;
margin: 5 0 !important;
padding: 0 !important; }

.forum_table, .forum_index_table {
background-color: #fff !important;
border: none !important;
border-spacing: 2px !important;}
.forum_table td, .forum_index_table td {
background-color: #eee !important;}
.comment_button, .comment_button_disabled {
background: none repeat scroll 0 0 #ddd !important;
border: 1px solid #red !important;
color: black !important;}

#minigallery {margin: 10px 0 !important;}

#simpleCarousel {display: none !important;}

#results_hotitems {display: none !important;}

#bggcon_label {display: none !important;}

#maincontent > table:nth-child(2) > tbody > tr > td:nth-child(2) > table > tbody > tr > td:nth-child(2) {width: 10px !important;
background-color: none !important;}
 Thumb up
  • [+] Dice rolls
flag msg tools
       This space              intentionally              left blank.
I used to do heavy modifications of sites like that, but have mellowed out a bit, and for BGG just mostly stick to the default look. Besides display: none;ing a whole bunch of stuff I find annoying, the only significant tweak I have is the following (directly in userContent.css, since I'm oldskool, and try to live without extensions).

@-moz-document url-prefix("") {
.forum_table a[href^="/videogame/"], .forum_table a[href^="/videogame/"] + a { opacity: 0.3 !important; }

Context for the above:
I browse potentially interesting game forum threads via geekfeed, not via subscriptions. This means I see all threads posted to the game forums for all games in my collection. But sometimes (too frequently), videogame-related threads (predominantly iOS threads) get posted to the boardgame forums, rather than to the videogame forums. Forum moderators then move them to the right place, but they keep showing up in that geekfeed thread list. This CSS makes them look 'faded out', so I know I don't have to bother clicking on them.
 Thumb up
  • [+] Dice rolls
G Mc
flag msg tools
a_traveler wrote:
Besides display: none;ing a whole bunch of stuff I find annoying...

Good call! {
display: none;
 Thumb up
  • [+] Dice rolls
Front Page | Welcome | Contact | Privacy Policy | Terms of Service | Advertise | Support BGG | Feeds RSS
Geekdo, BoardGameGeek, the Geekdo logo, and the BoardGameGeek logo are trademarks of BoardGameGeek, LLC.