Try my simple board-Game-Arena css-Design ( Dark-Mode)

[JojoP11]

https://boardgamearena.com/?use_custom_style=87767370

Unbenannt.GIF

This is a simple, dark design for Boardgamearena

Fixed:

- Could not see some Text, because it color was to close to the background

Added:

- some buttons are glowing if you hover over it
- Dark-Wooden-Background
- Changed Topbar
- cool, round corners
- The cards in Papayoo are more visible, while you activate them for exchange

How do I use it?


1. Click on your Avatar
2. go to settings
3. go to advanced
4. paste the code
5. refresh the website

Please tell me, what I could do better or whats already good.
Have a great Day

I was made aware that the links for the css designs wont work anymore. Therefore here is my Code. Have fun . Please tell me if I should change something.

last update: 10.02.2021

Code:

html,body {
background-color:#1f1f1f;
background-image:url(https://jooinn.com/images/dark-wood-grain-3.jpg);
width:100%;
height:100%;
font-family:Roboto, Source Sans Pro SemiBold;
}

.PointLine {
background-color:#656565;
color:#000;
}

#myhand .stockitem_selected {
transform:scale(1.02);
border:10px solid #000!important;
box-shadow:1px 1px 5px #000, 2px 2px 4px #000;
border-color:red;
margin:3px;
}

.yatzytable td {
color:#FFF;
padding:5px;
}

.player_presentation .player_status {
position:absolute;
top:27px;
left:9px;
}

.playername,a:link.playername,a:visited.playername {
position:relative;
top:1px;
left:auto;
background-color:#424242;
color:#199c90;
border-radius:2px;
font-weight:700;
text-shadow:0 0 2px #000;
}

.emblemwrap {
position:relative;
top:10px;
width:32px;
height:50px;
display:inline-block;
margin:2px;
}

.myarena_league.league_5 {
box-shadow:0 0 20px 2px #ff00e7d1;
}

.stockitem_selected {
border:solide;
border-color:red;
}

.gameranking .rank {
position:absolute;
left:5px;
top:15px;
font-weight:700;
color:#ffb100;
}

.myarena_league.league_5 .arena_points {
position:absolute;
right:59px;
top:25px;
color:#FFF;
}

.myarena_league {
position:absolute;
width:50px;
height:50px;
top:6px;
left:-5px;
background-image:url(../img/awards/arena_100-50.png);
}

#ingame_menu_content {
width:630px;
position:absolute;
background:linear-gradient(#2b2b2b,#1b1b1bad);
right:0;
top:62px;
z-index:1055;
display:none;
border:1px solid #000;
border-top:none;
box-shadow:0 3px 8px rgba(0,0,0,.3);
padding:10px 20px;
}

.player_in_list {
float:left;
width:250px;
height:54px;
position:relative;
background-color:#2d2d2d;
border-radius:10px;
margin:5px 20px 5px 5px;
}

#page-title,#phpbb,.howtoplay_content,.howtoplay_content {
box-shadow:-5px 5px 16px #000;
background-color:#464646;
}

#topbar #login-menu a {
color:#bbb;
background-color:#2d2d2d;
}

#login-menu,#language_switcher_dropdown,#mobile-menu,#friend-menu {
position:absolute;
background-color:#717171;
top:43px;
right:1%;
z-index:50;
text-align:left;
display:none;
background:linear-gradient(#313131,#48484885);
border:1px solid #000;
border-radius:13px;
box-shadow:0 8px 13px rgba(0,0,0,0.8);
}

#page-title {
text-align:center;
font-size:110%;
font-weight:700;
line-height:32px;
font-family:arial;
box-shadow:0 3px 8px rgba(0,0,0,.3);
}

.chatwindowlogstitle {
font-family:arial;
margin-left:37px;
margin-top:5px;
color:#FFF;
font-weight:700;
font-size:80%;
max-width:185px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#topbar a {
font-family:arial;
color:#73a5d0;
font-weight:700;
}

.reputation_verybad {
background-color:#2f2f2f;
#topbaracolor:#73a5d0;
font-weight:700;
font-family:arial;
}

.newsblocktitle {
position:absolute;
font-family:arial;
text-shadow:-2px 0 20px #000;
right:2%;
width:96%;
bottom:40px;
color:#FFF;
text-transform:uppercase;
font-size:30px;
text-align:right;
font-weight:700;
transition:bottom 1s;
}

.xp_container .arrow {
h3color:grey;
border-color:transparent transparent transparent #297d2ad1;
}

.xp_container .arrowl {
border-color:transparent #297d2ad1 transparent transparent;
}

.xp_container {
background-color:#297d2ad1;
border-top:2px solid #787878;
border-bottom:2px solid #787878;
color:#caa316;
}

.roundedbox {
position:relative;
background-color:#ffffff6e;
border-radius:10px;
padding:5px;
}

.diceactions {
position:absolute;
top:50px;
left:0;
width:200px;
color:#FFF;
text-align:center;
}

#topbar {
background:linear-gradient(black,#80808000);
}

.mode_3d #game_play_area_wrap div {
background:none;
background-color:grey;
}

.player-name {
font-weight:900;
background-color:#0463004f;
text-shadow:0 0 #000;
}

#zone_specialty {
font-size:13px;
color:#F08080;
}

.navigation {
background-color:#ffffff7a;
border-radius:10px;
}

.expandedgame_box_wrap,.mobile_version #gamelobbyauto .game_box_wrap.expandedgame_box_wrap,.mobile_version #gamelobbyauto .compactlobby .game_box_wrap.expandedgame_box_wrap,.mobile_version #gamelobbyauto .compactlobby.verycompactlobby .game_box_wrap.expandedgame_box_wrap,.mobile_version #gamelobbyauto .compactlobby.verycompactlobby.tiny_verycompactlobby .game_box_wrap.expandedgame_box_wrap {
background:#a1d7f191;
}

.pagesection .tabbed_slider_bar_barcenter {
background-color:#f9f3ec87;
}

.gametable {
background-color:#353535;
color:#c1c1c1;
}

.pageheader {
border-radius:10px;
background-color:#3a3a3a;
box-shadow:0 0 15px 0 #000;
}

.head_info {
background-color:#ffffff91;
}

.pagesection .tabbed_slider_bar_bar .pagesection .tabbed_slider_bar_right,.pagesection .tabbed_slider_bar_left {
border-top-color:#ffffff82;
}

.pagesection .tabbed_slider_bar_right,.pagesection .tabbed_slider_bar_left {
border-top-color:#f9f3ec85;
}

.row .row .col-md-8:last-child {
margin-right:0;
color:#d0d0d0;
}

a#quitgame {
background:#ff050538;
}

.sectiontitle_dropdown_menu {
background:#4a4a4a;
border-radius:10px;
border:1px solid rgba(0,0,0,.15);
box-shadow:0 3px 8px #000;
}

#table-module .active_player {
box-shadow:1px 1px 9px #000;
background:grey;
border-radius:10px;
}

.whiteblock {
background-image:none;
}

.tabbed_slider_bar_right {
border-top:28px solid #f8f8f878;
}

.tabbed_slider_bar_left {
border-top:28px solid #f8f8f875;
}

.tabbed_slider_bar_barcenter {
background-color:#ffffff73;
display:inline-block;
transition:padding .5s;
padding:0 1px;
}

a:link {
color:#e0e0e0;
}

.pageheader_menu_verylarge .pageheader_big_switch {
color:#c1c1c1;
background-color:#353535;
}

.mobile_version #gamelobbyauto .game_box_wrap,.desktop_version .compactlobby .game_box_wrap {
margin-right:11px;
margin-left:6px;
}

.mobile_version #gamelobbyauto .game_box_wrap,.mobile_version #gamelobbyauto .wannaplayauto_item,.desktop_version .compactlobby .game_box_wrap,.desktop_version .compactlobby .wannaplayauto_item {
width:140px;
height:175px;
}

.game_box_wrap.tables_available {
border:5px solid #b0ffa9;
background:#79ff792e;
}

a:visited {
color:#dcdcdc;
}

.pagesection,.portlet,.tips {
background-color:grey;
}

.pagesection h2,.portlet h2,.pagesection h3,.portlet h3 {
color:#a9a9a9;
background:#565656;
}

.newbgastyle #text {
font-family:corbel;
}

.wannaplayauto_button {
box-shadow:none;
}

.live_stream_state {
color:#ff6363;
}

.live_stream_next .live_stream_title_next {
color:#c6dcff;
}

.pagesection .tabbed_slider_bar_bar
.pagesection .tabbed_slider_bar_right,.pagesection .tabbed_slider_bar_left {
border-top-color:#ADD8E6;
chatwindowcollapsedbackground-color:#00b36b;
}

.gamestart_overlay {
background-color:#1f2e2e;
}

.icon20 {
display:inline-block;
width:20px;
height:20px;
top:5px;
pagesectionbox-shadow:2px 2px 10px #099;
}

.howtoplay_block_enabled {
border-radius:25px;
background-image:linear-gradient(white,grey);
color:#FFF;
}

#game_play_area .cards {
background-color:#1f2e2e00;
}

#async_table_banner {
background-color:#9EA4A9;
}

.pageheader_menuitem {
color:#daf2ee;
}

#open_table_now :hover {
box-shadow:0 0 15px 0 #4871b6;
}

.gametable_status_meeting,.gametable_status_asyncopen,.gametable_status_asyncinit,.gametable_status_tournamentopenturnbased,.gametable_status_meeting.gametable,.gametable_status_asyncopen.gametable,.gametable_status_asyncinit.gametable,.gametable_status_tournamentopenturnbased.gametable {
background-color:#000;
}

.chatwindowcollapsed,.chatwindowlogstitlebar {
background-color:#00995c;
}

#cantstartgame {
background-color:#ccffeb;
color:#208000;
border-color:#208000;
}

#quit_game {
background-color:#f66;
color:#b30000;
border-color:maroon;
}

#navbutton_gamelobby {
content:"Hallo";
}

#welcomenews* {
border-color:red;
border-width:5px;
}

.cards {
display:none;
}

.tabbed_slider_bar_barcenter:hover {
padding:30px 30px 15px;
}

#game_play_area .board-box {
height:60%;
width:60%;
}

50% {
background-color:blue;
}

.bgabutton_gray {
background-color:linear-gradient(black,grey);
border:5px solid #FFF;
}

.pagesection:hover,.pageheader,#quick_gamelobby,.bgabutton_grey,.pagesection,#favorite_section,#favorite_section,.pagesection,.portlet,.tips,.roundbox,.pagesection .tabbed_slider_bar_barcenter,.tabbed_slider_bar_barcenter,.pagesection.tabbed_slider_bar_barcenter,boardfooter,75%,.tips {
background-color:#FFC0CB;
}

#current_table_banner {
background-color:#ffffff42;
}

.wannaplayauto_button:hover {
box-shadow:0 0 15px 0 #7f77ff;
}

.bgabutton_darkgray :hover {
background:0;
}

a#quitgame :hover,#quit_game:hover,.emblem:hover {
box-shadow:0 0 15px 0 red;
}

.player_in_list .player_baseline,.pagesection h2 a,.portlet h2 a,.pagesection h3 a,.portlet h3 a {
color:#fff;
}

.comment,.bgabutton_blue {
background-color:red;
}

h3,.live_stream_title,.live_stream_titel,.chatwindowcollapsedtitle,.howtoplay_block a,.row-data .row-label,100% {
color:#FFF;
}

[twinoakstofu]

those links don't work anymore, people can't just click to use your style.

you could post the code as text, though, and people can use that!

[JojoP11]

Thanks a lot for the information. Yes of course.

[Skulduggery Pleasant]

Hey.
Very nice work. a suggestion if i may,
take this as an example:
when you click on a person's profile, it gives you these options,:
about, reputation, recent activity, XP, etc etc.
in the dark mode, you cant see this unless you hover over them. it would be better if it would be shown than hovering over it to be shown.
Thanks
Hanbal Kashif

[JojoP11]

Thanks a lot , this issue should be fixed now.

[TheKame]

Love it. Very excited to have a clean, dark background. Thanks again.

One feedback from me - The Times New Roman.
Probably a personal thing, but I find it a bit ugly.
Maybe I'm the only one who prefers sleeker "modern" fonts without Serifs like Calibri or Arial?

[JojoP11]

Thank you very much. I will have a look at tihs.