colors | PenciDesign Support

PenciDesign Supporter replied

3 years ago

Staff Reply

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.

KerriDPraiano replied

3 years ago

Customer Reply

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

PenciDesign Supporter replied

3 years ago

Staff Reply

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

3 years ago

Customer Reply

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

PenciDesign Supporter replied

3 years ago

Staff Reply

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

3 years ago

Customer Reply

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

PenciDesign Supporter replied

3 years ago

Staff Reply

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

3 years ago

Customer Reply

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

PenciDesign Supporter replied

3 years ago

Staff Reply

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

3 years ago

Customer Reply

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

PenciDesign Supporter replied

3 years ago

Staff Reply

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

3 years ago

Customer Reply

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

PenciDesign Supporter replied

3 years ago

Staff Reply

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 started the conversation

3 years ago

Conversation Start

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