Free css to give a modern look to Talkyard

Hello,

Here is our complete css to give a modern look to Talkyard (rounded button, shadow, prettier color and much more).

Simply go in the "Look and Feel" tab in the admin section and paste the following (feel free to change the color to match your tastes) :

.esWB_T-Current, .dw-help, .btn-primary, .btn-primary:link, .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav-pills>li>a.active, .nav-pills>li>a.active:focus, .nav-pills>li>a.active:hover, .esScrollBtns_menu, .dw-ar-t>.dw-p-as>.dw-a-reply{
border-radius: 15px !important;
box-shadow: 3px 5px 9px rgb(0 0 0/60% ) !important;
}

.esWB_T-Current, .esWB_T_B, .esScrollBtns_menu, .btn-primary, .btn-primary:link, .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav-pills>li>a.active, .nav-pills>li>a.active:focus, .nav-pills>li>a.active:hover, .dw-ar-t>.dw-p-as>.dw-a-reply, .esWB_LI:hover, .c_AuD_SwitchB{
background-color: #5A14E6 !important;
color: #fff !important;
}

.s_T_ReTo_Prvw_B, .s_RRs_RR_Aw, .dw-rr, .dw-p-by span, .dw-ago-ltr, .s_SR a, .esLegal_home_link, .s_E_DoingWhat a, .s_E_ScrPrvwB:hover, .s_UP_Prefs_ChangePwB, .s_UP_Prefs_ChangeEmailB, .s_UP_Prefs_ChangeUNB, .s_UP_Ab_Stats_Stat_Groups_Group a, .s_UP_Nfs_PfsL a, .dw-p-bd-blk a, .s_UP_Ab_Stats_Stat_Groups a, .s_UP_Act_Ps_P_Link, .c_SchD_X_B, .esForum_topics_openIconsHelp, .esForumIntro_close, .esForumIntro_edit, .icon-cancel, .dw-reset-pswd{
color: #5A14E6 !important;
}

.dw-rr:hover, .btn, .no-lightbox, .modal-body pre, .s_SP div, .s_SP a,.s_SP span,.s_SP li, .Select-control, .s_Expandable_Body, .s_Expandable_Header, .s_SP_QueryTI, .esEdtr_close:hover, .esEdtr_txtBtn, .esEdtr_txtBtns, .s_E_ScrPrvwB, .s_ShareD_Link, .nav>li>a:hover, .dw-sub-nav, .esMedAvtr, .dw-user-bar, .c_SchD_QnB input[type=text], .esPresence:hover:not(.esPresence-strangers), .esScrollBtns_back, .dw-a-clps:hover:hover, .esP_By:not(.s_P_By-Unk):hover, .esP_viewHist:hover, .esWB_CloseB:hover, .esWB_CreateB:hover, .s_F_Ts_T_Con_Ttl, .s_F_Ts_T_Con_Ttl:hover, .dw-a-change, .esWB, .s_F_Ts_T_Con, .esDropModal_content, .esExplDrp_entry, .dropdown-menu a, .icon-reply, .dw-highlighted-multireply-hover, .esWB_LI:hover, .c_AuD_SwitchB, .s_PgSct, .esMetabar, .esForumIntro, #post-0, .dw-cmts-tlbr-open, .form-control{
border-radius: 15px !important;
}

.s_SP_SearchB, .s_UP_Prefs_ChangePwB, .s_UP_Ab_EmPfB, .s_UP_Prefs_ChangeEmailB, .s_UP_Prefs_ChangeUNB, .s_Tb_Ln, .esTB_SearchBtn, .dw-a-tools, .esAvtrName, .esOpenWatchbarBtn, .esOpenPagebarBtn, .esTopbar_ancestors_link, .s_F_Ts_Cat_Ttl, .esWB_T-Current, .esWB_T_B, .esForum_navLink{
box-shadow: none !important;
}

.esWB_LI:hover span{
color: #fff !important;
}

.esForum_catsNav_sort a{
margin-right: 5px;
}

.s_SP_SearchB{
margin-left: 5px;
}

.icon-info-circled:hover, .s_T_ReTo, .esTopbar_ancestors_link, .dw-p-bd, .dw-p-hd, .esWB_T-None:hover{
    background-color: unset !important;
}

.Select-menu-outer div{
color:#000 !important;
background: #fff !important;
}

.btn.n_ExplSel{
    background: #f5f5f5 !important;
    box-shadow: 1px 1px 7px #6b6b6b inset !important;
    color: #2b2b2b !important;
}

.esExplDrp_entry:hover, .esPresence:hover:not(.esPresence-strangers), .Select-menu-outer .Select-option:hover{
background: #f5f5f5 !important;
}


.dw-highlighted-multireply-hover{
outline : rgba(90, 20, 230, 0.15) solid 5px !important;
}

.dw-help{
background-color: #F8F8F8 ;
margin-bottom:15px;
}

.s_Tb_Ln{
color: black !important;
}

#esPageScrollable{
height: unset !important;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .esExplDrp_entry.active{
 background-color: #EAEAEA  !important;
}

.s_F_Ts_Cat_Ttl:hover{
outline-color: unset !important;
    color: unset !important;
    background: none !important;
    outline: none !important;
}

.btn-primary{
border-color:#5A14E6 !important;
}

.esMetabar, .esExplDrp_entry:hover, .esExplDrp_entry.active, .esExplDrp_entry{
border: none !important;
}

.icon-info-circled:hover, .icon-reply:hover, .btn.active:focus, .btn:active:focus, .btn:focus{
outline: none !important;
}

.icon-reply:hover{
background-color: #EAEAEA !important;
color: black !important;
}

.esTopbar_ancestors_link:hover{
color: #5A14E6 !important;
}col

@media (min-width: 1300px){
.dw-forum.container, .esPage>.container {
     margin-top: 0 !important;
}
}

 .esEdtr_txtBtn:hover, .dw-rr:hover, .s_F_Ts_T_Con:hover{
 background-color: rgba(90, 20, 230, 0.1) !important;
outline-color: rgba(90, 20, 230, 0.1) !important;
}

.s_F_Ts_T_Con_Ttl:hover{
background-color: unset !important;
outline-color: rgba(90, 20, 230, 0) !important;
}

.s_F_Ts_T_Con:hover a{
text-decoration: none !important;
}

.dw-t>.dw-p-as .dw-a.dw-a-votes:hover:after, .dw-t>.dw-p-as .dw-a:hover:not(.dw-a-votes):not(.s_PA_B-Disabled):not(.icon-reply), .esDropModal .dw-a.dw-a-votes:hover:after, .esDropModal .dw-a:hover:not(.dw-a-votes):not(.s_PA_B-Disabled){
    color: black !important;
    background-color: #f5f5f5 !important;
    outline: none !important;
   max-height:35px !important;
  border-radius:5px;
}

.esWB_CloseB:hover {
 background: #5A14E6 !important;
color: #fff !important;
padding: 4px 13px 4px 13px !important;
}
.esWB_CreateB:hover{
color: #fff !important;
 box-shadow: 0 0 0 8px #5A14E6 !important;
 background: #5A14E6 !important;

}

.icon-info-circled:hover .dw-a-clps:hover:hover, .esP_By:not(.s_P_By-Unk):hover, .esP_viewHist:hover{
 background: rgba(90, 20, 230, 0.1) !important;
outline: none !important;
}

.esScrollBtns_back, .esScrollBtns_back:hover{
border: none !important;
background-color: #5A14E6 !important;
}

@media (min-width: 1640px){
.c_F_TsL_T_When a{
    color: #5A14E6 !important;
}
}

.Select-value {
 border: unset !important;
border-color: unset !important;
background-color: #f5f5f5 !important;
}

.Select-value-icon{
 border: unset !important;
border-color: unset !important;
}

.dw-forum-intro-show{
text-shadow: none !important;
color: unset!important;
}

.Select-value span{
color:black;
}

.input-group-addon{
background: #fff !important ;
border-radius: 15px 0 0 15px !important;
}

.esCreateUser #e2eUsername{
box-shadow: unset !important;
border-radius:  0 15px 15px 0 !important;
}

.Select-menu-outer a{
background: red !important;
}

.footer_links{
color:#000;
background-color:white;
border-radius: 15px !important;
padding: 5px;
margin: 5px;
}

.icon-info-circled:hover{
color: #f5f5f5 !important;

}

a:visited{
color:unset;
}