Button color

Resolved thunder86
(@thunder86)

1 year ago
Hello,

is there an possibility to change the color of the directorist buttons with additional css code?

My page has black buttons and white font with a hover effect:

I’m using the following hover code for my wp buttons and I would like to have the same style in directorist

/* Button Hover Color * / .wp-block-button.custom-button .wp-block-button__link:hover, .wp-block-button.custom-button .wp-block-button__link:active, .wp-block-button.custom-button .wp-block-button__link:focus { background: #000000 !important; color: #0b8ed0 !important; border-color: transparent !important; } /* End button Hover colors */
- This topic was modified 1 year ago by thunder86.

Viewing 5 replies - 1 through 5 (of 5 total)

rashed848
(@rashed848)

1 year ago

Hello thunder86 !

Thank you for reaching out!

Yes, it is absolutely possible to change the color of the Directorist buttons using additional CSS. Since you mentioned that you’re using black buttons with white font and a specific hover effect on your WordPress buttons, we can help you apply the same styling to the Directorist buttons.

To ensure we provide the most accurate and compatible CSS for your site, could you please share a link to the page where the directory is displayed? This will help us inspect the button classes and provide you with a tailored solution.

Looking forward to your response!

Best regards,

Thread Starter thunder86
(@thunder86)

1 year ago

Thank you for your reply. The directory can be accessed through the following link:
https://surferparadise.de/all-listings/

Thread Starter thunder86
(@thunder86)

1 year ago

Do you see any possibility to change the button color via additional CSS?

https://surferparadise.de/all-listings/

rashed848
(@rashed848)

1 year ago

Hello!

You can use the following CSS,

input[type=”submit”], input[type=”button”], input[type=”reset”], :root .has-accent-background-color, .button, :root .wp-block-file__button, :root .wp-block-button__link, :root .wp-block-search__button, .page-links a:hover, .form-submit #submit, #infinite-handle:hover, .nav-toggle.active .bar, .social-menu a:hover {
background: red !important;
}

.directorist-viewas__item.active {
border-color: red !important;
background-color: red !important;
}

.wp-block-ub-content-toggle-accordion-title-wrap {
background: red !important;
}

Here is a demonstration of identifying the proper selector, https://www.loom.com/share/0dfc65d0f0f740388a205bf1a00cd1c3

Kind Regards.
Thread Starter thunder86
(@thunder86)

1 year ago
Unfortunately your code didn’t work like expected but helped my to modify the code
```
/* Directorist Buttons im Hitchcock Theme Style mit festem Hover-Background */
.atbdp_filter_button,
.atbdp-filter-btn,
.directorist-filter-button,
.atbdp-filter-button,
.atbdp_map_btn,
.atbdp_reg_btn,
.atbdp_grid_view,
.atbdp_list_view,
.directorist-viewas__item,
.directorist-viewas__item a,
.directorist-viewas__item button,
.atbd_button,
.directorist-btn,
.atbd_directorist_btn {
  background-color: #000000 !important;      /* schwarz */
  border: none !important;
  border-radius: 3px !important;
  color: #ffffff !important;                 /* weiß */
  font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.1) !important;
  text-transform: uppercase !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  transition: color 0.3s ease, background-color 0.3s ease !important;
}

/* Hover */
.atbdp_filter_button:hover,
.atbdp-filter-btn:hover,
.directorist-filter-button:hover,
.atbdp-filter-button:hover,
.atbdp_map_btn:hover,
.atbdp_reg_btn:hover,
.atbdp_grid_view:hover,
.atbdp_list_view:hover,
.directorist-viewas__item:hover,
.directorist-viewas__item a:hover,
.directorist-viewas__item button:hover,
.atbd_button:hover,
.directorist-btn:hover,
.atbd_directorist_btn:hover {
  background-color: #000000 !important;      /* Hintergrund bleibt schwarz */
  color: #0b8ed0 !important;                  /* Schrift wird blau */
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Aktive Buttons */
.atbdp_filter_button.active,
.atbdp-f
```
The Only issue left, the Filter Button, View=List, View=Grod and View=Map are not effected by this code
- This reply was modified 1 year ago by thunder86.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Button color’ is closed to new replies.