Home Forums Basel – Premium Template Color change

This topic contains 18 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 2 months, 2 weeks ago.

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #155159

    giacostudio
    Customer

    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

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #155210

    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

    #156556

    giacostudio
    Customer

    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.
    #156617

    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

    #179353

    giacostudio
    Customer

    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.
    #179380

    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

    #179489

    giacostudio
    Customer

    Hello,

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

    Thanks,
    Giada – Giaco studio

    #179537

    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

    #179559

    giacostudio
    Customer

    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.
    #179561

    giacostudio
    Customer

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

    Attachments:
    You must be logged in to view attached files.
    #179563

    giacostudio
    Customer

    I have to attach only one item at a time.

    Attachments:
    You must be logged in to view attached files.
    #179565

    giacostudio
    Customer

    Last file

    Attachments:
    You must be logged in to view attached files.
    #179719

    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

    #179848

    giacostudio
    Customer

    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.
    #179905

    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

    #179976

    giacostudio
    Customer

    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

    #179984

    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

    #180091

    giacostudio
    Customer

    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

    #180095

    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

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

You must be logged in to reply to this topic.