Board index PBase HTML and Style Sheets Creating uniform look for all galleries

HTML and Style Sheets

Creating uniform look for all galleries

Customize your galleries.
tmb_studios
 
Posts: 5

Creating uniform look for all galleries

Post Wed Jun 24, 2009 12:18 pm


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.... :wink:

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: :shock:

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
 
Posts: 3780

Re: Creating uniform look for all galleries

Post Thu Jun 25, 2009 9:10 am


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
 
Posts: 5

Re: Creating uniform look for all galleries

Post Sat Jun 27, 2009 11:33 am


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

tmb_studios
 
Posts: 5

Re: Creating uniform look for all galleries

Post Sat Jun 27, 2009 10:19 pm


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
 
Posts: 3780

Re: Creating uniform look for all galleries

Post Sun Jun 28, 2009 1:22 pm


tmb_studios wrote: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:

Image

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
 
Posts: 5

Re: Creating uniform look for all galleries

Post Sun Jun 28, 2009 4:57 pm


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

tmb_studios
 
Posts: 5

Re: Creating uniform look for all galleries

Post Wed Jul 01, 2009 1:13 pm


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.


Board index PBase HTML and Style Sheets Creating uniform look for all galleries

Who is online

Users browsing this forum: No registered users and 2 guests

cron