Background color on woocommerce product page

[lifeinthecave]

here the website and product page I am working on (its a stage site): https://www.d6inc.cecemcguire.com/product/rx-safety-face-shield/

as you can see the background color of the content generated by woocommerce is dark grey and the text is white. I have not been able to find any settings on the page/theme/plugin that change these colors. I have also tried editing the css of the divs containing the element with no effect.

Hoping you can point me to ether proper place to change these colors or proper css classes to be modifying.

thanks

Cece

[ruenel]

Hello Cece,

Thanks for writing in!

You are using Integrity - Dark theme. By default, the entry container is using this code in the stack stylesheet:

.entry-wrap {
    background-color: #121212;
    border-radius: 4px;
    box-shadow: inset 0 -0.125em 0.5em 0 rgba(0,0,0,0.85), 0 3px 2px -2px rgba(255,255,255,0.075);
}

You can override the defaults by customizing the code above in which you set the color to white and the box-shadow to none and then add CSS code into Pro > Theme Options > CSS. After that, go to Pro > Theme Options > Typography to change the color of the headlines or Headings.

Hope this makes sense. Kindly let us know how it goes.

[lifeinthecave]

Thank you! That was indeed what I was looking for. I knew it was gonna be something simple. I think the easiest thing for me to do is change the theme to light.

also - on a different note - Is there a way to make a Line element appear inline block so that I can have a text element next to it within the same column?

this is what im trying to achieve (D6inc.cecemcguire.com)

[ruenel]

Hi Cece,

It is best that you utilize the classic Skillbar element:

With a little customization, you should be able to accomplish what you have in mind.

Best Regards.

[lifeinthecave]

thanks so much!

[marc_a]

Hi @lifeinthecave,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.

[lifeinthecave]

ok one more question on the product page - now that the theme is light, how do I remove the description bar? and the shadows on all the containers

[ruenel]

Hello @lifeinthecave,

The containers were using this CSS code built-in the Integrity - Light stylesheet:

.entry-wrap {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.x-tab-content {
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.15);
    border-top: 0;
    box-shadow: 0 0.125em 0.275em 0 rgba(0,0,0,0.125);
}

.x-nav-tabs {
    display: none;
}

Feel free to modify the codes setting the display to none to hide the “Description” title and then the box-shadow to none also. If there is still a border, you can set it to 0.

Be advised that custom coding is beyond the scope of our support. You will have to maintain the code whenever there are updates.

Hope this helps.