Board index PBase HTML and Style Sheets How do i produce a border round my photos in new script?

HTML and Style Sheets

How do i produce a border round my photos in new script?

Customize your galleries.
richardchapman
 
Posts: 14

How do i produce a border round my photos in new script?

Post Thu May 28, 2009 3:54 pm


I have noticed all the pbase scripts produce lovely borders around their images such as this photo:
Image

Whereas I cannot create nice borders for my photo links like this:
Image

How do i create a simple coloured border like the pbase script for my own? with a dark grey shade such as #808080 as the image background image border?

This is the code already on my script.

<setvar color1 = #000000>
<setvar color2 = #F0F0F0>
<setvar color3 = #D2691E>
<setvar color4 = #dddddd>


DIV,BODY,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5 {
font-family: Lucida Sans;
color : <getvar color1>;
background : <getvar color2>;
}

A:link { color : <getvar color3>}
A:active { color : <getvar color3>}
A:visited { color : <getvar color3>}
A:hover { color : <getvar color3>}

.caption {
font-size : 9pt;
color : <getvar color4>;
font-style : italic;
}

How do i add the new code onto it?

I would be really grateful for any help !

Thanks!!!!!

mangoman
 
Posts: 75

Re: How do i produce a border round my photos in new script?

Post Thu May 28, 2009 6:45 pm


I think the easiest way is to simply steal a style sheet that you like. Honestly! I'm a software professional and trying to debug CSS code can turn you prematurely gray. Especially if you throw a few different browsers into the stew.

I stole my CSS from some other pbase member (thanks, whoever you were!), then tweaked it slightly. It's based on the webdev sample pbase style sheet. It seems to work on both IE and Firefox, and does have the border effect.

But once you find one you like then it's a relatively easy matter to modify fonts, colors, that sort of stuff, without having to make a fundamental change. Pbase makes it easy since you can have more than one style sheet for your pages, so you can experiment on one gallery without affecting everything else.

Good luck!

dougj
 
Posts: 2276

Re: How do i produce a border round my photos in new script?

Post Fri May 29, 2009 5:25 am


Richard, you can check in the 2 stickies in this forum, they have some good tips and tutorials. Alternatively, if you see a member's gallery that has a nice style sheet, send the person a PM and ask if you can use their code / style sheet. The person might also help you with some questions.

richardchapman
 
Posts: 14

Re: How do i produce a border round my photos in new script?

Post Sat May 30, 2009 12:41 am


I am still stuck and confused what to do...?

Can somebody give me a difinitive answer or code I can add to my script?

Sorry I am new to this so I am confused!

Thanks

dougj
 
Posts: 2276

Re: How do i produce a border round my photos in new script?

Post Sat May 30, 2009 1:21 am


I think I understand. The way a web page appears is controlled by HTML code and cascading style sheets (CSS). There is no need to get into HTML for what you want to do.

PBase galleries, the profile page, etc. can use different CSS and in the examples that you provided, 2 different CSS are used. The choice of which CSS will be used is made by editing either the gallery or root gallery, the root gallery is the one that you're interested in. Go to your main gallery page, select 'edit root gallery' on the top of the page, when the edit page opens go to the section titled 'style sheet' and select 'alexc' from the pull down menu, this is the same one you are using in the first example. Click on 'Update Gallery' and you're done. Good luck!

dang
 
Posts: 3780

Re: How do i produce a border round my photos in new script?

Post Sat May 30, 2009 2:48 am


Hi Richard,
To add to what Doug said, you'll need to add extra code within your CSS. Try this, and make adjustments as needed. It's a quick update to your existing ROOT style sheet CSS, so you can compare how changes were made toward the bottom of the code to get you started:
Code: Select all
DIV,BODY,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5 {
  font-family: Lucida Sans;
  color :  #000000;
  background :  #F0F0F0;
}

A:link { color :  #D2691E}
A:active { color :  #D2691E}
A:visited { color :  #D2691E}
A:hover { color :  #D2691E}#


.caption {
  font-size : 5pt;
  color :  #000000;
  font-style : italic;
}

.title {
  font-size : 18pt;
  color :  #000000;
  font-style : normal;

}
.galleryheader
  font-size : 18pt;
  color :  #000000;
  font-style : normal;

IMG.thumbnail {
  border-style :  solid;

}
a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active
   {
        border:   solid;
        margin-bottom: -55px;
        padding-top:15px;
        padding-left:10px;
        padding-right:10px;
        width: 192px;
        display: block;
        background:  #ffffff;
        height: 220px;
   }
   a.thumbnail:hover            {
        margin-bottom: -55px;
        padding-top:15px;
        padding-left:10px;
        padding-right:10px;
        width: 192px;
        display: block;
        background:  #FFE9CF;
        height: 220px;
}
td.thumbnail
{
   height: 240px;
   width:  192px;
}


When you go to your Root Gallery Edit Page, click the link to "edit style sheet" and make a new one by scrolling to the bottom of the list for the link. Name it anything you want, then replace the code in the edit box with the above code. Click update, when the screen refreshes choose the new style from the drop down list and update again.

Hope this helps.



Board index PBase HTML and Style Sheets How do i produce a border round my photos in new script?

Who is online

Users browsing this forum: No registered users and 2 guests