Multiple Column Tutorial

Hey CataBlogers, welcome to the start of a new section of the blog. Today I introduce the tutorials section of the blog, which will feature guided instructions on how to integrate CataBlog with your site. Today's tutorial will explain how to give the default CataBlog Template multiple columns.

CSS Basics

The first thing to understand when customizing your catalogs appearance is how to override a CSS class. CSS classes consist of two things, a path that instructs the browser which elements to modify and properties that tell the browser how to modify the found elements. CataBlog has a predefined set of classes that you may easily change with just a few lines of code.

A CSS path look like this: #page .catablog-catalog .catablog-row. This path tells the browser to modify all HTML elements with the class "catablog-row" that are inside HTML elements with a class of "catablog-catalog" that are inside an HTML element with an id of "page". Any properties you set for this path would affect each individual catalog item. If you are confused and want to learn more about CSS I highly recommend reading W3 Schools CSS tutorial.

A CSS property is a key value pair that lets you control how the elements are displayed. font-size: 18px; is a CSS property that makes the HTML elements selected by the path have a font size of 18 pixels. The name of the property is always followed by a colon (:) and the value is always followed by a semicolon (;). The list of properties are also always surrounded by curly brackets ({ }). There are a lot of CSS properties, I recommend you bookmark the W3 Schools CSS Reference if you are unfamiliar with all of them.

Overriding CataBlog CSS Classes

So lets modify one of the CataBlog CSS classes to make a two column layout. First thing we need to do is open the appropriate CSS file to modify. I recommend never editing the CSS files found in the CataBlog plugin's directory, since plugin updates will overwrite your personal modifications. Instead modify your theme's style.css file or make a new file in your theme directory named catablog.css. Once we have the file open, we need to decide which CataBlog CSS class we want to modify, for our current task we will want to modify .catablog-row. To make sure our properties override the default .catablog-row we need the CSS path to be more specific than the built in one. An easy way of doing this is to prepend the html and body elements to the path like this:

html body .catablog-catalog .catablog-row

So now that we have the path, we are now going to modify two properties using this path. These properties will be float and width. <a href="http://www.w3schools.com/css/css_float.asp" target="_blank">float</a> controls if each catalog item should force a line break, or flow to the left or right. <a href="http://www.w3schools.com/css/css_dimension.asp" target="_blank">width</a> controls just what it sounds like, the width of the element. To make a two column layout, set the float to left, making each item flow across the page left to right instead of down the page. Next set the width to less than 50% to accommodate for any padding, margin or border width. We may set the width to 50% only if we are sure each catalog elements does not have any margins, padding or borders.

Pretty easy huh, here are some examples of complete CataBlog CSS override classes to help you get started.

Examples

<small>// try a number below 50% if you don't want to change padding, margin or borders.</small>
html body .catablog-catalog .catablog-row {
  float: left;
  width: 47%;
}
<br />
<small>// we set the padding, margin and border to none so we can set the width to 50%</small>
html body .catablog-catalog .catablog-row {
  float: left;
  width: 50%;
  padding: 0;
  margin: 0;
  border: 0 none;
}
<br />
<small>// we set the width below 50% to accommodate for the padding
// 50% = (width + left-padding + right-padding)</small>
html body .catablog-catalog .catablog-row {
  float: left;
  width: 48%;
  padding: 1%;
  margin: 0;
  border: 0 none;
}
<br />
<small>// each column will be 222 pixels wide since margin, padding and border have both left and right.
// (width + left-padding + right-padding + left-margin + right-margin + left-border + right-border)</small>
html body .catablog-catalog .catablog-row {
  float: left;
  width: 200px;
  padding: 5px;
  margin: 5px;
  border: 1px black solid;
}
This entry was posted in Tutorial. Bookmark the permalink.

58 Responses to Multiple Column Tutorial

  1. Wow!! That was so easy!! But without knowing a lot of CSS, I was lost! Thank you!!!

  2. Walter says:

    That was really esay! Even without knowing CSS or HTML … Great Pulgin, Thanks!

  3. hosam says:

    hi 🙂 , this is very beautiful Pulging , But i have small problem in the Categories ,, i need to know please the using of Categories ? how we used this Categories ?
    thanks so much 🙂

  4. Randy says:

    Exceptionally clear writing! I now understand more about “float:” than I did before. (I always found positioning harder to get a handle on that styles, colors, fonts, etc.)

  5. anaske says:

    where can find .catablog-row.

    • Zach says:

      It is the class of a div that wraps each catalog item. It is not in the template system, but built into the plugin. It is a CSS class that you may use to change the appearance of your catalog. You may use it in a CSS file, such as your theme’s style.css.

  6. KC says:

    Is there any way to make the catablog mobile friendly. I’ve tried to have my website converted into a mobile site but because of the extensive javascript with the lightbox it dose not woek. I’m just curious if you have any suggestions.

    • Zach says:

      The LightBox has worked on mobile devices for me in the past, but I’ve only tested webkit browsers like the iPhone. What is the exact problem you are having with the LightBox?

  7. Ric says:

    Hi,
    In my catalogue I have to place two picture side-by-side, while catablog align them one above the other.
    How can I do it?
    Thanks
    Riccardo

  8. irith herman says:

    I Made of two columns template
    In one column it shows the Catablog items and in the second column the site menu.
    i want to show in the menu column only the Catablog items and not all the site menu.
    Is it possible?

    • Zach says:

      I’m sorry I am a little confused about what exactly you are asking. A link to an example would be helpful. Have you looked at the CataBlog Widgets and Menu integration. Use the Screen Options tab in the upper right of the Appearance Menu Admin Panel to easily add CataBlog Categories to your menu.

  9. irith herman says:

    I can”t use the Categories widget because it is for the main menu.
    i made another template with anothe menu ad i cant find a way to put ther the widget
    https://metcomm.net/catablog-items/abmts178dst-100-range-78-activboard-with-mount-system-and-prm-35-dlp-short-throw-projector/

    • Zach says:

      If you have a Sidebar defined, then you should be able to add the Widget to your Sidebar while the CataBlog Public option is enabled. Also, the link you sent me goes to a blank white page, perhaps the white screen of death?

  10. TiaTofu says:

    “Fatal error: Call to a member function getLink() on a non-object in /home/tialeigh/public_html/wp-content/plugins/catablog/lib/CataBlog.class.php on line 2497”

    Hi! I think this will work great for organizing my recipes on my website. I really don’t know anything about websites and codes and all of that stuff… when I put in the short code on the page I want the catablog to show up on, it’s says what I pasted in quotes above^^. It’s like speaking in another language to me- I have no idea what that means. Any suggestions to get the catablog to show up?

    Thanks! <3 Tia

    • Zach says:

      Hi Tia,

      Very interesting error, what version of WordPress and CataBlog are you using? I have not experienced or heard of anyone having this error. The error pertains to object oriented programming and means that CataBlog is having trouble creating catalog item objects from your database. Not sure why this is happening. I would try disabling other plugins, using the twenty-ten theme and or reinstalling CataBlog to see if any of those fix your problem.

    • Zach says:

      This bug has been fixed in CataBlog 1.6.1 🙂

  11. Sorry … got the formatting all wrong … will try again …

    I’ve found Catablog to be closest to what my client needs, and I’ve been experimenting with templates & custome CSS.

    However, I’ve just run into a problem. See this page: http://wrs01.com/wal6/?page_id=126

    I’ve put the same 4 products into two different (home-made) templates. In the second, one of the images doesn’t display. It seems to break at a space in the original’s filename … but it doesn’t happen in both templates.
    First is “top-level”

    <div class='catablog-row catablog-single'>
      <div class="catablog-images-column">
        %MAIN-IMAGE%
      </div>
    <h3 class='catablog-title'><a href=%PERMALINK%>%TITLE%</a></h3>
      <div class="catablog-description">
        %DESCRIPTION%
      </div>
    </div>
    

    This displays OK

    Second is “product-grid”

    <div class='catablog-row catablog-grid'>
    <h4 class='catablog-title'><a href=%PERMALINK%>%TITLE%</a></h4>
      <div class="catablog-images-column">
        <a href=%PERMALINK%><img src=%IMAGE-THUMBNAIL% alt></a>
      </div>
    </div>
    

    … which causes the problem.
    I’m completely lost. Do you have any ideas?

    • Zach says:

      You have syntax error in the image tag in the second template. Can you wrap the %IMAGE-THUMBNAIL% token in double quotes and also either remove the alt attribute or give it an equals and double quotes, example:

      <img src="%IMAGE-THUMBNAIL%" alt="" />
      

      In fact, now that I look closer, you have that problem in a few of your tags. But it seems that they are working…hmmm….

    • Zach says:

      So, one image is not showing up in your ‘product-grid’ template, the reason it is not showing up is because there is a space in the image name, and there are no double quotes wrapping around the src attribute (mentioned in comment above). I would recommend re-uploading that file, perhaps with a name that contains no spaces.

      The reason it works in one template and not the other is because the src attribute of the images tag is wrapped with double quotes automatically when you use the %MAIN-IMAGE% token.

      Hope that answers your question.

      • Hi Zach
        Thanks for the quick response – 1st class service.
        I wrapped the token in double quotes, and the image appeared immediately. Result!
        As I won’t have control over image names in the future (after the site is delivered to the client), I’ll put the double-quotes in any template I create.
        Your help is much appreciated … I’m not a website expert … our main business is copywriting, and we just do a few websites as part of our service … so, detailed webby stuff often goes over my head!
        Thanks again, David

  12. Fabio says:

    Hi
    I tryed to load a basilar two columns catalogue with wordpress and catablog, but the first entry was always vertically not aligned respect to others, i’ve made a screenshot for this issue:

    http://i50.tinypic.com/9719fk.jpg

    can you help me to align correctly? I’ve added these code on style.css:

    
    html body .catablog-catalog {
      float: left;
      width: 47%;
    }
    
    .catablog-subimage {
      display: none !important;
    }
    
    .catablog-first-page-link {
      display: none !important;
    }
    

    and this is the “default” catablog template:

    
    <div class='catablog-row %CATEGORY-SLUGS%'>
    <div class="clear"></div>
      <div class="catablog-images-column">
        %MAIN-IMAGE%
        %SUB-IMAGES%
      </div>
      
      <h3 class='catablog-title'>%TITLE-LINK%</h3>
      
    </div>
    

    Thanks in advance!

    • Fabio says:

      (uhm, the strings on the “code” areas on the previous post has lost formattation)

      Another question: how I can put titles under the image?

      • Zach says:

        The instructions under the comments window asks you to please wrap your code with the preformatted tag. Just a little FYI for next time 🙂

    • Zach says:

      I will assume you are talking about ordering your two column catalog like this:

      1 | 4
      2 | 5
      3 | 6
      

      And it is not, instead it is ordering your two column catalog like so:

      1 | 2
      3 | 4
      5 | 6
      

      CataBlog is not well equipped to handle the first style of ordering your catalog, this is because of CSS nuances. Floating your items to the left will always make your catalog like the second style. To achieve the first ordering style, you would need to make two individual one column catalogs wrapped in narrow left floating divs. Good luck, hope that helped.

  13. Fabio says:

    And a last question:
    I want to show description only inside the LighBox.

    In the “default” template, if i leave:

    
      <div class="catablog-description">
        <p>%DESCRIPTION%</p>
        %BUY-NOW-BUTTON%
      </div>
    

    …the descript is placed on the Lightbox (OK) but also on the catalog page (do not want).

    How to limit descript only into Lightbox? (or just skip it from catalog page)

    Thanks and sorry for the steady trickle of questions from a newbie!

    • Fabio says:

      I reply myself 😛
      this was resolved adding this to style.css:

      
      html body .catablog-catalog .catablog-row .catablog-description {
        display: none !important;
      }
      

      ^__^

      • Fabio says:

        A last thing:)

        I found that using catablog plugin in combination with theme “colorway”, cause title disappearing into LightBox.

        Any ideas how to restore title inside LightBox?

        • Zach says:

          Use a tool such as firebug to debug the CSS properties and figure out why the title is not being shown in the “colorway” theme.

  14. gregory granada says:

    thank you

  15. Great plugin! Thank you! Question, how can I make the thumbnail images link to the same link location that I assign to catablog item instead of it linking to the full res version of the image?

  16. sharon says:

    Hi I have added the code

    // try a number below 50% if you don’t want to change padding, margin or borders.
    html body .catablog-catalog .catablog-row {
    float: left;
    width: 47%;
    }
    to my style.css but it has made no difference at all am I doing some thing wrong?

  17. Michael says:

    Hello,
    This is a great PlugIn however I am having an issue with one of my categories. Using the slug

    –catablog template=”gallery” category=”farm and ranch equipment”–

    It displays all the Products however it is putting “blanks” randomly through the products. Example:
    Prod1 – Prod2 – Prod3 – Prod4
    Blank – Blank – Blank – Prod5
    Prod6 – Prod7 – Prod8 – Prod9
    It is not always 3 products, sometimes it is only one or two and it will happen on multiple rows. I added the sort argument to the catablog call to see if it was specific to individual products but it was not. I inspected the elements but they are all uniform in height/width and nothing out of the ordinary. If you have any suggestions please, I am faith based coding at this point!
    Thanks, Michael

    • Zach says:

      This is most likely a CSS rendering issue, my guess, prod1,prod2 and prod3 are somehow taller than prod4, perhaps their title is longer. You can either change the css display property to ‘inline-block’ (which could then require you to set the vertical-align property as well) or stop your product title from wrapping to the second line with the white-space css property. Good luck

  18. Joanna R says:

    Hello!

    I’ve been unable to override the css this program adds to WP’s html…(
    .catablog-row{min-height:200px;height:auto!important;height:200px}.catablog-image{width:200px}.catablog-title{margin:0 0 0 210px!important}.catablog-description{margin:0 0 0 210px;!important}.catablog-images-column{width:200px}.catablog-gallery.catablog-row{width:200px;height:200px}.catablog-gallery.catablog-row .catablog-image{width:200px;height:200px}.catablog-gallery.catablog-row .catablog-image img{width:200px;height:200px}.catablog-gallery.catablog-row .catablog-title{width:190px}
    //<![CDATA[ )

    I desperately need to change the catablog-title to something under 200px, but when added to catablog.css…it does not change. Any help much appreciated.

    Thanks!

    • Zach says:

      You should be able to override any of these settings by using a more specific css path in your css class declaration. What I do for CataBlog is simply prepend html and body to the css path like so:

      /* use this path to override css properties */
      html body .catablog-title {
      }
      
      /* this may or may not override the css properties depending on other factors */
      .catablog-title {
      }
      

  19. Joanna R says:

    (nevermind, just changed!)

  20. Sonia says:

    I had added a new template with the row styled with width 32%, so 3 columns. Plus float:left;
    Issue initially was that some of the content was longer then others and the floats were not clearing after each row. instead stacking oddly. I have added a minimum height of 210px; which seems ok for now. But not very robust. Is there a way to add a clear after every three items? I have built on the template responsive so it would be good to then be able to make the site mobile friendly.

  21. Tiago says:

    Hi!!
    I have a question.
    I was able to do the columns, but there is one Class i can not change. The “.catablog-title ” left margin insists to have 210px. I tried to force this by using “!important”, but it didn’t work.

    Please help me!

  22. Dillon says:

    Hi There,

    I have created a new style sheet in my current them directory. Not sure if I missed something, but where or what do I need to change so that the new style sheet is used? Do I need to edit my template and add the location of the new style sheet?

    • Zach says:

      If you name the stylesheet catablog.css you don’t need to do anything, the plugin will automatically detect its presence and include it. You can use a tool like Firebug to see which stylesheets are being loaded and to check if your css styles are indeed overwriting the default catablog styles.

      If your having a difficult time seeing your changes, try appending html body to the selector of your custom css styles. Like so:

      html body .catablog-row {
        /* some custom changes go in here */
      }
      
      html body .catablog-row .catablog-image {
        /* some custom changes go in here */
      }
      

  23. Dillon says:

    ok so installed firebug, when I click in catablog.css under CSS tab, get the message “There are no rules in the stylesheet”

  24. Dillon says:

    ok just added the css to my themes style sheet and its worked now. Thanks

  25. Jamie says:

    I’ve created a 2-column layout based on your tutorial.

    I cannot, for the life of me, get the thumbnail to center.

    The title and description are now centered based on my CSS, but not the thumbnail no matter what CSS rules or !important rule.

    Here’s the page in question:
    http://bit.ly/13Mq4QS

    Here’s my overwrite code saved to my theme’s child stylesheet:

    
    /*catablog*/
    html body .catablog-catalog .catablog-row{  
      float: left;
      width: 45%;
      padding: 5px;
      margin: 5px;
      border: none;
      text-align: center!important;}
    
    html body .catablog-catalog .catablog-row .catablog-images-column{text-align: center!important; }
    html body .catablog-catalog .catablog-row img.catablog-image,
    html body .catablog-catalog .catablog-row .catablog-image img {
      float: none!important;
    }
    html body .catablog-catalog .catablog-row .catablog-title,
    html body .catablog-catalog .catablog-row .catablog-description
    {margin: 0!important; display: block; clear: both!important; }
    html body .catablog-catalog .catablog-row .catablog-title {
    padding-top: 15px!important; }
    html body .catablog-catalog .catablog-row h3.catablog-title {text-transform: uppercase; font-weight: bold!important;}
    html body .catablog-catalog .catablog-row .catablog-description p {margin: 3px auto 10px; font-size: 12px!important;}
    

  26. Mara says:

    Please help,
    maybe someone already asks, then I need to ask again,
    in the lightbox, I want that image stands beside title and description (not one under other).

    How to do that?

    Cheers,
    Ivan

  27. Annamarie says:

    Hi! I love the plugin, and have been able to customize tons of stuff using your documentation. I am having issues with one thing: when displaying all products in 2 columns on a page, the title of each item is squished to the side of the image, and I would like it to be either above or below the image. How do I do that? Thanks so much!

  28. razvan says:

    can the catalog be made responsive? i want a 3 column layout that adapts to a 1 column layout on mobile devices.

  29. sylvia says:

    I’m working on an issue I have with a client’s site. He has 3 pictures he would like to show in the store. I’m working with a child theme as strongly suggested. The problem I have is that the sub-images show up in the store in a row under the original image. I would like them to be smaller and clickable to view like we see in Ebay and Etsy. Can someone help me out here?

    `.catablog-subimage { display: none !important; }`
    I found this snippet in one of the posts above and was wondering if I can use that to resize the subimages? If so …. How?

  30. sylvia says:

    I guess Zach is busy…. no replies for ages.

  31. Marco says:

    Hi Zach,
    I’m pretty sure the answer is yes, but I’m trying to do different number of columns in different pages. I’ve had success doing 2 columns, but now I want to do on a different page 3 columns… any thoughts on how to do this?
    Thanks
    Mk

Leave a Reply

Your email address will not be published. Required fields are marked *

Please wrap any HTML markup or code with the pre-formatted tag: <pre> </pre>