This thread is resolved. Here is a description of the problem and solution.
Problem:
Design singe product post with custom CSS codes.
Solution:
It is a CSS issue, you can setup CSS codes to style it as what you want, for example:
https://toolset.com/forums/topic/layout-not-inhereting-theme-styling/#post-1561051
Relevant Documentation:
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | - |
| - | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Hong_Kong (GMT+08:00)
I have a layout called "Layout-Product" assigned to the WooCommerce Products post type, and unfortunately it is now inhereting styles from the theme. For example, there is a solid white background when there should be slight transparency, and the size of the font for the post title in H1 is too small. I've attached a screenshot of a different post type that works properly for comparison, as well as the malfunctioning layout. Here are links to both:
Works: hidden link
Doesn't Work: hidden link
I have tried the following to try and fix:
1) Removed each individual section inside the layout - no effect.
2) Associated the post type with a completely different layout - styling still incorrect.
Could it be something related to the fact that it's a WooCommerce post type? Appreciate any help.
- Aaron
Hello,
It is a CSS issue, Toolset Layouts plugin is based on Bootstrap framework, it will load Boostrap CSS styles, in your case, you can setup CSS codes to style it as what you want, for example:
Q1) there is a solid white background when there should be slight transparency
You can try below CSS codes:
.ast-woocommerce-container .product{
background-color: transparent;
}
Q2) the size of the font for the post title in H1 is too small
You can try below CSS codes:
.single-product h1{
font-weight: 600;
font-family: FHA Condensed French;
text-transform: inherit;
margin: 0;
}
I have tested above CSS codes in the URL you mentioned above with my Chrome browser , it works fine, see screenshot, CSS.JPG
