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;
}
Wow!! That was so easy!! But without knowing a lot of CSS, I was lost! Thank you!!!
That was really esay! Even without knowing CSS or HTML … Great Pulgin, Thanks!
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 🙂
Please read the documentation on categorizing your catalog.
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.)
Thanks! 🙂
where can find .catablog-row.
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.
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.
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?
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
Follow the directions above, if you already read the article, please take your time to reread it and follow any links or suggestions I have for beginner, such as doing the W3Schools CSS Tutorials online.
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?
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.
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/
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?
“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
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.
This bug has been fixed in CataBlog 1.6.1 🙂
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?
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:
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….
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
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:
and this is the “default” catablog template:
Thanks in advance!
(uhm, the strings on the “code” areas on the previous post has lost formattation)
Another question: how I can put titles under the image?
The instructions under the comments window asks you to please wrap your code with the preformatted tag. Just a little FYI for next time 🙂
I will assume you are talking about ordering your two column catalog like this:
And it is not, instead it is ordering your two column catalog like so:
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.
And a last question:
I want to show description only inside the LighBox.
In the “default” template, if i leave:
…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!
I reply myself 😛
this was resolved adding this to style.css:
^__^
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?
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.
thank you
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?
Make a custom CataBlog Template, you can learn about them and the tokens you will need to use in this site’s documentation. Good luck
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?
Hello Sharon, your code is entered correctly.
Are you using a child theme? If you are not I suggest that you use or create a child theme. It is always better to work with a child theme. Once you have a child theme then enter the same code above and it should work. If you need more help can you create a ticket on the http://wordpress.org/support/plugin/catablog support link.
Kind regards
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
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
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!
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 { }(nevermind, just changed!)
I recommend holding the shift key down while clicking the refresh button a couple time to make sure your browser updates its caches.
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.
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!
I got it!!! It’s
html body .catablog-title {…
Thank you Zach!
Tiago, thank you so much for taking the due diligence to research, test and then post your solution here. I really appreciate it 🙂
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?
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 bodyto 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 */ }ok so installed firebug, when I click in catablog.css under CSS tab, get the message “There are no rules in the stylesheet”
Can you send me the contents of the catablog.css file? Or maybe a url so I can look at it myself. Thanks.
ok just added the css to my themes style sheet and its worked now. Thanks
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:
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
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!
can the catalog be made responsive? i want a 3 column layout that adapts to a 1 column layout on mobile devices.
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?
I guess Zach is busy…. no replies for ages.
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