Help with CSS Code to change color of Elementor section

[cdhimit]

Hi

Anyone care to share a CSS code snippet of the Elementor section (screenshot below) on the Home Page by inspecting the browser console ?

1. Grid background color from white to dark grey (#252525)
2. Title text & count text from black to grey (#888888)
3. On hover for Title text from blue to orange (#ff6e3d)

Site link

Thanks in Advance

[PaulOB]

Those elementor endless nested divs are a nightmare to work out.

I would have thought that you had control of the colours from some sort of control panel but I don’t use those systems.

From a CSS point of view you can change the colours with the following code but it does rely on the fact that those class names are not randomly generated every time it runs.

Add his code after all of your other code. It must be last in sequence.

/* background*/
.elementor-1216 .elementor-element.elementor-element-ede2d96:not(.elementor-motion-effects-element-type-background) {
    background-color: #252525;
}
/* border-color*/
.elementor-1216 .elementor-element.elementor-element-ede2d96{
    border-color:#252525;
}
/*title*/
.elementor-1216 .elementor-element.elementor-element-df7f91f .item-value, .elementor-1216 .elementor-element.elementor-element-df7f91f .item-value a {
    /* was color: #222222;*/
    color:#888;
}
/* hover color is here */
.elementor-1216 .elementor-element.elementor-element-ede2d96:hover .elementor-widget-jvbpd-module-meta.term-name .item-value a {
    color: #ff6e3d;
}

/* the item number (X items) */
.elementor-1216 .elementor-element.elementor-element-71e0edd .item-value {
    color: #888;
}
.elementor-1216 .elementor-element.elementor-element-71e0edd .item-label {
    color: #888;
}

With that code in place you will get this effect.

[cdhimit]

Hi Paul

Thanks for taking the initiative to look into my issue.

I’m using a Wordpress Template with Elementor Page Builder for the Project.

The Custom CSS code is added at either of 2x settings from the Wordpress Dashboard:

1. Theme Settings | https://prnt.sc/yYOvx3UKiJ_V
2. Appearance > Customize | https://prnt.sc/RpuSuW_wM6yY

It’s recommended to add the custom CSS code under Theme settings (#1).

Unfortunately, I’m not seeing the results on the front end even after clearing browser cache ?

Screenshot

I have full confidence in the code since you’ve proved that it works judging by the screenshot.

This is really strange as all other Custom CSS code snippets works fine ?!

Rgds

[PaulOB]

I can see the CSS code that has been inserted in the head so it’s likely a specificity issue with where wordpress is placing the code,

I don’t generally advocate this but try adding !important to the rules to see if this was indeed the issue.

/* background */
.elementor-1216 .elementor-element.elementor-element-ede2d96:not(.elementor-motion-effects-element-type-background) {
    background-color: #252525!important;
}
/* border-color*/
.elementor-1216 .elementor-element.elementor-element-ede2d96{
    border-color:#252525!important;
}
/*title*/
.elementor-1216 .elementor-element.elementor-element-df7f91f .item-value, .elementor-1216 .elementor-element.elementor-element-df7f91f .item-value a {
    /* was color: #222222;*/
    color:#888!important;
}
/* hover color is here */
.elementor-1216 .elementor-element.elementor-element-ede2d96:hover .elementor-widget-jvbpd-module-meta.term-name .item-value a {
    color: #ff6e3d!important;
}

/* the item number (X items) */
.elementor-1216 .elementor-element.elementor-element-71e0edd .item-value {
    color: #888!important;
}
.elementor-1216 .elementor-element.elementor-element-71e0edd .item-label {
    color: #888!important;
}

[cdhimit]

Issue fixed.

The code works like a charm !!

Screenshot

Thanks !!

[cdhimit]

Hi Paul

Sorry for being a nuisance.

I have another request for a Custom CSS code, if you don’t mind.

On ‘Listing Page’ of the site, there’s a ‘Drop down’ filter on the Left SideBar Filter with the title ‘Hotel Chain’

The text colour in the ‘drop down’ list is almost invisible to the eye. Unfortunately, the Elementor section has no option to change the colors.

Can you formulate a Custom CSS code to change:

1. B/G color from white to dark grey (#252525)
2. Text color to grey (#888888)

The custom colors of the drop down list will make it consistent with site corporate color.

Listing Page

Cheers !

[PaulOB]

Try something like this although I have again used !important because I don’t know where these styles will end up

.selectize-dropdown *,
.selectize-input,
.selectize-input>input,
.selectize-input>input::placeholder,
.elementor-593 .elementor-element.elementor-element-e335a49 .selectize-input .item {
    color: #888!important;
    background:#252525!important;
}
.selectize-dropdown{
    border-color:#888!important;
}
.selectize-dropdown .option:hover{
    background:#000!important;
    cursor:pointer;
}

[cdhimit]

You nailed it, absolutely spot on !!

Thanks !

[cdhimit]

Hi Paul

On the Left Sidebar Filters, there’s a ‘toggle arrow’ which opens & closes the filter. The arrow color is clashing with the b/g color.

Do mind sharing the custom css code to change the arrow color to white ?

Rgds

[PaulOB]

This should do it.

.elementor-593 .elementor-element.elementor-element-e335a49 .jvbpd_map_list_sidebar_wrap .panel-heading::after {
    color: white;
}

If it doesn’t show then add !important again.

You probably also need to move the text away from the scrollbar in those sections.

.chk-wrap .count-badge {
    margin-right:10px;
}

I’m not sure why your little scrollbars are showing when they don’t need to.

[cdhimit]

@PaulOB

.chk-wrap .count-badge {
    margin-right:10px;
}

Thanks again Paul.