Changing top-level category images on home page only

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.

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 :smile:

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!

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 :blush:

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.

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.

Well, I am not sure I completely understand about the styling in the <td> but one of the things I do almost as a default is add a class to the central <td> for all pages. Then I can style it a bit more effectively.

It's in tpl_main_page.php

It reads:

    <td valign="top">

and I just change it to something like:

    <td class="central_td" valign="top">

so that the rule in the stylesheet will read

.central_td{background-color:red;}

or whatever.....

or more specifically for the home page

#indexHomeBody .central_td{background-color:red;}

If there is styling embedded in the code, you can override it with !important added to the property value in the stylesheet. But I concur that just putting that layout content and the links in define_main_page.php would be the easiest/best way to go.

That central <td> really ought to have an id by default, but since it doesn't, adding one as niccol suggests is an excellent idea.