Edit Category Landing Page

[gjh42]

You're looking at the wrong file. There is a main_template_vars.php for most if not all pages; you want /includes/modules/pages/index/main_template_vars.php.
It has this at the top:

 * index main_template_vars.php 

You need to remove the additions you made to the other main_template_vars.php, as they don't belong there.

[timhersh]

Perfect thank you. Is there a way to left justify it through this page or do I have to use the stylesheet? I don't want to mess up anything else

thank you so much

[gjh42]

I see that I gave the exact location for category_row.php in my first post, but not for main_template_vars.php... sorry, my bad.

You can use the stylesheet to adjust the layout. Let me look at it live and I will give some pointers.

[gjh42]

First issue: you have <p> elements set to only 50 pixels wide:
P, ADDRESS {
padding: 0.1em;
width: 50px;
}

I can't tell exactly where this rule is because of your minimized stylesheets (lines all run together and very hard to read), but hopefully you can find it. A default setting for all paragraphs to 50px wide doesn't seem like a good idea, as very few will want to be that narrow. Maybe the width was intended only for addresses? If so, you need to make a separate rule for that so as not to mess up paragraphs.

[gjh42]

Add to your stylesheet (wherever convenient and sensible for you):

.categoryListBoxContents a {display: block; float: left; clear: both; width: 36%; text-align: left;}
.categoryListBoxContents a img {margin: 0 1em -3.5em 0;}
.categoryListBoxContents p, .categoryListBoxContents ul {float: right; width: 62%; text-align: left; margin-top: 0;}

Adjust to taste. There are still things that are not ideal about the layout, but it is a lot closer. I see that you appear to be escaping from the
<p class="catListingDesc">' . $categories->fields['categories_description'] . '</p>
so that the class tag does not actually apply to your content, and there are empty paragraphs above and below your paragraph and ul list. Why is that? Is it intentional? It makes styling considerably trickier.

"Escaping" means that your content starts with </p> and ends with <p>, closing out the coded <p class="catListingDesc"> before it can be useful.

[timhersh]

You are the man, thank you so much, it worked great.

http://www.domo-online.com/Outboard-.../evinrude-c-1/

BUT where there is no description everything is messed up http://www.domo-online.com/Outboard-...Oil/drums-c-5/

and
in Chrome the titles are lining up weird, any ideas? http://www.domo-online.com/Outboard-...l/mercury-c-3/

thanks

[gjh42]

For a stopgap with the no-description piling issue, add to your stylesheet

.categoryListBoxContents {min-height: 160px;}

I see some categories have longer names, so you probably need to increase the width of the link and decrease the width of p and ul elements.

You have a lot of messy HTML/CSS in there, and it will be hard to sort out the styling until that is neater. You didn't answer about the "escaping" content.

[gjh42]

I think it will be easier to handle if you change the addition in category_row.php from
<p class="catListingDesc">' . $categories->fields['categories_description'] . '</p>
to
<div class="catListingDesc">' . $categories->fields['categories_description'] . '</div>

You will then need to change the one style rule from
.categoryListBoxContents p, .categoryListBoxContents ul {float: right; width: 62%; text-align: left; margin-top: 0;}
to
.categoryListBoxContents .catListingDesc {float: right; width: 62%; text-align: left; margin-top: 0;}

[timhersh]

Thank you very much. I tried and it seems to work well. Only issue left is the name of the category is messed up, is there a way to put the category name directly under the picture?

honestly not sure about the escaping, I didn't do it intentionally, I have edited this template quite a few times over the last year. Probably screwed it up but appreciate your help.

only two things I would love to fix are:

1) http://www.domo-online.com/Outboard-.../yamalube-c-4/
The ringfree picture is not lining up like the rest and it would solve the problem of long names if the name can go directly above or below the picture.

2) Similar issue, some of the names are pushed left and others are not
http://domo-online.com/Outboard-Moto...=index&cPath=5

[gjh42]

I think the escaping happened automatically when the browser tried to process the output. It had a <p> from the file code and another <p> from your description. You can't have nested paragraphs in HTML, so the browser closed out the outer one before starting the inner one. It works correctly now with the div wrapper.
The name alignment issues are all as far as I can see caused by width issues - wide images and longer names can't fit on the same line in the set width, so the name drops to the next line and starts at the left edge. Increasing the width or putting the name above/below the image are the only ways to fix it. You really need a handle to style the name; it's not just subtext as the original design made it. Edit category_row.php, changing
. $categories->fields['categories_name'] . '</a>
to
. '<span class="catListingName">' . $categories->fields['categories_name'] . '</span></a>
to get

     'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<span class="catListingName">' . $categories->fields['categories_name'] . '</span></a><div class="catListingDesc">' . $categories->fields['categories_description'] . '</div>'); 

or if you want the name above the image

     'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' .'<span class="catListingName">' . $categories->fields['categories_name'] . '</span>' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '</a><div class="catListingDesc">' . $categories->fields['categories_description'] . '</div>');