No announcement yet.

Sub-Category Layout

  • Filter
  • Time
  • Show
Clear All
new posts

  • Sub-Category Layout

    I want to change the layout of the sub-category pages. Seems like this should be easy, but I can't find where to make the changes.

    Currently, the page is laid out with the thumbnail image on the left and the Sub-category title text to the right of the thumbnail. I'd like the Sub-category title text to be centered underneath the thumbnail.

    Where and how do I make this change?

    Thanks for your help!

  • #2
    I figured it out with a lot of head scratching. Seems the templates are not numbered the same as the styles. For example, category_2.html is actually category layout Style 3. The templates are numbered starting at 0 while the layout styles are numbered starting at 1. Maybe this is common knowledge to coding gurus, but it took me a while to figure it out.

    I finally got the text moved and centered underneath the thumbnail, now I'm working on trying to figure out the overall vertical alignment. I saw a thread about this somewhere and a solution for it. Where was that?


    • #3
      I have been wanting to do the same thing. If it isn't to difficult can you tell me how you did this?


      • #4
        Hey TikiGirl,

        Sure. I'll try to remember what I did. And, bear with me. I'm more of a designer than a programmer!

        Open up the category template that you're using. On my site I'm using Style 3 for my Template/Category page which correspond to template category_2.html.

        In the html template, the category thumbnail image and the text are set up on the same table row. I added </td></tr> after the subcategory image to put it on a row by itself. Then, I created a new table row adding <tr><td> before the subcategory name. I also changed the alignment to centered. I believe it was previously set to left. I'm still working on trying to figure out how to bottom align rather than top align the whole shebang. Using Firebug in the Firefox browser I can see what needs to be changed, but can't figure out where to change it.

        Here's my code for centering the subcategory text below the subcategory thumbnail image. It's probably not very clean code as the align="center" is in there twice and I think it's redundant, but it worked.

        <table border="0" cellspacing="4" cellpadding="0" align="center">
        <td align="center">
        <a href="view_category.asp?cat=[CATID]"><IMG SRC="[SUB_CATEGORY_IMAGE]" ALT="[SUB_CATEGORY_NAME]" BORDER="0"></a>
        <!--END: SUB_CATEGORY_IMAGE-->
        <tr align="center">

        <td class="font2" align="center"><a href="view_category.asp?cat=[CATID]">[SUB_CATEGORY_NAME]</a><br>[SUB_CATEGORY_DESCRIPTION]</td>

        Hope that helps! If anyone else knows the answer to how to bottom align the subcategory thumbnail/text combos I'd love to know!