Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3208564
colors
Closed

Comments

  • KerriDPraiano started the conversation
    January 16, 2023 at 10:08am

    Hi...hope you don't mind but I have several issues with color customization.

    (1) Homepage: Mc4wp form - I want to change the label colors to #feefeb

    (2) Mini Cart page - change color of "view cart" button and put space between GPay and "view cart"

    (3) Cart page - change color of woocommerce messages at the top

                             - change color of dropdown selector for shipping address. (where you calculate shipping)..cant read it! Its ok when you actually click on it.

                              - change color of "coupon code" label

    I have tried going into developers tools to find correct code to change them but it's just not working

    Many thanks

    Kerri

  •  2,660
    PenciDesign replied
    January 16, 2023 at 12:24pm

    Hi,

    1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .mc4wp-form input[type="text"],
    .mc4wp-form input[type="email"],
    .mc4wp-form input[type="number"],
    .mc4wp-form input[type="date"] {
      color: #feefeb;
    }

    2. Please go to Appearance > Customize > WooCommerce > Colors: change all the WooCommerce colors in this section.

    Regards,
    PenciDesign.


  • KerriDPraiano replied
    January 17, 2023 at 2:38am

    Thanks for your reply....appreciate it 

    The code you suggested for #1 only changes the color of the input text. I want to change the color of the form labels.

    I have managed to change the color of view cart...I'm giving up on the gap between it and GPay.

    I still need help with the colors of the "calculate shipping" dropdown please.

    Many thanks

    Kerri

  •  2,660
    PenciDesign replied
    January 17, 2023 at 8:08am

    Hi,

    1. Please add the following CSS code to your site:

    .mc4wp-form label {
        color: #000;
    }

    2. Here is a CSS code of the Calculate Shipping area:

    .woocommerce-cart .cart-collaterals .cart_totals table .shipping-calculator-form input[type="text"],
    .woocommerce-cart .cart-collaterals .cart_totals table .shipping-calculator-form input[type="date"],
    .woocommerce-cart .cart-collaterals .cart_totals table .shipping-calculator-form input[type="number"],
    .woocommerce-cart .cart-collaterals .cart_totals table .shipping-calculator-form input[type="search"] {
        color: #fff;
        border-color: #fff;
    }

    Regards,
    PenciDesign.




  • KerriDPraiano replied
    January 30, 2023 at 10:23am

    Thanks for your reply...neither of those solutions worked but I did find a work around for #1. #2 I've given up on.

    I would like some help with something else if that is ok?

    The background-color of the slick-slider prev/next arrows on my product page are only covering half the arrow. If I delete the code "top:50%" in developers tools it fixes itself but I can't get that to work in custom CSS. Do you have a solution please?


    Regards

    Kerri

    Attached files:  Screenshot (42).png

  •  2,660
    PenciDesign replied
    January 30, 2023 at 3:13pm

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .slick-slider .slick-arrow {
        min-height: 60px;
    }

    Regards,
    PenciDesign.



  • KerriDPraiano replied
    January 31, 2023 at 7:13am

    Awesome...thank you so much!!! I really appreciate you helping me.

    I have another couple of issues on that same page if thats ok?

    #1: If you can see on one of the attachments...I cant read the text for the variation buttons. I can either change the button background (I have already done this by both the plugin settings and customization but something is overriding this) or I can change the font color...can you suggest something please?

    #2: I cant read the font on the "select options" table. The images are obscured too but I think that's because I have 3 attributes and just not enough space. Once again... either the background color or font color needs to be changed.

    Many thanks

    Kerri

    Attached files:  Screenshot (43).png
      Screenshot (45).png

  •  2,660
    PenciDesign replied
    January 31, 2023 at 8:38am

    Hi,

    1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .variations_form ul.jquery-grid-picker-widget li.jquery-grid-picker-item a {
        background-color: #fff;
    }

    2. Add the CSS code below to change the quick shop form:

    .quick-shop-shown .quick-shop-wrapper {
        background-color: #000;
    }

    Regards,
    PenciDesign.




  • KerriDPraiano replied
    January 31, 2023 at 11:06pm

    Hi again...thanks for your reply.

    #1: this doesn't work - something must be overriding it. Is there something else I can try please?

    #2: this worked but I have now removed this feature...dont think I need it

    Many thanks

    Kerri

  •  2,660
    PenciDesign replied
    February 1, 2023 at 1:02am

    Hi,

    Please modify the CSS code like this:

    .variations_form ul.jquery-grid-picker-widget li.jquery-grid-picker-item a {
    background-color: #fff !important;
}

    Regards,
    PenciDesign.


  • KerriDPraiano replied
    February 2, 2023 at 1:29pm

    Thank you...that worked!!

    Could I ask a question re mega menus:

    I want mine to look like your demo one (See attachment) but mine looks like this (see attachment 2).

    How do I get a gap between the images. The labels both say"blog" which I realise is the parent category but I want them to say what their main category is ie "design trends" or "featured" etc. How do I fix this please. I must have set up the menu incorrectly.

    Many thanks

    Kerri

    Attached files:  Screenshot (46).png
      Screenshot (47).png

  •  2,660
    PenciDesign replied
    February 3, 2023 at 1:57am

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .menu-style-2 .penci-megamenu .penci-content-megamenu .penci-mega-latest-posts .penci-mega-post::before {
        color: transparent;
    }
    #navigation.menu-style-2 .penci-megamenu .penci-mega-child-categories::after {
        background-color: transparent;
    }

    Regards,
    PenciDesign.



  • KerriDPraiano replied
    February 3, 2023 at 11:56am

    Hi...thank you again.

    This code did remove the lines before the menu items but not those after (see pic). Is there another solution please?


    Many thanks

    Kerri


    Attached files:  Screenshot (48).png

  •  2,660
    PenciDesign replied
    February 3, 2023 at 4:12pm

    Hi,

    Please add the following CSS code to your site:

    .menu-style-2 .penci-megamenu .penci-content-megamenu .penci-mega-latest-posts .penci-mega-post:before {
    background-color: transparent !important;
}

    Regards,
    PenciDesign.