Spacing issue in Template

[coderoyal]

Hi there!

I believe for any pros here, you may be able to answer this quickly! I have been trying to fix this with no avail. If you look at the url below, there is a larger gap of space between commercials/photoshoots, than on television/commercials. I'd like the space to be like it is between the television/commercials section, but I've made tons of changes, and removed all the padding code I can find, to no avail.

I modified the default theme to look like the present one below.

Here is a link to the gallery: http://www.lianaliberato.com/gallery/

Here is the path to the CSS file: http://www.lianaliberato.com/gallery/themes/liana/style.css

Please help!
Alan

[Blueiris]

Your problem is in the .css file, right here:

.tableb {
        background: #FFFFFF ;
        padding-right: 10px;
        padding-left: 10px;
}

Change the background color for the .tableb class from white (#FFFFFF) to the pink you are using as background for the .catrow_noalb and .catrow classes and you should be all set.

[coderoyal]

Hey! Close! But no cigar. Now there's a pink line going through the space, but it dind't drop any.

Thanks though!!!
Alan

[Blueiris]

Ah, yes, you are right! Missed that shot by quite a distance. No cigar, for sure! I do get affected by numbbrain syndrome every now and again. Didn't go deep enough on this one. Let's have another go.

The reason why the spacing is different is that "Television" has no albums, but only sub-categories with albums under it, while "Commercials," etc., have albums. In Config > Album list view you have set "Number of levels of categories to display" to 1, so the subcategories under "Television" are not showing up on the face of the album list. Categories with only subcategories are handled a bit differently from categories with albums.

If you do a "view source" on your page in the browser, you will see that an extra row is added underneath "Commercials":

<tr>
                <td class="catrow_noalb" colspan="3"><table border="0"><tr><td align="left"></td><td align="left"><span class="catlink"><b><a href="index.php?cat=2">Television</a></b></span></td></tr></table></td>
        </tr>

        <tr>
                <td class="catrow" align="left"><table border="0"><tr><td></td><td><span class="catlink"><b><a href="index.php?cat=5">Commercials</a></b></span></td></tr></table></td>
                <td class="catrow" align="center">1</td>

                <td class="catrow" align="center">10</td>
        </tr>
        <tr>
            <td class="tableb" colspan="3"></td>
        </tr>

Since cellspacing on the containing table is set to "1", the line appears thicker where the extra row appears. (And this is why changing the background on the table data cell, as I originally suggested, makes just a pink line with white on either side.)

You can change how the categories are displayed through theme.php in your style. Look for HTML template for the category list in your theme.php. If it's not there, you can find it in the theme.php that is included in the "Sample" folder under themes. I've copied and pasted the code from the sample theme.php below. The culprit is the row after <!-- BEGIN catrow --> that contains the {CAT_ALBUMS} token. That is used when you have "Show first level album thumbnails in categories" set to yes in config.

If you are sure that you are not going to show the first level album thumbnails, and will be keeping that set to "no", you can copy and paste the code below into your theme.php and simply delete that row altogether. That's one way to solve this.

// HTML template for the category list
$template_cat_list = <<<EOT
<!-- BEGIN header -->
        <tr>
                <td class="tableh1" width="80%" align="left"><b>{CATEGORY}</b></td>
                <td class="tableh1" width="10%" align="center"><b>{ALBUMS}</b></td>
                <td class="tableh1" width="10%" align="center"><b>{PICTURES}</b></td>
        </tr>
<!-- END header -->
<!-- BEGIN catrow_noalb -->
        <tr>
                <td class="catrow_noalb" colspan="3"><table border="0"><tr><td align="left">{CAT_THUMB}</td><td align="left"><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td>
        </tr>
<!-- END catrow_noalb -->
<!-- BEGIN catrow -->
        <tr>
                <td class="catrow" align="left"><table border="0"><tr><td>{CAT_THUMB}</td><td><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td>
                <td class="catrow" align="center">{ALB_COUNT}</td>
                <td class="catrow" align="center">{PIC_COUNT}</td>
        </tr>
        <tr>
            <td class="tableb" colspan="3">{CAT_ALBUMS}</td>
        </tr>
<!-- END catrow -->
<!-- BEGIN footer -->
        <tr>
                <td colspan="3" class="tableh1" align="center"><span class="statlink"><b>{STATISTICS}</b></span></td>
        </tr>
<!-- END footer -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

[coderoyal]

Hey Blueiris!!!

That works! Pasting the corrected code into the themes.php files corrected the issue.

Thank you soo much for your help!!!!

I really appreciate it.

Sincerely,
Alan Owen