Return to previous page

How to change the thin grey border color to black.

This topic has 9 replies, 2 voices, and was last updated 1 years, 5 months ago ago by Hanzla Nadeem

  • Avatar: Hanzla Nadeem
    Hanzla Nadeem
    Participant
    January 4, 2024 at 16:39

    I have searched the whole theme option but I cant change the border color. if I go with css, this will took me a lot of time to change color of each border. I want to replace the grey color with black where ever it is regardless of if its border or not. Kindly help.

    Also I have changed the background color of breadcrumbs to #f6e2dc but that doesnot change. Can you please solve that. Thanks

    https://imgur.com/a/YqbCEPA

    #378591 Copied Theme version: 9.2
    8 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 4, 2024 at 17:02

    Hello, Hanzla Nadeem,

    Thank you for reaching out to us with your concerns. We understand that you are looking to change the border color throughout your theme to black and are experiencing difficulties with the breadcrumb background color not updating as expected.

    To assist you with changing the border color, we would recommend using a global CSS rule that targets all borders within your theme. This can be a more efficient approach than modifying each element individually. Here is a sample CSS snippet that you can add to your theme’s custom CSS section:

    * {
border-color: #000 !important; /* This will change all borders to black */
}

    Please note that using !important is a powerful CSS declaration that overrides other styling rules, so it should be used sparingly. Before applying this change, ensure that it does not conflict with any specific design elements that you do not wish to alter.

    Regarding the breadcrumb background color on account, compare and wishlist pages, the next custom CSS code can be used:

    .woocommerce-account .page-heading, .woocommerce-compare .page-heading, .woocommerce-wishlist .page-heading {
    background-color: #f6e2dc !important;
}

    If you require further assistance or if these solutions do not resolve your issues, please do not hesitate to get back to us with additional details. We are here to help ensure that your theme looks exactly as you envision it.

    Best Regards,
    8Theme’s Team

    #378596 Copied
    Avatar: Hanzla Nadeem
    Hanzla Nadeem
    Participant
    January 4, 2024 at 21:57

    Thanks,
    i want to ask that now border color have change to black how ever I want to make the whole border color of this breadcrumb to become black. now, its black till the progress, but I want to make it fully black bordered

    also I want to change the grey color of the text from everywhere to black, such as placeholder, price color etc. this can also be seen in the same image below

    https://imgur.com/a/lrIW0oH

    #378612 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 5, 2024 at 10:53

    Hello, Hanzla Nadeem,

    You’re welcome!

    May we kindly request that you provide us with temporary wp-admin access?

    Best Regards,
    The 8Theme Team

    #378670 Copied
    Avatar: Hanzla Nadeem
    Hanzla Nadeem
    Participant
    January 5, 2024 at 12:07

    Sure Here it is:

    Please contact administrator
    for this information.
    #378690 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 5, 2024 at 14:25

    Hello, Hanzla Nadeem,

    We appreciate your prompt response.

    1/ 

    .cart-checkout-nav a:not(:last-child):after, .cart-checkout-nav a:before {
    border-color: black !important;
}

    2/ 

    .shop_table .amount, #payment .payment_methods label, #shipping_method label, .single_add_to_cart_button~.et-or-wrapper {
    color: black;
}
::placeholder {
    color: black;
    opacity: 1;
}

    Best Regards,
    The 8Theme Team

    #378729 Copied
    Avatar: Hanzla Nadeem
    Hanzla Nadeem
    Participant
    January 5, 2024 at 14:57

    Thanks a lot
    but a little problem is remaining. changing all the border color has also change the border color shown in following image of 1: mobile menu and second: filter toggle menu

    https://imgur.com/a/55DtnPJ

    #378744 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 5, 2024 at 15:37

    Hello, Hanzla Nadeem,

    We would like to inform you that in order to achieve the desired outcome, it is necessary to include the following code snippet:

    .widget-title, .et_b-tabs .et-tab:not(.active) {
    border-color: #e1e1e1 !important;
}

    Should you require any further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    #378759 Copied
    Avatar: Hanzla Nadeem
    Hanzla Nadeem
    Participant
    January 5, 2024 at 15:57

    thanks a lot!!

    #378767 Copied

  • Tagged: , , , ,

  • Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘How to change the thin grey border color to black.’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Handmade Store – WordPress WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Beauty – WooCommerce Theme
lazy-placeholder
Kids Toys Store – WordPress WooCommerce Theme
lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Fishing – WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Architecture Studio – WordPress WooCommerce Theme
lazy-placeholder
Language Courses – WordPress WooCommerce Theme
lazy-placeholder
Baby Shop – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.