Custom Frames

[dksweet]

How do I create custom frames in galleries.

[canadiancraig]

Any chance you can be more specific about what you mean exactly? Are you talking about a simple, even border around the photo itself or something more elaborate?

[ilanphoto]

Find a page ypu like, and take a look at the source, if you need any specific help you can ask then and we will try to point you in the right direction.

[dksweet]

Find a page ypu like, and take a look at the source, if you need any specific help you can ask then and we will try to point you in the right direction.

I don't have a specific style in mind, just wondered how it was done.
For instance, in your gallery"People in Dizengoff St.", Image 'Tatoo9133.jpg'
Thanks for any help you can give me.

[dksweet]

Any chance you can be more specific about what you mean exactly? Are you talking about a simple, even border around the photo itself or something more elaborate?

Nothing specific in mind, but have seen some pretty elaborate frames in some galleries. See through, 3-D, shadow, etc. Just wondered how it was done, don't see an option for it in PBase.

Thanks for any help you can give.

[ilanphoto]

OK
Now I understand

That frame was done in Photoshop a long time ago I am sure I used an action I found somewhere on the internet. I am not sure I can repeat that again
If you have PS look for frame actions there are a lot of them for free download

There are also some free software that deal only with frames, I can't remember which but I do know that they exist

HTH
Ilan

[mattywalsh]

hey dk -

is this the kind of frame/shadow that you're talking about?
http://www.pbase.com/image/23291355/medium

The first thing you'll need to do is to create your own custom style sheet...

The easiest thing to do is to find a gallery that you like, right click and select view source - then you highlight and copy the top of the page (the CSS).. The CSS starts on the line below this bit:

Code: Select all


<style type="text/css">
<!--

and then ends just above this bit:

Code: Select all


-->
</style>

Once you copy that, go to your galleries, edit a gallery, edit CSS's, and then create new. then paste in that source...

Once you have a style sheet, the part of the CSS that affects the thumbnail images is this part:

Code: Select all

img.thumbnail{
        border: 2px outset #666688;
   filter:progid:DXImageTransform.Microsoft.Shadow(
                 color=#111111,Direction=155,Strength=3);
}

and then there's a seperate part to control the full-sized image itself:

Code: Select all

img.display
   border: 2px outset #666688;
   filter:progid:DXImageTransform.Microsoft.Shadow(
                 color=#111111,Direction=155,Strength=6);
}

here's a great link to bookmark when you're playing around with your CSS - it's got all the different options for each thing - all the different border types that you can use, etc:
http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm

also - for some of the more interesting stuff like shadows, glow, etc:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/reference.asp

I've pasted in one of my CSS's for your reference:

Code: Select all

/*================= BODY ==============================*/
body{   background: rgb(145, 145, 145);
        padding: 6px;
        display: block;
        width: 97%;
        color: #FFFFFF;
        font: 13px Verdana, Tahoma, Helvetica;
        letter-spacing: 0px;
        background-repeat: repeat;
        background-attachment: scroll;
        background-image: url(
http://mikoga.image.pbase.com/u39/mattywalsh/small/25762873.grey_tint.jpg );
}

/*================ LINKS ================================*/
a,b,a:link,a:active{
           color: #EEEEFF;
           font-face: Verdana, Tahoma;
           font-size: 15px;
           font-weight: normal;}
a:visited{ color: #dddddd;}
a:hover  { color: #0088FF;}



/*==================== Main Title ============================*/
/*h2:first-letter {
        text-transform: lowercase;       
        font-size: 36px;
        font-variant: normal;
        font-style: normal;    }*/

h2 {    width: 100%;
        /*font-variant: small-caps ;*/
        line-height: 60px;
        font-size: 28px;
        font-style: italic;
        font-weight: bold;
        text-align: Center;
        font-face: Arial;
        position: relative;
        color: #ffffff;
        filter:progid:DXImageTransform.Microsoft.Glow(
                 color=#0044dd, strength=2),
               progid:DXImageTransform.Microsoft.Shadow(
                 color=#222222, Direction=155,Strength=5);
}

/*================= Main Text Description ====================*/
div.galleryheader{
        width: 100%;
        font-height: 16px;
        text-align: left;
        position: relative;
        color: #ffffff;
        filter:glow( color=#001122, strength=1),
               progid:DXImageTransform.Microsoft.Shadow(
                color=#333333, Direction=155, Strength=3);
}

/*============= Thumbnail Titles =================*/
td.thumbnail {
        font-height: 20px;
        text-align: center;
        color: #ffffff;
        filter:progid:DXImageTransform.Microsoft.Shadow(
                color=#000000, Direction=155, Strength=3);
}

/*================ Thumbnail Images ====================*/
img.thumbnail {
        border: 2px outset #666688;
   filter:progid:DXImageTransform.Microsoft.Shadow(
                 color=#111111,Direction=155,Strength=3);
}

/*====================== Comments ====================*/
td.message_body{
        padding: 8px;
        border: 2px outset #666688;
        filter: progid:DXImageTransform.Microsoft.Shadow(
             color=#000000,Direction=155,Strength=3);
        display: block;
        background-repeat: repeat;
        background-attachment: fixed;
        background-image: url(
http://mikopi.image.pbase.com/u39/mattywalsh/small/25762708.brompton1.jpg);
}
p.message_body {
        margin: 2px 2px 2px 2px;
        font: 14px #FFFFFF Verdana, Tahoma, Helvetica;
}

/*================ Full Photo ====================*/
img.display {
   border: 2px outset #666688;
   filter:progid:DXImageTransform.Microsoft.Shadow(
                 color=#111111,Direction=155,Strength=6);
}

/*zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz*/
/*-----------------      END OF CSS     ------------------*/
/*zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz*/


[/url]


hope that helps!
-Matt

[ubik]

I
Its almost all said, mattywalsh gave you a great help.
In fact, the easy way is use an existing Style Sheet & change it to you requirments....
You can use mine if you wish and "fine Tunning" as your "flavor"
Enjoy