thumbnail title

[mattywalsh]

hey guys - is there anyway to format ONLY the title under a thumbnail? I can get at it using 'b' (bold), but that also is spread around the page and seems like bad form.

Right now I have it just using img.thumbnail, but that also affects the thumbnail itself...


I have 90% of the effect here:
http://www.pbase.com/mattywalsh/cjw

but if possible, I'd like to get rid of the 'fuzz' that the glow puts on the thumbnail...

thanks- matt

[ilanphoto]

Try something like this

FONT {
font-size : 10pt;
color : black;
font-style : italic;
font-weight: bold;
}

The font definition is done in the general definition but can be done here as well

HTH
Ilan

[ilanphoto]

Oh and I just learnt something new, if it is a gallery then it is the b parameter

[mattywalsh]

how does using <font> work? wouldn't that apply to most everything on the page?

I guess it would be good if pbase added a new class to allow operations on the gallery titles.. maybe title or something

(e.g. thumbnail.title{ })

[ilanphoto]

I'll try and answer as best I can
I am not using HTML I am using the CSS files so I can't really answer your question take a look at any of my galleries or any other gallery you fancy right click and view source. You have all the definitions there. I found a lot of them by pure trial and error.
Your description box is very limited in size so adding the HTML code there is not such a good idea, moreover, with the CSS you can control many galleries with the same file, works quite nicely once you get the hang of it

HTH
If not feel free to ask I am self trained (last two weeks) so my answers are experience based not knowledge based

Ilan

[ilanphoto]

Take a look at this chain http://forum.pbase.com/viewtopic.php?t=2432
webdev has posted some links to tutorials
Take a look they will give you a good starting point

[mattywalsh]

thanks for the link! like you, i've become comfortable coding CSS (see original post), but i'm confused about your suggestion..

if i replace this:

td.thumbnail {
color:#FFFFFF;
filter: progid:DXImageTransform.Microsoft.Glow(
color=#003366,
strength=1);

with this:
font {
color:#FFFFFF;
filter: progid:DXImageTransform.Microsoft.Glow(
color=#003366,
strength=1);

it no longer works? (meaning that although the glow is gone from around the thumbnail, it's also no longer around the gallery title)

[srijith]

hey guys - is there anyway to format ONLY the title under a thumbnail? I can get at it using 'b' (bold), but that also is spread around the page and seems like bad form.

Right now I have it just using img.thumbnail, but that also affects the thumbnail itself...


I have 90% of the effect here:
http://www.pbase.com/mattywalsh/cjw

but if possible, I'd like to get rid of the 'fuzz' that the glow puts on the thumbnail...

thanks- matt

This works!
Replace -

Code: Select all

/* title under thumbnail's representing galleries (links) */
td.thumbnail{
        color:#FFFFFF;
        filter: progid:DXImageTransform.Microsoft.Glow(
             color=#003366,
             strength=1);
}


with -

Code: Select all

/* title under thumbnail's representing galleries (links) */
div.thumbnails b{
        color:#FFFFFF;
        filter: progid:DXImageTransform.Microsoft.Glow(
             color=#003366,
             strength=1);
}


To isolate the specific part of the thumbnail, find out the HTML tag that surrounds it (<b>) and the go higher up to find the div that encloses the whole section (thumbnails).

[mattywalsh]

ahhh!!! that makes total sense - thanks again!

[mattywalsh]

hmmm - ok, so that didn't seem to work .. any ideas?

I've tried both this:

Code: Select all

/* title under thumbnail's representing galleries (links) */
div.thumbnails.b{
        color:#FFFFFF;
        filter: progid:DXImageTransform.Microsoft.Glow(
             color=#003366,
             strength=1);
}


and this:

Code: Select all

/* title under thumbnail's representing galleries (links) */
div.thumbnails b{
        color:#FFFFFF;
        filter: progid:DXImageTransform.Microsoft.Glow(
             color=#003366,
             strength=1);
}


and even this:

Code: Select all

/* title under thumbnail's representing galleries (links) */
td.thumbnails.b{
        color:#FFFFFF;
        filter: progid:DXImageTransform.Microsoft.Glow(
             color=#003366,
             strength=1);
}


[srijith]

Hm.. I don't think I can help you much with this because I am not good at M$ specific filters! The theory I explianed is correct. To check that, try changing

Code: Select all

color:#FFFFFF;


to

Code: Select all

background:#FF0000;


You will see that the background of just the text changes to red. This means that it is zooming into the required portion. Looks like something specific to do with M$ filters is creating the problem.

Also in http://msdn.microsoft.com/library/defau ... s/glow.asp
if you look at the code segment given as examle towards the bottom of the page

Code: Select all

<STYLE>
   DIV.aFilter {
    filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5);
    width: 150px;}
</STYLE>

<DIV CLASS="aFilter">
Glowing Text
</DIV>


If you change that to

Code: Select all

<STYLE>
   DIV.aFilter {
    filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5);
}
</STYLE>

<DIV CLASS="aFilter">
Glowing Text
</DIV>


i.e just remove "width:150px;" the effect fails!

[mattywalsh]

haahaha - god - stupid directX

ok - well that's good to know - at least you figured out the problem for me! I'll try getting rid of the M$ specific filter and see how that works out....

thanks again srijith!