Changing top-level category images on home page only

[ktomas]

I need to manipulate the images for my top category levels on the home page only. I've become quite comfortable with the #indexHomeBody method of manipulation via the stylesheet, but I've run into some styling that's not in the stylesheet that I can't seem to isolate.

Here's how I want the homepage to look.

Here's how it currently looks.

The .categoryListBoxContents class has an inline style of {width: 50%}, but I want to make the width a px unit and most-likely position it absolutely. Since this styling is in the markup and not the stylesheet, I'm not sure how to change this just for the home page.

Is there somewhere in the Admin that this is available? I'm pretty sure I had to change the width value to 50% from 33%, but I can't find where I did it for the life of me.

Keep in mind that the gray middle box is not a link like the other two, so I don't want to make that an empty category to style it correctly.

[niccol]

This is do-able but what you might find easier is to disable categories on the home page via the admin panel. Then hard code the images and links you require by adding the code to the main page by the define pages editor in the admin panel.

Just remember that if you install a SEO or uri re-write mod then you may have to change the links in this code

[ktomas]

I'll try that, thanks.

Is there somewhere in the admin panel that I can change the category images on the home page only? My other pages have the categories at 33% width, and I'm pretty sure I had to change it to 50% on the home page. I've made so many changes lately that I can't even remember where or if I did this!

[ktomas]

Let me ask you this...

Clearly I've already designed this page (as seen at sweetjujubead dot com), so is there a way I can simply add this code to the define pages editor and apply my other style sheet to this page only? I guess we've already declared that there's no way that we know of to have a separate style sheet for the home page, but I figured I'd ask. I don't want to have to reinvent the wheel if I don't have to. I could always just add this to the styles.css if I had to. Would it be a bad idea to use custom markup for this?

And I don't even know what a uri re-write mod is, so I don't think I'll be adding it anytime soon

[niccol]

Well first of all you turn categories of on the home page.

admin - configuration - layout settings

Categories - Always Show on Main Page
Main Page - Opens with Category

Both to 0.

What I think you will have on your main page then is just the header and anything that you put in via the define pages editor.

So, you can put the various boxes in by the define pages editor. Whatever code you have to produce the three images on the other page put into the define pages editor. You are only adding the three images so I don't think the stylesheet is really an issue.

By the way it was pointed out to me in another post that the way to style the main page is to apply all the required styles to the <div> #indexHomeBody. So , it is do-able.

[ktomas]

OK I'll try this out. And yes, you pointed the #indexHomeBody trick out to me in another post, and I've been using it quite successfully since! The problem with this particular instance is that part of the styling is in the <td> tag in the markup and not on the stylesheet. But it sounds like your define pages suggestion is definitely the easiest.