Changing Font Size for Image Description

[Gail]

Hello,

I am using Coppermine 1.4.9 and the Inkpot theme. I would like to change the size of the font for the Image title and description for these older eyes but I am unable to do so. I know how to change the font size for the thumbs (title and description). I have changed the table: 12px to 14px in the css file - this does change some of the areas but not the image title and description. I have searched this forum for a solution but to no avail. Sorry if there is a solution here and I have missed it.

I have changed different font sizes in the css file the last few evenings but I am unable to figure out what to change to get the desired results. Thanks for any help - it is greatly appreciated.

Gail

[Gizmo]

Try .thumb_title and .thumb_caption in the style.css file.

[Gail]

Hi Gizmo,

Thanks for your quick reply.

Try .thumb_title and .thumb_caption in the style.css file.

Yes, I had already changed those from 80% to 90% and it does change the size of the font under the thumbnail files - it is when I click on a thumbnail file and then the image shows (not the full size image) - the title and image description show here also under the image but in the smaller size font. This is the font size I would like to change if it is possible.

You can check out my Coppermine if you wish - http://www.homegail.com/coppermine/

Thanks.

Gail

[Gizmo]

Sorry, here's what you will have to do to change the test under the intermediate image. If you don't have $template_display_media in your theme.php file, copy it from the sample>theme.php and paste it into yours.

Code Select Expand


// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media" nowrap="nowrap">
                        <table cellspacing="2" cellpadding="0" class="imageborder">
                                <tr>
                                        <td align="center">
                                                {IMAGE}

                                        </td>
                                </tr>
                        </table>
                </td></tr>
                <tr><td>
                                                <table width="100%" cellspacing="2" cellpadding="0" class="tableb">
                                <tr>
                                        <td align="center">

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>





<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb"><center>
                                                {CAPTION}
                                        </center></td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;


For the title, find

Code Select Expand


                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>


replace with

Code Select Expand


                                <tr>
                                        <td class="tableb"><center><b><font size="14px">
                                                {TITLE}
                                       </font> </b></center></td>
                                </tr>


For the caption, find

Code Select Expand


                                <tr>
                                        <td class="tableb"><center>
                                                {CAPTION}
                                        </center></td>
                                </tr>


replace with

Code Select Expand


                                <tr>
                                        <td class="tableb"><center><font size="14px">
                                                {CAPTION}
                                        </font></center></td>
                                </tr>


You could also copy the tableb property in the style.css file and add a font size to the new property. Then change the tableb class for the above 2 sections with this new property. Something like

Code Select Expand


.tableb_intermed {
        font-size: 14px;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}


[Gail]

Hi Gizmo,

Sorry to be such a bother - I tried the first method and the font size was close to 1 inch!  Does it matter where I paste the HTML template code (for intermediate image display) in the theme.php file? The Inkpot theme does have all CORE items removed so I did have to copy and paste from the sample theme.php file. I am comfortable doing this method but really have no clue as to where to put the code. I wonder if this is the problem - why the font was so large when I tried this.

I don't fully understand the second method you suggested.

Thanks again for your reply.

[Gizmo]

Well, you did say you wanted it large. Did you try changing the font size? Change it to 12, 10, 9 or whatever suits your needs. Paste it right before the ?> at the end of the theme.php file. The other method I mentioned allows you to conrol the font size from the style.css file as it really should be but you still have to adjust the font to your needs.

[Gail]

Hi Gizmo,

I looked at your first method again - it didn't seem to matter what size I set the font to - the font was really quite large. I wasn't exaggerating when I said the size of the letters were close to 1 inch!

I read your second method again and had another look at the css file which is where I had made other changes. When I was looking at the file again, I noticed the following:

Code Select Expand

.tableb {
background: url(images/inkpotgold.jpg) #555500;
font-size: 110%;
font-weight: lighter;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
font-size: 10px;
}

I had seen this before but I had played around with the percentage value and it didn't seem to do any good. I had not seen the font-size: 10px at the bottom. I changed that to the 14px and the intermediate image title and description is now a larger size font. Problem solved. I can't tell you how many times I had looked at the css file before this evening.

I want to thank you again for all your help. The smaller size font was really bothering me - now I will know for next time if I edit another theme.

Gail

[Gizmo]

Glad to hear you have this monkey off your back however, there should only be one font-size specified so I suggest you delete one of them.

[Gail]

Hi,

I deleted the percentage value for the font size and left the font-size: 14px. All is well.

Thanks again.

Gail