new default stylesheet: webdev

[slug]

there's a new default stylesheet to choose from called webdev.

contributed by Pim Rijpsma at http://www.pbase.com/webdev

it looks very nice as is, and might be a good one to copy and modify because it's well designed and uses various css tricks.

btw, if you have never tried a stylesheet for your gallery, go now, edit your root gallery, select webdev from the popup, update.
then go view your gallery. it will look much nicer.

-slug

[twro]

How does one copy and modify one of the existing style sheets? I don't see where this is done. Thanks.

[slug]

there's not yet a super easy way.
intend to modify the New CSS form at some point, so you can choose a stylesheet to start with instead of it always starting with that simple default.

but until then, and even after then..
if you see a page with a stylesheet you like,
use your browser's View Source option to view the html for that page.

you'll see something like:

Code: Select all

<style type="text/css">
<!--
DIV,BODY,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5 {
  font-family: arial,helvetica,sans-serif;
  color : #888888;
  background : black;
}

A:link { color : #5865e1}
A:active { color : #d5ae83}
A:visited { color : #5068e3}
A:hover { color : #5b80b7}

.caption {
  font-size : 9pt;
  color : #dddddd;
  font-style : italic;
}
BODY { margin-top: 0px;}
HR { position : relative;}

-->
</style>


you need to copy and paste everything between the

Code: Select all

<-- and -->


and you can leave those last two lines off too.
pbase adds them automatically to fix certain evil things people do to stylesheets.

so copy the following:

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: arial,helvetica,sans-serif;
  color : #888888;
  background : black;
}

A:link { color : #5865e1}
A:active { color : #d5ae83}
A:visited { color : #5068e3}
A:hover { color : #5b80b7}

.caption {
  font-size : 9pt;
  color : #dddddd;
  font-style : italic;
}


now, go create a new stylesheet, at http://www.pbase.com/css (you can follow the link from the edit gallery page)
then paste in what you copied.

now you have your own copy of that stylesheet which you can modify however you like.

some more info about stylesheets at http://www.pbase.com/help/css
and http://www.pbase.com/help/css_classes

also view the default stylesheets in action at http://www.pbase.com/stylesheets

-slug

[edr]

Slug,
I just tried the webdev style sheet and must give it a Thumbs Up ! ! ! I feel that it adds to the presentation of the album... Thanks...Ed...

[puja]

I think it really rocks! CONGRATS!

[srijith]

it looks very nice as is, and might be a good one to copy and modify because it's well designed and uses various css tricks.

Sadly, not a valid CSS! -> http://jigsaw.w3.org/css-validator/validator?uri=http://www.pbase.com/webdev

[francist]

The new stylesheet is superb and I have adopted it at once . Congratulations and heartfelt thanks to Pim for offering it to all pbase users.
I got a message that it does not display correctly on Netscape... Anyone could confirm this ? Perhaps Pim can fix this ?
Best
francis

[srijith]

I got a message that it does not display correctly on Netscape... Anyone could confirm this ? Perhaps Pim can fix this ?
Best
francis

I can confirm. In Mozilla Firebird and Opera, the opacity trick does not work. Neither does the blue-border-on-hover trick. Netscape browsers too since they use the Mozilla rendering engine. The opacity does not work because the CSS uses an IE specific trick "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=x);". This will not work in Netscape and Opera. There is no workaround, as far as I know. I am a bit stumped as to why the hover border:blue is not working.

[slug]

the opacity trick doesn't work on any of my usual browsers (safari,konqueror but it doesn't break them either.
does that stylesheet break netscape or any other browsers, or do those features simply not work?
if it breaks anything, it probably needs to be changed.

-slug

[srijith]

does that stylesheet break netscape or any other browsers, or do those features simply not work?
if it breaks anything, it probably needs to be changed.
-slug

I think the CSS ignore all IE specific details. So I don't think it breaks anything, just doesn't work.

[mikelly]

does that stylesheet break netscape or any other browsers, or do those features simply not work?
if it breaks anything, it probably needs to be changed.
-slug

I think the CSS ignore all IE specific details. So I don't think it breaks anything, just doesn't work.

I have begun the process of making my pages look "customized" for the Netscape, Opera and Mozilla users. My first step is to add a border to the thumbnails and images that will be displayed. My second step will be to group the photos in each gallery so that they complement each other. These browsers simply ignore the IE features.

I'm not finished, but take a look at what I've done (so far).
http://www.pbase.com/mikelly

Mike

[srijith]

These browsers simply ignore the IE features.

Mike

I am sure some purists would be fuming reading that. It is not that these browsers are ignoring CSS standards. It is that IE is not following web standards and as usual bringing along their own version of what the world should be looking like.

[mikelly]

These browsers simply ignore the IE features.

Mike

I am sure some purists would be fuming reading that. It is not that these browsers are ignoring CSS standards. It is that IE is not following web standards and as usual bringing along their own version of what the world should be looking like.

I agree with you. I simply failed to state it correctly. (however, if my memory is correct, Netscape did the same thing with html when it controlled the majority of the browser market.)

"The World According to Microsoft", by Bill Gates vbg

Mike

[srijith]

Don't want to start a browser flame war Do let us know when you finish. In particular I will be very impressed if you can get the opaque-transparent trick to work in Netscape/Opera without Javascript.

[valsharp]

The 'opacity' property is part of the CSS3 Recommendation [1], and in anticipation of this Mozilla introduced the '-moz-opacity' property.


[1] <http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency>


--
Val