[SOLVED] Aligning category images, 3.0 style

Try putting this into your CSS:

.row IMG {
vertical-align:middle !important;
padding: 1px 3px !important;
margin:0 !important;
}

That sort of worked... for CSS Zen and Elegance, it made the link to the category (and the number in brackets beside it) shift up to the middle, but the category description text is underneath the image, rather than beside it.

And for Zenlike, it's still stuck in two columns, even though I changed the setting in the Admin Panel to allow for one column of categories only. The CSS addition seems to have no effect for Zenlike.

Yeah, I did things sort of differently for Zenlike.

Open up variables.php:

/* CATEGORY BLOCK
Categories are to show only on the index.
I currently have it set to display:
The image, then the link, the story count in brackets, and then the description in a div tag. (template)
Three columns (columns)*/
$blocks["categories"]["status"] = '2';
$blocks["categories"]["template"] = "{image} {link} [{count}] <div>{description}</div>";
$blocks["categories"]["columns"] = '3';

Inside that, look for this:

$blocks["categories"]["template"] = "{image} {link} [{count}] <div>{description}</div>";

Change to this:

$blocks["categories"]["template"] = "{image} {link} [{count}] <br />{description}";

Next, change columns = 3 to columns = 1

See if that doesn't work.

Hm, well it worked (as in, one column) when I'm looking at the preview for the Categories Block on the Zenlike skin (in the Admin Panel, Blocks/Categories/Options), but not on the actual home page itself, even though I've refreshed it multiple times. But the text is still in the wrong place. o_O

😕 . . . I'm stumped.  I have no idea what's going on.  😕

Set columns to 0 instead of 1.

Okay, that got the categories to be in one column, but unlike the other 2 skins, the text (starting with the link) is still aligned with the baseline of the image, rather than the top, like I want, or the center (like it is with the other 2 skins).

I don't see the Zenlike skin on your site now, just CSSZen.  Follow Lazuli's instructions for altering the variables.php and you should get the affect you want.

I wanted to hide them until I was done making the edit. I made them visible again, but the text is still aligned to the baseline of the image, rather than the middle (for the links), as happened with the edit in the other skins. Is there a way to get ALL of the text aligned against the images, at the top?

You didn't add this to the .css like Lazuli told you.

.row IMG {
vertical-align:middle !important;
padding: 1px 3px !important;
margin:0 !important;
}

Actually, I did add it-- I just forgot to upload it. Okay, so now the categories on all my skins are in ONE column, and the link text is aligned to the middle, but the description text is below. It's not exactly the way I wanted, but it's okay. Thank you!

You've got to do BOTH of the things Lazuli said.  The description is still in a <div> instead of having a <br /> after the link.

I did make both changes. I copied and pasted the changes she told me to make and I put them in there and uploaded the file(s)-- I just checked it now for the Zenlike skin and I viewed the source to make sure.

This is the line she told me to change it to:

$blocks["categories"]["template"] = "{image} {link} [{count}] <br />{description}";

And there's no DIV tag in there, or that was left unclosed nearby (as far as I can see). I did this for the variables.php for both CSSZen and Zenlike (since elegance doesn't have a variables.php, and I wouldn't want to create one for the sake of just one modification to something like the category columns, unless there was NO other way of getting it to look right; at least with the other skins, the variables.php already exists and has other functions), but there's no apparent change.

The image displays in a nice straight column on the left, but the category link is aligned with the center/middle of the image, and the description text comes AFTER the image; it's not even aligned with the baseline. I wanted the link to be aligned to the top of the image, and the text to directly follow; the text would be flush right against the image. In 2.0, I did that with some simple hspace and vspace tags, but that caused that bad staircasing effect I mentioned in my OP.

Okay.  You missed it on elegance.  It's still got the <div>'s

You can try this in the css

.row IMG {
float: left;
padding: 1px 3px !important;
margin:0 !important;
}

Changes in bold.