Full width layout applied to only one of several CPT's

Hi. I an trying to ally the css to one of my CPT’s to achieve a full width layout, following the https://theme.co/apex/forum/t/full-width-post-by-category/19913/4 kb. Here is what I have done thus far

  1. Added css to Customizer per kb, using my CPT post type name/slug of storefront

.storefront .x-sidebar {
display:none;
}

.storefront .x-main {
width:100%;
}

  1. Added following to child function.php

add_filter(‘body_class’,‘add_category_to_single’);
function add_category_to_single($classes) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->storefront; storefront_categories
}
}
// return the $classes array
return $classes;
}

This approach hasn’t worked - storefront post --> https://mysalus.org/storefront/hg-wellness/ is still showing sidbar. Perhaps I am not uderstanding the CPT "category application (vs page slug)? so I tried the CPT category of storefront_categories instead of post slug above but it still did not work for me.

Thoughts? Thanks.

Hi there,

Please try:

.single-storefront .x-sidebar {
    display: none;
}

.single-storefront .x-main {
    width: 100%;
}

Hope this helps.

Thanks for the quick reply. I made the css changes suggested and changed the filter to

// Filter for Full Width Storefont Post

add_filter(‘body_class’,‘add_category_to_single’);
function add_category_to_single($classes) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->storefront;
}
}
// return the $classes array
return $classes;
}

where storefront is the CPT page slug. Still not working. Is the CPT post slug the correct item for $category-> ?

Thanks

Hi there, just keep the $classes[] = $category->category_nicename; and do not change the category_nicename.

With the current setup that you have the CSS code by my colleague mentioned should work. Add the CSS code to X >Launch > Options > CSS:

.single-storefront .x-sidebar {
    display: none;
}

.single-storefront .x-main {
    width: 100%;
}

If you still have problems making the posts of the Storefront category full width kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Hi there,

Thank you for login information. I managed to fix the problem. Actually, our suggested code was correct, but the problem was the other code before that you have in the Global CS section you did not close the bracket for this section of the code:

.x-btn, .button, [type="submit"] {
    margin-bottom: 1em;
    text-shadow: none;

And that made all the other CSS code after that invalid. I added the } and it worked.

I suggest that you always check to see if the CSS you add is correct entirely using CSS validators such as:

https://jigsaw.w3.org/css-validator/#validate_by_input

Also, you had an error regarding

background-color: rrgb(0,128,128, 0.1);

It had rrgb which is wrong I changed that to rgb:

background-color: rgb(0,128,128, 0.1);

Thank you

Thanks much for your help and insights. I will check all my css with the link.
Have a great day.

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.