Suggestions. Custom CSS, Navbar improvements and more.

[mkz212]

Hi. One of the best, if not the best CRM. I can see a lot of possibilities. But I have some suggestions:

1. Custom CSS. As field in Administration / Interface or custom.css file.
2. Some CSS tweaks to dark theme (see below).
3. Administration / Interface / Cart list - Add option to add to main menu: Action history, Administration, Logout (maybe even with avatar and username).
4. Possibility to choose which field should be unique (e.g. to prevent creation another contact with the same phone number) and the ability to choose from which field the name should be generated (e.g. instead of the name and surname to generate it from the phone number).
5. Option to reorder photos (E.G. in Real Estate).
6. Option to change upload folder for Real Estate photos (and make it public) and select sizes of uploaded files.
7. Navbar on mobile view. Posibility to set sticky to top. Change order: move search to top, then right menu, then main menu on bottom. Move Hamburger menu to the right.
8. In the list view - Display in first row Name on the left and + on the right (in the same row, also on mobile view), in second row search bar (only search bar), and in last row on the left: Filter (all, only mine etc.), add filter (three dots icon), and reset filter (x icon) and display option (list, kanban) on the right.
9. Address Format - Division of the street field - into street and number.
10. Action History - It shows something else when you enter through the right menu (here it displays less) and something else when you go through the administration.
11. Merge action history and login history. And display login history only to admin (all) and one user (only his own login history)
12. Meetings - address field and map.
13. Possibility to edit default quick filter list (eg. remove planned, today etc. in Meetings).
14. Maps without API key or options to chose: Google Maps Api, Google Maps without Api, Apple Maps.

If You want custom css, in html/main.html add:

<link rel="stylesheet" type="text/css" href="client/custom.css">

and create custom.css in client folder





Dark Theme css:

:root {
--body-bg: #151515 !important;
--navbar-bg: #151515 !important;
--panel-bg: #222222 !important;
--panel-default-bg: #222222 !important;
--navbar-inverse-bg: #222222 !important;
--navbar-inverse-toggle-hover-bg: #222222 !important;
--btn-default-bg: #222222 !important;
--btn-default-border: #222222 !important;
--input-bg: #333333 !important;
--input-border: #333333 !important;
--default-heading-bg-color: #444444 !important;
--state-warning-bg: #444444 !important;
--link-color: #0094ff !important;
--link-hover-color: #0094ff !important;
--state-warning-text: #eeeeee !important;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}

.button-container {
padding: 0 0 20px;
}

.stick-sub.button-container {
padding-bottom: 20px;
}

list>.table .dropdown-menu {
position: absolute;
}

a:hover {
text-decoration: none;
}

.panel, .well, .btn, .selectize-input, .form-control {
border-radius: 0;
}

.panel-heading {
padding: 14px;
}

.panel {
padding-bottom: 10px;
}

And if You want sticky header on mobile:

@media screen and (max-width:767px) {
#header {
z-index: 999;
position: fixed;
top: 0px;
}

body[data-navbar=side]>header+.content {
margin-top: 50px;
padding-top: 0px;
}

body[data-navbar=side] .stick-sub {
margin-top: 39px;
padding: 15px;
}

}

If You want hamburger menu on the right:

@media screen and (max-width:767px) {
#navbar .navbar .navbar-toggle {
position: fixed;
right: 0px;
top: 0px;
z-index: 999;
}

.notifications-button {
    right: 30px;
}​

body[data-navbar=side] #navbar .navbar-header a.navbar-brand {
margin-left:10px;
}
}​

[shalmaxb]

For custom css look here: https://docs.espocrm.com/development/custom-css/

[ChrisSka83]

Hello,

I have added the above CSS code for the sticky menu and the hamburger menu on my end.

So far it works.

But when I click on the menu and it is larger than my display, so I can not scroll down further. Only the menu + the search field is displayed. I can't scroll down to get to the admin menu.
Let alone if the last menu item has a submenu.
I tried this on the desktop with a smaller window.
It only shows me the menu, but I can see the scroll bar moving down. But the menu stays stubbornly. How can this be solved?

I used to have this mobile menu with 2 columns. No idea why it is not like that now. At least that would make it better. Does anyone know how to enable the 2 columns again?

[yuri]

> border-radius: 0;

We just added border radius recently. No way we remove it, we love it.

> --body-bg: #151515 !important;

I love colors of the dark theme. It was long way to choose right ones. One can create their own theme with custom colors.

> list>.table .dropdown-menu {
> position: absolute;
> }

This might cause issues is some places as far as I remember.

> a:hover {
> text-decoration: none;
> }

I don't agree that this would be better. Especially for links that have non-blue color.

> .stick-sub.button-container {
> padding-bottom: 20px;
> }

I might add 10px.

> Possibility to choose which field should be unique (e.g. to prevent creation another contact with the same phone number) and the ability to choose from which field the name should be generated (e.g. instead of the name and surname to generate it from the phone number).

Both can be achieved with API formula script.


> Action History - It shows something else when you enter through the right menu (here it displays less) and something else when you go through the administration.

Former -- actions of the current user, usually to go back to records you have seen recently and forgot which exectly. Latter -- actions of users, usually to find out who did something bad.


> Possibility to edit default quick filter list

Currently you can only add custom (with advanced pack).

[ChrisSka83]

Was unfortunately not quite the answer as expected.

But I do not understand espoCRM sometimes at all. Once I get on the smartphone a one-column menu and today again 2 columns. But have not changed anything in this regard. This is exactly how I wanted it, only I do not know how it always stays. With me it changes constantly and I do not know why.

[yuri]

That was my answer on issues described in the topic. It's a feature request section.

[yuri]

> Once I get on the smartphone a one-column menu and today again 2 columns

It depends on screen width. If will break to N columns if it can accommodate N columns. I'd recommend to get accustomed to the vanilla version and don't bother with such customizations. The chance that you will break something (and won't notice it) is big. Then we receive false bug reports.

[ChrisSka83]

Sorry, then I misinterpreted your post.