Home › Forums › Basel support forum › Color change

Color change

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • November 6, 2019 at 1:19 pm #155159

    giacostudio
    Participant

    Hello,

    I would like to change the light grey color background in the Woocommerce pages (such as in the top bar and tabs of the product page and in other pages – screenshots in attach). Furthermore, I would like to change the black color in the top bar of the Cart widget (picture in attach).

    Is it possible?

    Thanks,
    Giada – Giaco studio

    Attachments:
    You must be logged in to view attached files.
    November 6, 2019 at 3:02 pm #155210

    Elise Noromit
    Member

    Hello,

    Thank you very much for choosing our theme and for contacting us.

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .single-breadcrumbs-wrapper {
    background: red;
}
body .single-product-content .product-tabs-wrapper {
    background-color: yellow;
}

    In order to change the border in the FAQ block, you will need to change the color or the column border https://prnt.sc/ptaamv

    Code for the shopping cart sidebar: 

    body .cart-widget-side .widget-heading{
      background-color: green;
}

    Code for the checkout page: 

    body .woocommerce-checkout .checkout-order-review {
    background-color: blue;
    background-image: none;
}

    Best Regards

    November 12, 2019 at 2:42 pm #156556

    giacostudio
    Participant

    Hello,

    thanks for your answer but the code for the checkout-order-review doesn’t work, the color is still light grey.

    I’d like to change also other things:
    – change the color in the compare page (1)
    – change the color in the product page category label (2)
    – move the 4th tab to the second place like in the 3th screenshot in attach

    Thanks in advance for your help.

    Regard,
    Giada – Giaco studio

    Attachments:
    You must be logged in to view attached files.
    November 12, 2019 at 9:52 pm #156617

    Elise Noromit
    Member

    Hello,

    As soon as your site is on the live host I will be able to check the code for the checkout and correct. Now I check it in my side and it works https://prnt.sc/pw3pl8

    Please add this code to change the color on the compare page: 

    body .basel-compare-row:nth-child(even) .basel-compare-col{
    background-color: red;
}

    Here is the code for Categories: 

    body .product-design-alt .product_meta {
    background-color: red;
}

    It is not possible to move the tabs with CSS, you will have to find a plugin or customize.

    Best Regards

    March 11, 2020 at 4:52 pm #179353

    giacostudio
    Participant

    Hi,
    I need to change other element’s colors. I changed some using Google Chrome to identify the CSS code but for some I couldn’t.
    In attachment the screenshots:
    Quick view 1 – I changed the color of the black button but I don’t know how to change it in the hover. I also would like to change the color of the black product title.
    Quick view – I would like to change the color of the black “Quick view” label.
    Checkout page – I would like to change the color of the light grey background.
    Icona ricerca (Search icon) – I would like to change the color of the icon.

    Regards,
    Giada – Giaco studio

    Attachments:
    You must be logged in to view attached files.
    March 11, 2020 at 7:29 pm #179380

    Elise Noromit
    Member

    Hello,

    All the colors are set in the Theme Settings > Styles and colors. If you need to change a few elements then we can provide custom CSS.

    Best Regards

    March 12, 2020 at 9:14 am #179489

    giacostudio
    Participant

    Hello,

    I was asking for the custom CCS because those elements can not be changed with che Theme settings.

    Thanks,
    Giada – Giaco studio

    March 12, 2020 at 11:38 am #179537

    Elise Noromit
    Member

    Hello,

    You can change the font by means of Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

    Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

    Best Regards

    March 12, 2020 at 1:00 pm #179559

    giacostudio
    Participant

    I think the last answer wasn’t for me because I didn’t ask support to change any font.
    I need you to give me the custom CSS in order to change the color of the elements in the attachment files.
    4 FILES:
    Quick view 1 – I changed the color of the black button but I don’t know how to change it in the hover. I also would like to change the color of the black product title. I changed it in the product page but it doesn’t change in the “Quick view”.
    Quick view 2 – I would like to change the background color of the “Quick view” label.
    Checkout page – I would like to change the color of the light grey background.
    Search icon – I would like to change the color of the icon.

    Thanks,
    Giada

    Attachments:
    You must be logged in to view attached files.
    March 12, 2020 at 1:02 pm #179561

    giacostudio
    Participant

    I’ having problems with the attachments file.
    Below the other 3.

    Attachments:
    You must be logged in to view attached files.
    March 12, 2020 at 1:03 pm #179563

    giacostudio
    Participant

    I have to attach only one item at a time.

    Attachments:
    You must be logged in to view attached files.
    March 12, 2020 at 1:04 pm #179565

    giacostudio
    Participant

    Last file

    Attachments:
    You must be logged in to view attached files.
    March 13, 2020 at 9:00 am #179719

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    1. Quick view

    body .popup-quick-view .view-details-btn:hover {
	background-color: red;
}

    2 Tooltip

    body .basel-buttons .quick-view>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .quick-view>a:hover .basel-tooltip-label:before{
	color: red;
}

    3. Checkout 

    .woocommerce-checkout .checkout-order-review {
    background-color: white;
    background-image: none;
}

    4. Title in the quick view: 

    .popup-quick-view .entry-summary .entry-title {
    color: red;
}

    The icon you show does not relate to our theme, I will be able to change it as soon as our site is live.

    Best Regards

    March 13, 2020 at 6:13 pm #179848

    giacostudio
    Participant

    Thanks for the CSS custom codes.
    Can you please tell me how to change the color of the “Add to wishlist” tooltip (Screenshot in attach)
    I haven’t received the custom CSS regarding changing the background color of the Coupon section in the Checkout page (I sent the screenshot in the previous message “Check out page 3”).

    Regards,
    Giada

    Attachments:
    You must be logged in to view attached files.
    March 14, 2020 at 8:46 am #179905

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label:before{
	color: red;
}

.woocommerce-checkout .checkout_coupon, .woocommerce-checkout .login.hidden-form {
    background-color: white;
}

    Best Regards

    March 14, 2020 at 4:46 pm #179976

    giacostudio
    Participant

    Hi,
    I add the custom CSS codes you sent me but the color of the Wishlist label tooltip doens’t change.
    Do you have any suggest?
    Regards,
    Giada

    March 14, 2020 at 6:10 pm #179984

    Elise Noromit
    Member

    Hello,

    Try to replace the color with this one.

    body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label:before{
	background-color: red;
}

    Best Regards

    March 15, 2020 at 5:38 pm #180091

    giacostudio
    Participant

    Hello,

    also these codes don’t work. Can you please help me with another custom CSS?

    Regarding changing the color of the Search icon, you wrote me:
    “The icon you show does not relate to our theme, I will be able to change it as soon as our site is live.”
    The icon is the Basel DEMO and if you need I can give you the credentials to enter to my staging area because the website is under construction.

    Regards,
    Giada

    March 15, 2020 at 6:00 pm #180095

    Elise Noromit
    Member

    Hello,

    Try once more https://prnt.sc/rgr8b4 

    body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label {
	background-color: red;
}
body .basel-buttons .basel-wishlist-btn>a:hover .basel-tooltip-label:before{
background-color:	red;
}

.woocommerce-checkout .checkout_coupon, .woocommerce-checkout .login.hidden-form {
    background-color: white;
}

    Clean your cache.

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)