Creating uniform look for all galleries

[tmb_studios]

I'm looking for a simple way to make all the pages in a pbase account appear the way the one linked to below does WITHOUT having to add the banner image to the description field on each and every gallery. I'm trying to set up an account for a client who will be uploading photos for HER clients to look at in non-public, password-protected galleries. I want to be able to set it up so she doesn't have to edit the gallery settings, just upload the photos. That's going to be hard enough for her - remembering to add the description would be too much to remember....

I set up a test account to see if I can make this work for the client, this is the look I'm going for:

http://www.pbase.com/tmb_studios/theschool

In this gallery, I've constructed the look by giving it a background color, and putting the banner image in the description field. If I could create a stylesheet that would do the same thing (background color and banner on top), where all the client had to do is remember to apply that style sheet, I think they could manage it. I attempted to make a style sheet and put in the banner as a background image, but it all went horribly wrong, as you can see in this gallery:

http://www.pbase.com/tmb_studios/water_damage

Also, I couldn't get it to do the banner as a background image, and also have the background color - which is somewhat important to this client.

[dang]

You need more control over the elements. Try this for your galleries style and make modifications as needed:

Code: Select all

/* --- simple code to hide the menu -- */
/* -- by arjun -- */
body table td a img { display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display,.display img {display:block;}
.thumbnails table,.thumbnails table img, .display,p.small{
display: inline;
body div.galleryheader table td a img {display:inline;}
}

a, a:link,a:visited,a:active {
color:  #3B3B3F;
text-decoration: none;
font-weight: bold;
}
a:hover {
        color:  #cccccc;
        text-decoration: underline;
}
a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active {
        border:  #ffffff 1px solid;
        margin-bottom: -50px;
        padding-top:15px;
        width: 172px;
        display: block;
        background:  #ffffff;
        height: 200px;
}
a.thumbnail:hover            {
        border:  #  1px solid;
        margin-bottom: -50px;
        padding-top:15px;
        width: 172px;
        display: block;
        background:  #ffffff;
        height: 200px;
}
td.thumbnail
{
   height: 280px;
}


body{
  background:  #ffffff;
  background-image: url(http://i.pbase.com/o6/82/919882/1/113992161.jbnlfrnB.banner4_pbase.jpg);
  background-position: top center; padding-top: 145px;
  background-repeat:no-repeat;
 
  text-align:center;
}

div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
        border: 0px;
        color:  #4F4F4F;
        font: 12px verdana, Tahoma, Helvetica, sans-serif;
        font-weight: normal;
}
font {
        margin-left: 4px;
        margin-right: 4px;
        width: 160px;
        display: block;
        color:  #4F4F4F;
        font: 11px Verdana, Tahoma, Helvetica, sans-serif;
        letter-spacing: 0px;
}
h1, h2 {
        border:  #ffffff 0px ridge;
        border-left: 1px none;
        border-right: 1px none;
        border-top: -7px none;
        margin-bottom: 1em;
        margin-left: -10px;
        margin-right: 0px;
        padding: 10px;
        width: 100%;
        display: block;
        background:  #;
        color:  #5A5A6F;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 10px;
        text-align: left;
        height: 21px;
        position: relative;
}

h2:first-letter
{
  color:  #5A5A6F;
  font-weight: bold;
  font-size: 24pt;
}

h3 {
        center;
        border-bottom:  #ffffff 3px ridge;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        padding: 2px;
        width: 400px;
        display: block;
        background:  #172D3F;
        color:  #4D95CF;
        font-size: 10px;
        font-weight: normal;
        letter-spacing: 0px;
        text-align: center;
}
h5 {
        padding-left: 2px;
        width: 120px;
        display: block;
        color:  #5A5A6F;
        font-size: 10px;
        font-weight: bold;
        }

img{
        border:    0px none;
}
img.thumbnail {
        border:  #000000 1px solid;
        margin: 0px;
        padding: 0px;
        background:  #ffffff;
        vertical-align: middle;
   }input {
        border:    1px solid;
}
table.thumbnail {
        width: 10%;
}
td {
        border: 1px none;
        background: none;
        border-collapse: collapse;
        empty-cells: show;
}
td.message_body {
        border-bottom:  #ffffff 1px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        display: block;
        background:  #ffffff;
}
td.message_body {
border-bottom: 1px solid      #5A5A6F;
}

.caption {
        color:  #5A5A6F;
        font-size: 11px Verdana, Tahoma, Helvetica, sans-serif;
        font-style: italic;
}
.title {
      color:  #5A5A6F;
        font-size: 12px Verdana, Tahoma, Helvetica, sans-serif;
        font-style: normal;
     
     background: #ffffff;
       
}
.display {
        border:  #5A5A6F 1px solid;
        margin-top: 1em;
        background:   ;
        }
.lid{
        background:  #;
        color:  #5A5A6F;
        font: 14px Verdana, Tahoma, Helvetica, sans-serif;
        text-decoration: none;
}
.message_body {
        margin: 5px 5px 10px;
        color:  #000000;
        font: 9px Verdana, Tahoma, Helvetica, sans-serif;
}

.sb{
        background:  #;
        color:  #000000;
        font: 10px Verdana, Tahoma, Helvetica, sans-serif;
        text-decoration: none;
}
.location{
       background: #ffffff;
       color: #000000;


For questions, please check this thread concerning installing & using Firefox:
viewtopic.php?f=8&t=13408

[tmb_studios]

Thanks Dang! I'll come back later and try this, let you know how I make out.

[tmb_studios]

Ok, so I pasted your code in there, and it looks great - perfect. Except.....I don't know how to get into the gallery to add pictures, or make changes, or anything, because the menu is gone for me logged in as well as for visitors. Is there a way around that?

http://www.pbase.com/tmb_studios/water_damage

[dang]

Ok, so I pasted your code in there, and it looks great - perfect. Except.....I don't know how to get into the gallery to add pictures, or make changes, or anything, because the menu is gone for me logged in as well as for visitors. Is there a way around that?
http://www.pbase.com/tmb_studios/water_damage

Never seems to fail that something will go wrong for one reason or another, and without having access to the gallery it could difficult to find sometimes. But, lets give it a shot....

First off, here's a screen shot of the exact code when used in one of my galleries, and as you can see the menu is below the banner:



The solution should be as follows:
You've left part of the old code in the style sheet at the top. Remove this section, click update and have a look:

Code: Select all

DIV,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5

If this doesn't do it, and assuming you haven't made other changes, try this...
1. Click your "Root Gallery Edit" link, then click the "advanced" tab toward the top. When the new page opens, add a check mark next to "subgalleries link to each other" and update.
2. Repeat in the gallery with the new style sheet. If you can't get into it, click this link: http://upload.pbase.com/edit_gallery/tm ... ter_damage

If this doesn't do it, click the edit link again. On the edit page look for "text color", and set it to black. Although this shouldn't over-ride the style sheet, we'll assume anything is possible.

One last note...
You had the banner "property url" posted, so I didn't know the browser bar url. You should use the browser bar url instead to avoid having it turn into a "Red X" later on. Occasionally Pbase moves photos between servers, and when this happens the image will go missing if linked improperly.

Hope this does it for you.

[tmb_studios]

Ah yes, that worked - the first suggestion, removing the part of the old CSS I left behind. Thanks for the help!

[tmb_studios]

One more question - is there any way to make the stylesheet I'm creating the default skin for all galleries, or for all sub-galleries under a specific gallery? Also,the gallery settings - no comments, voting, etc. Just trying to think of ways to make it easier for the client to set up their galleries.