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

    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,736
    PenciDesign replied

    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

    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,736
    PenciDesign replied

    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

    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

  •  2,736
    PenciDesign replied

    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

    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

  •  2,736
    PenciDesign replied

    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

    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,736
    PenciDesign replied

    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

    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

  •  2,736
    PenciDesign replied

    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

    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


  •  2,736
    PenciDesign replied

    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.