Pink color change

[Diana Monica]

Hi,

So the theme uses this “global” pinkish color (I believe its #fc9285) – you can see it in the MENU button on top, and on ALL the links and even the .svg arrows; it automatically uses this color for all clickable elements.

Can you please tell me where to change it, generally?

It is not in Elementor – Site Settings – Global colors. I changed it there and absolutely nothing happened.

Thanks,
Diana

[Diana Monica]

Dear team, any way of customising this colour?
Pink/Peach is not a very used palette in my opinion, this could be a deal breaker in most cases.

I mean even manually changing all of them is absurd, there are just too many. All titles inherit it, ICONS inherit it, categories, tags, links… everything. Why did you set the elements to inherit it all over if not providing also the option to change it?

[J. Davis]

Hi,

At the moment, the only possibility to change the color is to override styles by applying custom CSS. For example, you may try to apply the styles below:

a:hover, a:focus, a:active, .albatross-button, .mphb-single-room-type-attributes li:before, .mphb-loop-room-type-attributes li:before, .mphb-widget-room-type-attributes li:before, .loop-room-short-attributes li:before, .an_mailchimp_wrapper form .mpam-submit, button:hover, .edit-link .post-edit-link:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, .button:hover, .stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__read-more a:hover, .more-link:hover {
    color: #fc9285;
}

.site-header .header-dropdown-toggle, .front-page-sidebar-wrapper .widget_mphb_search_availability_widget .mphb_widget_search-submit-button-wrapper input:hover {
    background: #fc9285;{
}

.site-header .header-dropdown-toggle.toggled-on{
border: 2px solid #fc9285; {
background: #fc9285;
}

Let me know if it is helpful.

best regards,
J. Davis

[Diana Monica]

This reply has been marked as private.

[Diana Monica]

Hi J. Davis,

Such a shame there isn’t a more efficient option for this change.

In any case, no, the code you gave me is creating visual issues with the MENU BUTTON “X” cross that appears after the menu drops down.
Only some elements changed colour.

These are the issues:

– the code created an issue with the “X” on the drop down menu; multiplied it weirdly.
– all hover elements from header are still pink, like: the social media icons, the menu pages, the Contact us button on the left side of the social media icons: if you hover them, they are pink.
– in the header, the email is pink but it changes color to green when you hover over it.
– the title and price of the rooms from shortcode [mphb_rooms class=”horizontal”] are still pink
– on the book page, the search availability button: your code made the text green, but the button is still pink.. and the text should be white.
– The same happens with the button for the SEND option in the contact form.
– the category boxes for the blog articles, is still pink.

I would appreciate an answer, thank you!

[J. Davis]

Hi,

Thanks for your reply. I’ve adjusted the styles so please place the style below instead of the ones I’ve sent prior:

a:hover, a:focus, a:active, .albatross-button, .mphb-single-room-type-attributes li:before, .mphb-loop-room-type-attributes li:before, .mphb-widget-room-type-attributes li:before, .loop-room-short-attributes li:before, .an_mailchimp_wrapper form .mpam-submit, button:hover, .edit-link .post-edit-link:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, .button:hover, .stratum-advanced-posts.layout-carousel .swiper-container .swiper-slide .stratum-advanced-posts__read-more a:hover, .more-link:hover, a, .main-navigation li:hover > a, .primary-menu-more li.opened > a, .primary-menu-more li.focus > a, .primary-menu-more li:hover > a, .header-menu-container li.opened > a, .header-menu-container li.focus > a, .header-menu-container li:hover > a, .entry-title a:hover, .social-menu a:hover, .mphb_sc_room-wrapper .type-mphb_room_type .mphb-view-details-button, .mphb_sc_search_results-wrapper .type-mphb_room_type .mphb-view-details-button, .mphb_sc_rooms-wrapper .type-mphb_room_type .mphb-view-details-button, .mphb-regular-price, .mphb-single-room-type-attributes a:hover, .mphb-loop-room-type-attributes a:hover, .mphb-widget-room-type-attributes a:hover, .loop-room-short-attributes a:hover, .footer-widgets a:hover {
    color: #67c163;
}

.site-header .header-dropdown-toggle, .front-page-sidebar-wrapper .widget_mphb_search_availability_widget .mphb_widget_search-submit-button-wrapper input:hover, input[type="submit"]:hover, .button:hover, .button:focus {
    background-color: #67c163;
}

input[type="submit"]:hover, .button:hover{
	color:#fff;
}
.site-header .header-dropdown-toggle.toggled-on{
	border: 2px solid #67c163; 

}

You will also need to edit this svg image to change the color and upload it to the same folder:
/wp-content/themes/albatross/images/menu_close.svg You may try to use online SVG editor for this.

best regards,
J. Davis

[Diana Monica]

Hi J. Davis!

Thank you! This worked great!

Perfect code for replacing the pinkish colour with any other. Lovely.

[J. Davis]

Hi Diana,

You are welcome. Do not hesitate to contact us if you have any further questions.

best regards,
J. Davis

[Author]

Posts