Mark, since your question was different from the original thread, I decided to tease it out into a new thread. Over the last few days a few others have asked similar questions. Since many of you are using PBASE to display (that is when it's not being finicky) hopefully this will be of help and not just a bunch of jibberish -- actually customizing PBASE isn't that difficult with a few pointers in the right direction. This first post will focus on borders, the next (when I get a chance) will focus on customizing background patterns or images as backgrounds.Mark L. said:
Creating Borders in PBASE
A border around pictures is a function of a Cascading Style Sheet or in computer lingo referred to as CSS. You can easily create a custom CSS within the 'Edit Gallery' section of the PBASE web applicaton. Since you have already created a custom style for your galleries with a unique background color, I'll keep my focus only on borders. Here is my example of borders using a cascading style sheet:
http://www.pbase.com/charette/yosemite/
http://www.pbase.com/charette/sunsets_on_the_james/
What makes borders a little challenging is that the default code that is generated when you create a custom style sheet does not include the lines of code needed for borders. Not a problem though, you will just have to insert the following lines of code at the end of your style sheet to create the border:
IMG.thumbnail {
border-style : inset;
border-width : 3pt;
border-color : #6666cc;
}
IMG.display {
border-style : inset;
border-width : 5pt;
border-color : #6666cc;
}
WHAT DOES THE CODE MEAN: The first group of code creates borders around the thumbnail display, while the second group of code creates the border around picture display.The three commands included in each grouping, control various aspects of the border.
1) Border-style: has several options: {border-style: dotted},{border-style: dashed}.{border-style: solid}, {border-style: double}, {border-style: groove}, {border-style: ridge},{border-style: inset}, and {border-style: outset}. I have selected the 'Inset' style for the Yosemite gallery and a solid white border in other galleries. The code for solid white would look like this:
IMG.thumbnail {
border-style : solide;
border-width : 3pt;
border-color : white;
}
2) Border-width: can be set to any point size depending on your preference. BTW, you can control the width of each part of the border if you really want to go crazy. For example:
{
border-style: ridge;
border-right-width: 10px
}
3) Border-Color: again is determined by your preference. I have set my color to a shade or two off from my background (e.g. bkgrnd=#333366.)
For more on the various CSS style command available, visit this excellent tutorial: http://www.w3schools.com/css/
Hope this helps, sorry to be long winded. -- LC
--
El-See ('cause LC and Leo were taken )
http://www.pbase.com/charette
If can contribute something positive to this forum then it is a small thing compared to all I have received. -- LC