Board index PBase HTML and Style Sheets stylesheets / background image

HTML and Style Sheets

stylesheets / background image

Customize your galleries.
russellledford
 
Posts: 3

stylesheets / background image

Post Tue Apr 08, 2008 5:00 pm


Can someone point me in a direction where i can locate stylesheets that i can LEAGALY copy and use for my galleries.

I was also wondering if there was a way to have one of my images as a background image? similar to what you would see on my space.

Russell Ledford

http://www.russellledford.com

dang
 
Posts: 3780

Re: stylesheets / background image

Post Tue Apr 08, 2008 5:45 pm


Sure, check this thread. You'll find several: viewtopic.php?f=7&t=36841

russellledford
 
Posts: 3

Re: stylesheets / background image

Post Wed Apr 09, 2008 1:10 am


Thanks Dang I am looking for something like the stone background but with a bit of a sophisticated look. Plus i want to put a background image in and lock it in place so that my galeries scroll over top of it. Any ideas? Oh and i know nothing about css or html honestly i dont know what css is.

dang
 
Posts: 3780

Re: stylesheets / background image

Post Wed Apr 09, 2008 4:05 am


First thing I always suggest is read through this thread, install free "Firefox" browser with web developer (links in thread) so you can easily
work on your sheets. It really makes working on them much faster, since you can view your changes in "real time" before you copy and add
it into your CSS bank: viewtopic.php?f=8&t=13408

Also, check Srijith's PBase Wiki (link at the bottom of my posts) for more sheets, and tips. Pretty much everything I've learned has come
from these sources. So thanks go to the original style guru's Srijith, Arjun, Matias, & Olaf for sharing so much.

Now, with that said... here's a sheet I've modified over time that you're welcome to use, and can be seen here: http://www.pbase.com/dang/white
The background image can be changed if wanted, and position moved as you need. Just change the image url, and position to left, bottom, center or whatever. If you use a small image you want to cover the entire background, change "no-repeat: to "repeat". If using one large image, try to pick something you can use with minimum kilobytes to keep download times shorter.

Since it's in a "fixed" position, the thumbnails and text scroll over the top of the image as you're wanting. Where you see "background: #;" you can modify
it by adding a color number, or remove the line. Left as is, or removed it's transparent. If you don't care for the thumbnail movements, play with the padding
in these sections of the thumbnail area "margin-bottom: -50px; padding-top:15px;" . You'll notice they vary in the thumbnail "hover" section.

I hope this gets you started, it's a lot of enjoyment once you see how simple it is. And if you have any specific questions on changing the sheet which you can't figure out, let me know.
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:  #CFB367;
text-decoration: none;
font-weight: bold;
}
a:hover {
        color:  #CFB367;
        text-decoration: underline;
}
a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active {
        border:  #CFB367 1px solid;
        margin-bottom: -50px;
        padding-top:15px;
        width: 172px;
        display: block;
        background:  #1F1F1F;
        height: 200px;
}
a.thumbnail:hover            {
        border:    1px solid;
        margin-bottom: -5px;
        padding-top:10px;
        width: 172px;
        display: block;
        background:  #000000;
        height: 200px;
}
td.thumbnail
{
   height: 280px;
}


body{
  background:  #000000;
  background-image: url(http://www.pbase.com/dang/image/72889799/original.jpg);
  background-position: top right;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
        border: 0px;
        color:  #CFB367;
        font: 12px verdana, Tahoma, Helvetica, sans-serif;
        font-weight: normal;
}
font {
        margin-left: 4px;
        margin-right: 4px;
        width: 160px;
        display: block;
        color:  #CFB367;
        font: 11px Verdana, Tahoma, Helvetica, sans-serif;
        letter-spacing: 0px;
}
h1, h2 {
        border:  #CFB367 3px 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:  #CFB367;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 10px;
        text-align: right;
        height: 21px;
        position: relative;
}

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

h3 {
        center;
        border-bottom:  #CFB367 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:  #002C4F;
        font-size: 10px;
        font-weight: bold;
        }

img{
        border:    1px none;
}
img.thumbnail {
        border:  #000000 1px solid;
        margin: 0px;
        padding: 0px;
        background:  #032F09;
        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:  #CFB367 1px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        display: block;
        background:  #;
}
td.message_body {
border-bottom: 1px solid      #CFB367;
}

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

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

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }


Board index PBase HTML and Style Sheets stylesheets / background image

Who is online

Users browsing this forum: No registered users and 2 guests