Skip Navigation

[Resolved] Layout Not Inhereting Theme Styling

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.

This topic contains 2 replies, has 2 voices.

Last updated by aaronM-9 1 year, 6 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1560659
works.jpg
doesnt-work.jpg

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

#1561051

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

css.JPG

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

#1561529

Thanks - I was able to correct the issue using CSS.

- Aaron