WEBDEV Style Sheet

[tsctsc]

When using the 'webdev' style sheet, how do you make it so the thumbnails are not dark, and de-saturated?

[dang]

Change the opacity in this section, if I recall right. You'll notice it's 100% with mouse over, which is what makes the change.

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);

[tsctsc]

I did the modification.

You can download the CSS Code here: http://cypress.homeunix.org/tscheese/pbase_stuff/

All you have to do, to make this modification is, copy the code in the CSS file above. Then go to edit style sheets, create a new style and paste the code into the new style sheet. Save your style sheet, and you're in buisness.


Regards,

-Tanner

[crespoide]

It works very fine, thanks for the link, Tanner.

[slh]

Hi,

I'm using the code kindly provided by tsctsc, which looks lovely as long as I turn on the option to display titles on my thumbnails. I don't want to display the titles though! And without them the bottom of the boxes are cut off.... any thoughts? I don't really know much about CSS!

Thanks : )

[tsctsc]

Hi,

I'm using the code kindly provided by tsctsc, which looks lovely as long as I turn on the option to display titles on my thumbnails. I don't want to display the titles though! And without them the bottom of the boxes are cut off.... any thoughts? I don't really know much about CSS!

Thanks : )

I just checked it out.... I really don't know what is happening there... I'm going to double check my CSS code, in case I accidentally editied somethng else besides the opacity of the thumbnails..

-Tanner

[tsctsc]

Hi,

I'm using the code kindly provided by tsctsc, which looks lovely as long as I turn on the option to display titles on my thumbnails. I don't want to display the titles though! And without them the bottom of the boxes are cut off.... any thoughts? I don't really know much about CSS!

Thanks : )

I just checked it out.... I really don't know what is happening there... I'm going to double check my CSS code, in case I accidentally editied somethng else besides the opacity of the thumbnails..

-Tanner

I just went through the CSS that I edited.... The only thing I changed was the opacity of the thumbnails.

I also tried it with the WEBDEV stylesheet provided by PBase; it does the same thing.

You might want to try looking at the PBase Wiki, if you haven't already.

Regards,

-Tanner

[dang]

In your gallery edit page, try playing with the settings to allow more space between your thumbnails:

cell spacing minimum pixels between thumbnails
cell padding pixels of space around thumbnails

[jchambers]

Hate to bring up an old thread, but I'd also love to keep the brightness at 100% whether the mouse is over the thumbnail or not. Any chance of a reposting of that CSS Code there?

I did the modification.

You can download the CSS Code here: http://cypress.homeunix.org/tscheese/pbase_stuff/

All you have to do, to make this modification is, copy the code in the CSS file above. Then go to edit style sheets, create a new style and paste the code into the new style sheet. Save your style sheet, and you're in buisness.


Regards,

-Tanner

[dang]

No Problem...

Code: Select all

/*
   ::::: StyleSheet Information ::::::
   :: ------------------------------::
   :: PBase.com Style Version 1.0   ::
   :: by Webdev - Pim Rijpsma - NL  ::
   :: http://www.pbase.com/webdev/  ::
   :: ------------------------------::
   :::::::::::::::::::::::::::::::::::
*/
a, a:link,a:visited,a:active {
        color: rgb(204, 204, 255);
        text-decoration: none;
}
a:hover {
        color: rgb(95, 121, 216);
        text-decoration: none;
}
a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
        border: rgb(0, 0, 0) 1px solid;
        margin-bottom: -45px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background: rgb(35, 35, 35);
        height: 197px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
a.td.thumbnail:hover            {
        border: rgb(95, 121, 216) 1px solid;
        margin-bottom: -45px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background: rgb(32, 32, 32);
        height: 197px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
body{
        margin-bottom: 20px;
        margin-top: 0px;
        background: rgb(45, 45, 45);
}
div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
        border: 0px;
        color: rgb(91, 91, 101);
        font: 12px verdana, arial, sans-serif;
}
font {
        margin-left: 4px;
        margin-right: 4px;
        width: 170px;
        display: block;
        color: rgb(91, 91, 101);
        font: 9px Verdana, Tahoma, Helvetica, sans-serif;
        letter-spacing: 0px;
}
h1, h2 {
        border: rgb(95, 121, 216) 1px dotted;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        margin-bottom: 1em;
        margin-left: -10px;
        margin-right: 0px;
        padding: 5px;
        width: 100%;
        display: block;
        background: rgb(0, 0, 0);
        color: rgb(204, 204, 255);
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: right;
        height: 21px;
        position: relative;
        filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D');
}
h3 {
        border-bottom: rgb(0, 0, 0) 1px dotted;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        padding: 2px;
        width: 400px;
        display: block;
        background: rgb(40, 40, 40);
        color: rgb(91, 91, 101);
        font: 12px;
        font-weight: normal;
        letter-spacing: 0px;
        text-align: center;
}
h5 {
        padding-left: 2px;
        width: 150px;
        display: block;
        color: rgb(204, 204, 255);
        font-size: 12px;
        font-weight: normal;
        filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D');
}
img{
        border: rgb(0, 0, 0) 1px none;
}
img.thumbnail {
        border: rgb(0, 0, 0) 1px solid;
        margin: 0px;
        padding: 0px;
        background: rgb(45, 45, 45);
        vertical-align: middle;
}input {
        border: rgb(0, 0, 0) 1px solid;
}
table.thumbnail {
        width: 10%;
}
td {
        border: 1px none;
        background: none;
        border-collapse: collapse;
        empty-cells: show;
}
td.message_body {
        border-bottom: rgb(0, 0, 0) 1px dotted;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        display: block;
        background: rgb(40, 40, 40);
}
.caption {
        color: rgb(95, 121, 216);
        font-size: 12px Verdana, Tahoma, Helvetica, sans-serif;
        font-style: italic;
}
.display {
        border: rgb(0, 0, 0) 1px solid;
        margin-top: 1em;
        background: rgb(0, 0, 0);
        filter:
progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
}
.lid{
        background: rgb(55, 55, 55);
        color: rgb(102, 102, 102);
        font: 11px Verdana, Tahoma, Helvetica, sans-serif;
        text-decoration: none;
}
.message_body {
        margin: 5px 5px 10px;
        color: rgb(91, 91, 101);
        font: 10px Verdana, Tahoma, Helvetica, sans-serif;
}
.sb{
        background: rgb(91, 91, 101);
        color: rgb(204, 204, 255);
        font: 12px Verdana, Tahoma, Helvetica, sans-serif;
        text-decoration: none;
}



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

I haven't checked this code using IE, and firefox doesn't show the darkened thumbs... so use at own risk.
If you need to resize the thumbnail boxes, it's done in this section by playing with the height & width px sizes:

Code: Select all

a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
        border: rgb(0, 0, 0) 1px solid;
        margin-bottom: -45px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background: rgb(35, 35, 35);
        height: 197px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

Hope this helps.

[jchambers]

Hi Dang,

Thanks for your help. It works a treat in IE. Slight problem in firefox though as it doesn't have the box around the thumbnail any more. (See link below) Any idea why?

Many thanks,
http://www.pbase.com/jchambers/simplicity

[dang]

Hi Jo,
Well, as far as I know it didn't before making the change if you're using a newer version of Firefox. I copied the code directly from the Pbase Sample gallery, and it didn't with mine anyway. You can see here: http://www.pbase.com/stylesheets/webdev Of course, you might try changing the code to correct the problem, but good luck.

Here's why: IE isn't standard, and gives the most problems reading code... I'd guess this style sheet was written using it, and the reason Firefox leaves the boxes off.
Maybe someone else knows a quick fix, but I personally wouldn't bother since there's so many nice sheets available for use written by members. This style sheet can cause problems in slide show mode due to the dx transform which is IE specific. If you notice white specks in your photos using IE, be sure the background behind the image is black to avoid the problem. Just thought I'd mention it since it comes up occasionally. Of course, you might just try removing the dx line entirely, and see if it helps. Great thing about Firefox is you can try it without affecting the actual code via edit mode.

If you need links to members who have sheets available for use, post the question in a new thread if you can't find them by searching. There's several threads though, so shouldn't be difficult. And the Pbase Wiki is a great starting point too.

[jchambers]

Thanks Dang for the reply.

I'll see what I can do with it. Cheers

[doady]

The style sheets I use are heavily modified versions of the WEBDEV style sheet that removes the darkening of thumbnails. To make the style sheet work properly in both Internet Explorer and Firefox, I had to make another version of the class "a.thumbnail" for Firefox. Probably even more versions of "a.thumbnail" will have to be written to make it work in Opera, Safari, etc. but I have not tested it out.

Here an excerpt of code from one of my style sheet, which I use for the galleries. It shows both versions of "a.thumbnail" in the same style sheet.

Code: Select all

a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active {
border: #000000 1px solid;
margin-bottom: -19px;
padding-top: 7px;
width: 185px;
display: block;
background: #ffffff;
height: 183px;
}
a.thumbnail:hover            {
border: #000000 3px solid;
margin-bottom: -19px;
padding-top: 7px;
width: 181px;
display: block;
background: #ffffff;
height: 179px;
}

a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: #000000 1px solid;
margin-bottom: -38px;
padding-top: 7px;
width: 185px;
display: block;
background: #ffffff;
height: 180px;
}

a.td.thumbnail:hover            {
border: #000000 3px solid;
margin-bottom: -38px;
padding-top: 7px;
width: 185px;
display: block;
background: #ffffff;
height: 180px;
}