Last Updated: December 21, 2015
Custom Display CataBlog Items In Suffusion Theme tutorial will show you how to customize the display of your items in Suffusion Theme or child theme.
Latest News: I have made some changes to the document.
Hint: Remember to always work with a child theme if you are going to add custom code.
In this post you will learn how to remove the sidebars from the front of your website and add some customization to your CataBlog items in Suffusion theme.
CataBlog Advanced Tutorials
- Lightbox Title Permanently Displayed Tutorial
- Add Quantity Product Website
- Add Video To Product Description Tutorial
- Integrate Catablog Into Your Theme
- Custom Display CataBlog Items In Suffusion Theme
- Different Size Thumbnail Images
- Shopping Cart Template
- Responsive Settings
- Move Meta Text To Right Side LightBox
Custom Display CataBlog Items In Suffusion Theme Steps
Step 1 ) First you need to read the previous tutorial Integrate CataBlog into your theme tutorial. This will help you understand how to copy and paste the content.
Step 2 ) Suffusion comes with many different templates. In this example you will be copying and pasting the content from no-sidebar.php template file into the single-catablog-items.php file and taxonomy-catablog-terms.php file.
Note: You can choose any template you want as long as the end result is what you want.
Step 3 ) If you are using a different template than the one mentioned above, then add the following filter to remove the right sidebar. Add this filter above the following code <?php get_footer(); ?>.
add_filter(‘suffusion_can_display_right_sidebars’, ‘kill_right_sidebars’); ?>
Step 3-a ) If you are using a template with a left sidebar then add the following filter to remove the right sidebar. Add this filer above the following code <?php get_footer(); ?>.
add_filter(‘suffusion_can_display_left_sidebars’, ‘kill_left_sidebars’); ?>
Step 4 ) It is also important to make sure CataBlog items occupy the whole width. You can achieve this by adding the following CSS custom style code style=”width: 1000px;” to <div id=”single-col”>. This will increase the content width to a full size page or post.
Note: If you want to achieve a responsive layout then change the 1000px to 100%.
<div id=”single-col” style=”width: 1000px;”>
<div id=”single-col” style=”width: 100%;”>
After you complete the above, your CataBlog items will display using the full width without any sidebars.
I hope you enjoyed this little tutorial. Click on the following URL Different Size Thumbnail Images to continue.
Come back for more
For more CataBlog tutorials check the following Link