Changing the styling of the frontend

[IgorA100]

When changing the visual design of the frontend, I ran into a global styling problem
Styles are not set with the help of additional classes, but in fact the styles of the bootstrap are written. From this somewhere it is difficult to change the CSS style, but somewhere it is not possible at all.
It would be really, really cool if there were a lot more classes and id's for custom styling.

[yuri]

Please take some time learning the system. It's too much of requests in a short period of time. Espo exists for almost 10 years, it's about million of lines of code with all extensions we are to maintain. Vague requests like this unlikely to be taken into account.

[IgorA100]

My apologies, Yuri.

[yuri]

Bootstrap is severely customized, a little of it left. There's no problem to assign styles with CSS selectors, we have differently looking themes, it's not bootstrap but our CSS that makes them looking differently.

Use LESS pre-processor, it will be much easier with it. Using IDs for the sake of easier styling is a bad practice. Think of when you will need to have 2 the same elements on the page.

[IgorA100]

I re-read the documentation again, but I could not find something new for myself
As an example, I wanted to color "Status" in tasks, i.e. highlight "Not Started", but I don't understand how styles can implement this, how to separate the style for "Not Started" from "Started"

Change the coloring of the "Email" list (apply to the entire row of the table) I did it this way:

div[data-scope=Email] tr:has(a.text-bold) {
font-weight: 900
}
div[data-scope=Email] a.text-bold {
font-weight: 900
}
div[data-scope=Email] tr:has(a.text-warning ) {
color: #c03c39;
background color: ghost white
}
div[data-scope=Email] a.text-warning {
color: #c03c39;
background color: ghost white
}

But, in this case, I'm again hard-wired to the Bootstrap classes ("text-bold" & "text-warning") in the styles, which IMHO is quite bad.
I am by no means against Bootstrap, it has a lot of useful things.

Once again I apologize if I wrote nonsense..

[yuri]

Styles for enum fields are configured at Administration > Entity Manager > Task > fields > Status.

[yuri]

> Styles are not set with the help of additional classes,

The system is quite configurable from admin UI. It could not be possible to have separate styles for all values that are configurable, not pre-defined. That's why I tell to learn it first, and abstain from giving advises how it should have been built.

Please check modern web sites, e.g. GitHub. They use styling classes (like text-bold). It's just cost effective for development.

I'm leaving the topic.

[IgorA100]

Yuriy, I've made it pretty clear that "quite bad" refers to my styling efforts, not EspoCRM development!
"I'm again hard-wired to" ..... "which IMHO is quite bad"
Is not it?
I wanted to colorize an ENTIRE LINE from the list, and for the "Email" list I managed to do it (I attached a screenshot, I apologize for not attaching it earlier), but I can't implement a similar action for the "Tasks" list.

I really like your Espo and in no way say anything bad about it and treat all its developers with great respect!

[yuri]

No problem, sorry, I might misunderstood, I'm dealing with quite many tasks through a day, it often happens to me.

The points I mentioned above concerts status/enum fields. Regarding emails it's bit another problem. There are limitation in styling. It's not possible to style entire line based on read/unread/important with CSS only. But I'm Ok with it, there will be always such limitations in any web app. It was not our goal it make everything stylable. Styling with generic style-classes is very convenient for development and maintaining.

[IgorA100]

Yuri, no problem. I understand. Plus my "clumsy" English

[esforim]

There is a couple of theme made by other forum user, may I ask why don't you start with that and see how they modified theirs and either change to a new color scheme that fit you or see how they did it and adopt it to your.

I think the Hub theme is very different vs original. The dark theme by Dubas is what I like as the color scheme, but it stuck with the original look (I think).

[IgorA100]

I studied all the available themes (including the theme by Dubas), but I did not find anything unique and new for me in them, except for changing the color schemes.
Probably, I'm used to changing styles in CMS and therefore I have a desire to significantly change the style in CRM . I understand that these are my whims, but if such an opportunity appears in Espo, then it would be very cool! On the other hand, it is not so critical at the moment.

[esforim]

That sound good! Hope to see some of your style/theme in the future!

There is not much of a tutorial around this topic as far as I know of, all I know it is based on Bootscrap (HTML/CSS: Bootstrap https://getbootstrap.com/)

But from Yuri post, it seem it is a heavy modified though so I might remove this wording from the unofficial wiki: https://github.com/o-data/EspoCRM-Le...ign/wiki/Home/

Interestingly shalmaxb recently playing with CSS, perhaps you can join force with him to break down learning experience.

[apn]

hey there, did you found a solution?
otherwise yuri already gave you a hint.
go to Administration-Entity Manager-Task-Fields-Status
and change the style for the important values (screenshot 1), so they get some css classes.
then you can use has() again, plus the theme color, so nothing is hardcoded.
something like

 div[data-scope=Task] tr:has(.text-warning) {
  background-color: var(--state-warning-bg);
}

finally dont forget for firefox to activate has()
go to about:config and toggle layout.css.has-selector.enabled

but if you not care so much about coloring the whole row, and its enough to color the status background (screenshot 2)
then go back to Administration-Entity Manager-Task-Fields-Status and check Display als Label.