Welcome to another CataBlog tutorial, this time we will learn about how to change the appearance of each catalog item's title. Some of this tutorial is the same from the Multiple Column Tutorial, so please feel free to skip ahead if you are already familiar with the CSS basics and overriding CataBlog's CSS classes.
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-title. To make sure our properties override the default .catablog-title 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 .catablog-title
So now that we have the path, we are now going to modify the font size and appearance with CSS properties. These properties will consist of font-family, font-size, font-weight, color and others. Styling Fonts will teach you about choosing a font family, size, weight and style. There are many other CSS properties for controlling font and text appearance, use the W3 Schools CSS Reference to help you start learning.
Pretty easy huh, here are some examples of complete CataBlog CSS override classes to help you get started.
Examples
<small>// makes the catalog title font arial or a sans-serif font with 12pt size.</small>
html body .catablog-catalog .catablog-row .catablog-title {
font-family: 'arial', sans-serif;
font-size: 12pt;
}
<br />
<small>// make the title comic sans, bold and red.</small>
html body .catablog-catalog .catablog-row {
font-family: 'comic sans';
font-weight: bold;
color: red;
}
<br />
<small>// you may use html hex colors to set font color.</small>
html body .catablog-catalog .catablog-row {
color: #fc1209;
}
<br />
<small>// fonts are not guaranteed to be available on everyones computer,
so make a list of a couple font families just in case.</small>
html body .catablog-catalog .catablog-row {
font-family: 'helvetica nueue', 'helvetica', 'arial', sans-serif;
}
Hi Zach, I’m interested in getting a list of all the shortcodes and options to display (like jShortcodes do). What I want to achieve, is a dropdown box which then goes to a page with all the products displayed that are in that category. Is that possible?
Thanks,
Jürgen
As far as learning all the Shortcode options, did you read the Displaying Your Catalog in Posts page on this blog?
Once you enable the ‘Public’ feature you may use the CataBlog Categories Widget to add a drop down box of CataBlog Categories on your sidebar. I hope this helps you achieve your goal.
HA! It worked. Magic. Thank you for your patience with all newbies like me.
Is there a way to select multiple categories and only have them display. Example, say I have 2 brands, brand1 and brand2, also have two categories color and mono. If I have mono items in brand1 and brand2 and use catablog categories=’brand1, mono’ I get mono items from brand2 also.
Is there a way to limit it to an exact match of categories like brand1 and mono? I tried catablog categories=’brand1+mono’ it didn’t work. Should be a pretty simple code change to make it work though. Or is there a command to use instead of the + sign. I read through the docs and really didn’t find anything for this type of setup.
Without this then I would have to make a category for every single combination of items and that could be in the hundreds. Thanks for any help you may be able to provide.
Please read about all the catablog Shortcode parameters, there is an operator parameter that may be set to AND, which will make it so only catalog items in all the categories set in the category parameter of that Shortcode are shown.
Hi,
can you help me to make the widget “catablog categories” to take a different template from the default one when it shows the items?
Thank you
Michael
Hello,
I am using the minimatica theme on wordpress, and I have applied the catablog to my website, but on my pages, only 4 images are being displayed out of 10. Please advice what I can do. Thanks.
You should try disabling any other plugins besides CataBlog and use the twenty-ten theme. If it works after doing that then you have a conflict and you may have to either modify the theme or not use a specific plugin. Good luck
It seems that the theme is the issue, any advice?
Hello Nakul Bhatnagar, have you considered using another theme? Your theme has not been updated for over one year. I am currently using Suffusion and in my opinion is one of the best Free theme on the market.
Let me know if this helps you
Please Need your help.
First When Facebook ilike a picture of the product is transferred how can you fix it?
Second You can adjust it when adding new entry is saved permalink automatically shut as link?
Thank you.
Hi Bergmann, can you please explain a bit more what you mean. Sorry but I am not able to work out exactly what is the problem.
I look forward to your reply.
Kind regards
Hello Manuel,
1. First I built like button but not how it works Facebook displays the image of the product but very different from the home page. Why?
2.Second Can you do it so When I insert new items that the permalink is automatically saved as a link. That would be great.
Thanks for your help.
Kind regards
Please help 🙁
I am trying to remove the “add to cart” button, suggestions other than css?
Done, sorry, was being lazy and did not check out template
OK this one I researched, but need some help with. Is it possible to change the font for different catalogs? On one page I want the title bolded and uppercase, but on a different page I want the title to have a different font. Is this possible? Is it on the page css/html or something? Thanks!
If you are using different shortcodes then you can use different catablog templates to achieve different layouts on a per shortcode basis.
Hi,
Great plugin, I use it for every website I design. I have a question about subimage titles. Is there a way to change the description of subimages so that it does not read the same as the main image. I am using a template that hides subimages from the thumbnail view but shows them in lightbox. Or do I need to create a library entry for every image? but then how do I get the entire catablog to display..
Hi Kristina,
That’s a good question. You do indeed need to make a separate catalog item for each “lightbox slide”. Then add a little CSS, and we can hide all but the first catalog item in a “catalog”, like this:
html body .catablog-catalog .catablog-item { display: none; } html body .catablog-catalog .catablog-item:first-child { display: block; }This example works when using the Shortcode, if you are using another method of displaying your catalog you should be able to adjust the CSS paths to achieve the same results. I hope that was helpful, good luck.
Thank you for the tip! It however was unsuccessful.. I added the image and then the code you suggested. Would I add to the Default / gallery or other area of css file. I’m calling the gallery template. And would I add a div wrapper in the image I don’t want to appear in the thumbnails? Thank you so much for your quick response!
-k
Sorry, I goofed the CSS, here is what it should be, notice that .catablog-item is not a class, it is .catablog-row. I also added the !important into the property definition, this may or may not be necessary.
html body .catablog-catalog .catablog-row { display: none !important; } html body .catablog-catalog .catablog-row:first-child { display: block !important; }I guess I’m wondering how I tag an image as first child.. Thanks again!
You don’t have too, that is a CSS pseudo-class that is supported in all modern browsers (IE7+, Firefox, Safari, Chrome, Opera).
You should be able to add that CSS code into your theme’s style.css file or make a new catablog.css file in your theme directory.
If you need to control the precise order of your catalog items, and make a specific item the first to appear, I would suggest using the gallery feature.
aha! that worked, but it means I have to make a gallery for each grouping of images.. But if it works right! Thank you!
well it kind of works, It looks like the entire row is hidden so each subsequent gallery lists in a column and not in a grid format.
You can fix that by modifying the .catablog-catalog class, something like this:
classic old school way html body .catablog-catalog { float: left; width: 210px; height: 260px; } or the newer way with less support for older browsers html body .catablog-catalog { display: inline-block; vertical-align: top; width: 210px; height: 260px; }By the way, when an item has its display property set to none it is not rendered and no space on the page is reserved by the item, so effectively it doesn’t affect the page in any way.
The reason you get the columns or a “hard return” is because the wrapping .catablog-catalog class.
Thanks again! I’m getting there.. So should I add a wrapper to wrap all the galleries and have them grid. I’m getting a step ladder effect.. http://www.oliviammoore.org/home/
You are extremely helpful and amazing. Thank you!
After looking at your page in Firebug it is the .catablog-navigation div that is causing the ladder effect. This should fix that, as long as you don’t need to use the limit option in your Shortcodes.
html body .catablog-navigation { display: none; }genius! thank you. Of course Firebug!
-k
Hello! I was hoping you could help me with moving my titles so that they display under the thumbnail images instead of beside the images? Should I be using a particular setting for this or is it css that I need to use? I’m a newbie and need all the help I can get. Thanks!!!
You will need to use CSS. I recommend using a tool such as firebug or chrome’s developer tools to play with and learn CSS. Good luck 🙂
Hello! I am still struggling getting social buttons to work on the lightbox pictures and need to understand how for example if I wanted to add ‘AddThis’ or ‘ShareThis’, how could this be achieved? Or even just a facebook button in the following code for the gallery template?
%TITLE%
%DESCRIPTION%
I just installed the catablog to display some of my set designs on my blog. For some reason though lines appear underneath each image in the gallery. Is there a way to get rid of these?
Regarding changing the font, I assume there isn’t a way to change the font without overriding the CSS?
Hi,
I love using catablog and its great. I was wondering if anyone here has used catablog in a responsive website or has incorporated it into a responsive theme? When you shrink the browser the catablog entry title’s do not resize. The titles are written to the right of the thumbnail image, but is there a way to make them appear below the image?