By Sean Carney on Monday, 01 October 2018
Posted in General
Replies 4
Likes 0
Views 653
Votes 0
I would like to change the colors for all the elements of the pull down EasySocial notification menus. Are these controlled within EasySocial or within the template or is this something I need css overrides to change?

I would like to be able to change the title, introtext, time posting and the background.

I am hoping I can change all of them at once: Friend Requests, Conversations, Notifications, Search background color, and my profile access options menu.

Thanks, Sean
Hi Sean,

You need to customize css override for these, can you try css below and see (unfortunately all the classes was different where you need to target each dropdown to change the background color):
[setting dropdown]
[gist type="php"]
#es.mod-es.mod-es-toolbar .es-toolbar .es-toolbar-profile, #es.mod-es.mod-es-toolbar .es-toolbar .es-toolbar-dropdown-nav, #es.mod-es.mod-es-toolbar .es-toolbar .es-toolbar-dropdown-nav__item{
background-color: #345c34 !important;
}
[/gist]

[search background]
[gist type="php"]
#es.mod-es.mod-es-toolbar .es-toolbar__search-dropdown, #es.mod-es.mod-es-toolbar .es-toolbar__search .btn-toolbar-search, #es.mod-es.mod-es-toolbar .es-toolbar__search-filter-toggle, #es.mod-es.mod-es-toolbar .es-toolbar__search-input, #es.mod-es.mod-es-toolbar .es-toolbar__item--search {
background-color: #345c34 !important;
}
[/gist]

[notification background]
[gist type="php"]
body #es .es-albums .content-hint, body #es .o-empty, body #es.mod-es-logbox .es-login-box__form, body #es .es-story, body #es.popbox, body #es.popbox-navbar-profile .popbox-dropdown__hd, body #es.popbox-navbar-profile .popbox-dropdown__bd, body #es.popbox-navbar-profile .popbox-dropdown__ft, body #es.popbox-navbar-signin .popbox-dropdown__hd, body #es.popbox-navbar-signin .popbox-dropdown__bd, body #es.popbox-navbar-signin .popbox-dropdown__ft, body #es .popbox-dropdown-signin, body #es .popbox-dropdown, body #es .popbox-dropdown-nav__item.is-unread, body #es .popbox-dropdown-nav__item {
background-color: #345c34;
}
[/gist]

[conversation & friend background]
[gist type="php"]
body #es .es-albums .content-hint, body #es .o-empty, body #es.mod-es-logbox .es-login-box__form, body #es .es-story, body #es.popbox, body #es.popbox-navbar-profile .popbox-dropdown__hd, body #es.popbox-navbar-profile .popbox-dropdown__bd, body #es.popbox-navbar-profile .popbox-dropdown__ft, body #es.popbox-navbar-signin .popbox-dropdown__hd, body #es.popbox-navbar-signin .popbox-dropdown__bd, body #es.popbox-navbar-signin .popbox-dropdown__ft, body #es .popbox-dropdown-signin, body #es .popbox-dropdown, body #es .popbox-dropdown-nav__item.is-unread, body #es .popbox-dropdown-nav__item {
background-color: #345c34;
}

#es .popbox-dropdown__bd {
background-color: #345c34;
}

body.lightmode #es.popbox .o-empty, body.lightmode #es.popbox.popbox--navbar {
background-color: #345c34;
}

#es .popbox-dropdown-nav {
background-color: #345c34;
}
[/gist]

For link color it basically fall back using template link color setting http://take.ms/NXfIZ http://take.ms/B8vhm

For title of the notification you can apply the css below:
[gist type="php"]
body #es .popbox-dropdown-nav__post {
color: 345c34;
}
[/gist]

For time posting you can use the css:
[gist type="php"]
#es .popbox-dropdown-nav__meta-lists {
color: #0372d5;
}
[/gist]

For content of notification you can use example css below:
[gist type="php"]
#es .popbox-dropdown-nav__link {
color: red;
}
[/gist]

Hope this helps
·
Monday, 01 October 2018 12:02
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you very much. That appears to have worked to change all the background colors. I should be able to tweak some additional font colors and a hover color now that you set up the classes for me.

Sean
·
Wednesday, 03 October 2018 02:10
·
0 Likes
·
0 Votes
·
0 Comments
·
Great Sean
·
Wednesday, 03 October 2018 10:17
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post