Page 1 of 2

Dark Theme!

Posted: 01 April 2020, 14:24
by Jeembo
Hi!
I played around in CSS and made a "dark theme" for BGA.
It's a work in progress but I guess it could be helpful!

Feel free to use it:
https://boardgamearena.com/?use_custom_style=85462014

Re: Dark Theme!

Posted: 01 April 2020, 14:42
by Kerley
Good work.. however...

I clicked to have a look and now I don't know how to change back!

Re: Dark Theme!

Posted: 01 April 2020, 15:33
by t_mcpardi
Kerley wrote: 01 April 2020, 14:42 Good work.. however...

I clicked to have a look and now I don't know how to change back!
https://boardgamearena.com/?use_custom_style=0

Re: Dark Theme!

Posted: 02 April 2020, 18:24
by Sweaty Butcher
Thanks for this OP. I followed the link and really liked the theme, but I wasn't able to save it. Could you please share the CSS? Thank you!

Re: Dark Theme!

Posted: 04 April 2020, 20:28
by Froskur
I really like your Dark Theme, but I am having a hard time figuring out how to make it stick permanently. BGA tells you to share the URL, but how does that help?

Re: Dark Theme!

Posted: 06 April 2020, 21:32
by agentcobra
Sweaty Butcher wrote: 02 April 2020, 18:24Could you please share the CSS? Thank you!

Code: Select all

html,body {
background:url(https://cnet1.cbsistatic.com/img/pecM5xCV-zw0mXTSlBwpAbYuPLw=/2018/06/07/78e06ce4-81e0-4b35-992f-6a2b3585b931/mojave-night.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

h1 {
color:#4268A8!important;
}

a:link,a:visited,a:hover,a:active {
color:#FFF;
font-weight:700;
}

#current_table_banner,#async_table_banner {
background-color:rgba(200,0,0,0.6);
}

.pageheader_big_switch {
background:#979db0!important;
background-color:#979db0!important;
}

#server_status_warning_message {
color:#fff;
background-color:rgba(255,111,0,0.6);
}

.roundedbox,.log,.chatlog,.ownchatlog,.roundedboxinner,.sameauthor,.chatlog {
color:#000;
}

.pageheader_menuitem,.pageheader_menuitemselected {
background-color:#1C1C1C!important;
background:#1C1C1C!important;
color:#FFF;
}

#page-title {
background-color:#494949!important;
}

#login-menu span,#mobile_myprofile span,#mobile_preference-menu-item span,#mobile_doc-menu-item span,#mobile_disconnect_button span,#player_name,#dijit__MasterTooltip_0 span,div [id^=table_expected_banner] span,#time_to_think_descr,#game_result_label,div [id^=postmessage_f_] span,div [id^=postmessage_commentcontent] {
color:#1C1C1C;
}

.roundedbox,.gametable,.game_suggestion,#suggestion_carousel,#game_wannaplay_add_dropdown {
background-color:#494949;
color:#fff;
}

a.bgabutton_gray,.button_gray,.replay_last_move_button,#use_time_joker,#cantstartgame,#quit_game,#invite_friend,#addToFriend,#unregister_tournament,.bgabutton_large,.display_cannot_join,.display_inline,.buybuttonlink,#buygame,#reviewgame,#playersaroundtable_startchat,#invite_to_groupe_toggle,#show_more_filters,.diceactions,#estimated_duration_wrap,#creationtime,#tournament_link,#pageheader,#pageheaderlobby,#reviewgame,.pageheader,.newbgatable,#player-module,a[id^=playersaroundtable_startvideochat_table_],a[id^=playersaroundtable_startaudiochat_table_],a[id^=add_to_my_game_],#start_game_refuse,#updateProfileInfos_btn,#pagesection_prestige a,#pagesection_lastresults a,#seefriends,#pagesection_groups a,#limit_table_access a {
color:#fff;
border-color:#fff;
}

#join_cancel,#infirm_btn_1 span,#infirm_btn_1,#cancel_button,a[id^=expected_refuse_],#fireplayer_cancel {
color:#1c1c1c;
border-color:#1c1c1c;
}

#game_in_progress_stats td,#game_in_progress_stats th,a,#pageheader_gameresult,#pageheader_gameview,#pageheader_gameview,#pageheader_buy,#time_to_think_descr,div [id^=postmessage_a],#round_count,#deck_count_nbr,#diceboard {
color:#fff;
}

h2,h3,h4,h5,h6,p,h3 a,#pagemaintitletext,#gameaction_status {
color:#FFF!important;
}

#playwithfriend_link,#favorite_see_all_tables_label,#newsfeed span.gamename,div [id^=table_expected_banner] span {
color:#4268A8;
}

a.gametablelink,.chatwindowcollapsed {
background-color:#494949;
}

.activep_layer,.whiteblock,#topbar,#wannaplay_title,#main-content h3,#overall-content h3,#pagesection_howtoplay h2 {
background:#494949;
}

.chatwindowlogs_zone,.player-board {
background:#979db0;
}

.roundedbox,#current_table_banner span,#async_table_banner span,.date_to_format,.postdate,#joinGameDialog span,#async_table_banner a,#wannaplay_title,#wannaplay_title span,#mobile-menu-icon-button i,#menu_label,#reflexiontime_value,#its_your_turn,#tournamentfullname,#main-content h3,#overall-content h3,#pagesection_howtoplay span {
color:#FFF;
}

.login-menu-item,.displaysize,.notselected,.sortby,.selected,.standard_popin_title,#popin_playVideoDialog_title {
color:#000!important;
}

div [id^=tournament_],.pageheader,#pageheader_lobbymenunav,#lobby_invite_friend_zone,#page-title {
background-color:#1C1C1C;
}

.pagesection,#bga_statistics,#follow_us_portlet,.tips,#pageheader_realtime,#pageheader_async,#pageheader_inprogress {
background-color:#1c1c1c;
color:#fff;
}

Re: Dark Theme!

Posted: 15 April 2020, 10:11
by harmonius
Pas mal du tout !
Je voulais me faire un thème également mais mes modifications ne semble jamais prisent en compte. J'ai essayé avec ton code et il n'ai pas pris en compte. :?

Quand je prend le lien vers un css custom ça marche et je retrouve le code dans mes paramètres. Mais dés que je change un paramètre et fait enregistrer tout disparaît. :roll:

Une idée de ce que je fais mal ?

English version:
Not bad at all !
I wanted to a style myself but my modification are never taken into account. I tried to use your code but it does not work either. :?

When I use a link to a custom css it works fine. And I find the code in my settings. But as soon as I modify some value it gets ignored again. :roll:

Any idea of what I may be doing wrong ?

Re: Dark Theme!

Posted: 15 April 2020, 10:12
by VinceDuGG
Thanks for sharing. I try to modify my CSS. For example with a simple :

Code: Select all

html {
color:red;
}
But when I save it does not apply and basically write my css rule on top of the #topbar ! On sourcecode my css rule appears in plain text, without style tags, like this :

Code: Select all

<link rel="stylesheet" type="text/css" href="https://x.boardgamearena.net/data/themereleases/current/css/libraries.css?1"/>

html {
color:red;
}

<link rel="apple-touch-icon" sizes="57x57" href="https://x.boardgamearena.net/data/themereleases/200316-1631/img/favicon/apple-icon-57x57.png" />
I already to add manually the style tags around my CSS rules but they are not interpreted.
Any idea of how to make it work ?

Re: Dark Theme!

Posted: 15 April 2020, 10:16
by harmonius
:lol: Same time, same problem !

Re: Dark Theme!

Posted: 15 April 2020, 10:20
by VinceDuGG
Héhé, tout à fait :)

Found it, we have to use the custom css URL of our profile to see modifications applied !
https://boardgamearena.com/?use_custom_style=123456789