New CSS based XHTML compliant themes

[Tarique Sani]

2B or not 2B - Demo http://tariquesani.net/?theme=2bornot2b Download: http://tariquesani.net/themes/2bornot2b.tar.gz 24Kb

Reynolds - Demo http://tariquesani.net/?theme=reynolds Download: http://tariquesani.net/themes/reynolds.tar.gz 24Kb

Notable Features:
Only the CSS is different between the two themes - Designers will better knowledge of CSS than me will be able to work wonders
The pages generated will be valid XHTML 1.0 Transitional if you use the code from devel CVS (or you can wait till the release of version 1.4)

P.S. These themes will not display the Theme and Lang picker drop-downs - this a part of deliberate design - if anyone wants to hack and add them - they are welcome to

[Burpee]

Great work... definitely gonna modify these to use them on my site.

It might also be a good idea to change the standard + and - in the sorting row we all know very well:

Code Select Expand


TITLE             +      -
FILE NAME +  -
DATE             +      -

with the characters
▲ filled vertical triangle               &# 9650;
▼ filled triangle pointing down          &# 9660;
(source: http://llizard.crosswinds.net/cwc/charactmap.html)

I do think this is set by the theme... right?

[Tarique Sani]

Quoting from the URL you posted

"geometric shapes

mathematical symbols . geometric shapes . Greek alphabet . card suits . more common extended characters

please note that these characters may not be displayed on some OS"

So the + and - stay

[Burpee]

Okay okay... but then at least put in the images/ascending.gif and images/descending.gif that come standardly along with coppermine. Who knows, those things could still prove a purpose! (are they even being used anywhere else??)

TITLE        (https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fcoppermine.sourceforge.net%2Fdemo%2Fimages%2Fascending.gif&hash=535653dff7727a6cc108e7c1189a496b153cb9e5)(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fcoppermine.sourceforge.net%2Fdemo%2Fimages%2Fdescending.gif&hash=8d05ed6e26cbe856297a5808d2a2854903bf07a6)
FILE NAME (https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fcoppermine.sourceforge.net%2Fdemo%2Fimages%2Fascending.gif&hash=535653dff7727a6cc108e7c1189a496b153cb9e5)(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fcoppermine.sourceforge.net%2Fdemo%2Fimages%2Fdescending.gif&hash=8d05ed6e26cbe856297a5808d2a2854903bf07a6)
DATE        (https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fcoppermine.sourceforge.net%2Fdemo%2Fimages%2Fascending.gif&hash=535653dff7727a6cc108e7c1189a496b153cb9e5)(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fcoppermine.sourceforge.net%2Fdemo%2Fimages%2Fdescending.gif&hash=8d05ed6e26cbe856297a5808d2a2854903bf07a6)

There's one thing I change as a constant thing whenever I get a theme from coppermine -- and that's those darn + and -'s...
In a world where everybody uses the arrows as an indicator for sorting, you guys just have to all use a + and a -?
I want people to recognize the meaning of a button in less than a second, so they won't have to think about what they're doing for very long..
But anyway... do as you please

[Joachim Müller]

the little arrows are being used in db_ecard.php right now, that's why I added them. Feel free to replace the +/- with the arrows on your install, we'll consider your proposal in the themes that come with coppermine for the future...

GauGau

[ahreno]

why do you have duplicate entries?

example:

line 637 .navmenu {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        color: #F6F364;

        font-size: 100%;

        font-weight: bold;

        background : #292929 ;

        border-style: none;

}


LINE 1335  .navmenu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #F6F364;
        font-size: 100%;
        font-weight: bold;
        background : #737A82 ;
        border-style: none;
}

[Tarique Sani]

why do you have duplicate entries?

Ugh - my bad - had to be be consolidated and removed.... never got around to doing it. do post it here if you get around to doing it

[cryogenic]

I'm currently using reynolds as the theme on my gallery, but cannot get it to validate for the LIFE of me... 2 errors are keeping it from valiidating and they appear to be from the empty cells. Here's the link to the validator results page: http://validator.w3.org/check?verbose=1&uri=http%3A//s94358842.onlinehome.us/gallery/index.php
and here's the URL for my actual gallery
http://cryogenic.doesntexist.org/gallery.
It's throwing up the following error: "end tag for "tr" which is not finished" for a closing tr tag. From looking at the source, it's outputting blank TR's with no TD's inside it, which is against xhtml spec. I have no clue why it's doing this because in the actual theme.php file, it makes the TR's and then puts TD's inside it which contain non-breaking spaces. For some reason it's being ignored, though.

EDIT: found the offending code...

Code Select Expand

<!-- BEGIN c_album_cell -->
<td width="{COL_WIDTH}%" height="100%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td colspan="3" height="1" valign="top" class="tableh2">
                        <a href="{ALB_LINK_TGT}" class="alblink"><b>{ALBUM_TITLE}</b></a>
                </td>
        </tr>
    ***    <tr> ***
   ***     </tr> ***
        <tr>
                <td align="center" height="100%" valign="middle" class="thumbnails">
                        <a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
                </td>
the asterisked lines need to be removed... after removing those, the page validated just fine. 

Now if I can just get rid of those hideous white filler boxes in my tables... Anyone have any ideas on that one?

[Tarique Sani]

Thanks the packages have been updated with your fix, the CSS has also been cleaned up a bit an probably also has the fix for those hideous white filler boxes in your tables

[cryogenic]

It took me a good hour or so to find that stupid piece of code in there! I couldn't quite figure out what part of the code corresponded to where I needed to look since there were so many tables in there... I eventually found that area on complete ACCIDENT, having scrolled down too far and saw it. I'll download the new packages to see if the cleaned up css helps matters any.   Thanks a million for the great theme, though. The other one just didn't quite look right, so I didn't bother trying to fix it.

EDIT: Still seeing the ugly white boxes there... My guess is that the "empty cells" are getting set to a white background instead of a transparent one. That's the only thing that I can see even possibly causing a problem.

[Tarique Sani]

The other one 2bornot2b has been designed for my personal site and looks good only on 1280x1024 with 32bit colours onwards BUT like I said only the CSS is different in the two.

Oh! BTW I fixed only Reynolds and not 2bornot2b

[edit]
Find maintable class and set the color as #eff3f6
[/edit]

[cryogenic]

I'm using reynolds anyway... I like it better as it fits in a LITTLE better with my existing theme for my blog.
I found the offending piece of code...

Code Select Expand


       <td width="50%" height="100%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td height="1" valign="top" class="tableh2">

                        <b>&nbsp;</b>
                </td></tr>

        <tr>
                <td width="100%" height="100%" valign="top" class="tableb_compact">
                        <b>&nbsp;</b>
                </td></tr>
       
        </table>
        </td>


I'm still trying to figure out what's wrong with it, though.

[cryogenic]

Just saw your edit... and yeah... maintable was set as pure white, which since there's no content, it gets shown. Changed the color to #eff3f6 and works perfectly now. Thanks! I couldn't be happier.

[Tarique Sani]

I'm using reynolds anyway... I like it better as it fits in a LITTLE better with my existing theme for my blog.

I have a matching WordPress theme if you would want - ask

[cryogenic]

Your CSS doesn't validate...
1) under #menu ul {... you need 10px instead of just 10 as your "margin left"
2) cursor:hand is apparently not valid... I removed the line entirely and had no problems at all (it's under "clickable option")
3) css validator thinks #a89daa is not a valid color under .alblink a {... I replaced the line with color: rgb(168,157,170) and it validated just fine... go figure.. same color, different declaration. I replaced this in the .alblink a:hover as well.. validated fine now.

http://s94358842.onlinehome.us/gallery/themes/reynolds/style.css
There's the css file that properly validates. Not sure whether it's a huge deal to you or not given that the 3 errors it found were incredibly minor.

[ahreno]

I"d love a wordpress version...  thats what i was working on... almost have it toooo

www.osterbrink.org/pictures

www.osterbrink.org/blog

let me know what you think!

[ahreno]

is there any reason that you can think of that i can no longer click the image to bring it up in it's own window at full resolution?  It works fine in other skins....  weird... I may just start over with your new cleaned up version

[cryogenic]

Use the cleaned up versions anyway... they now completely validate as xhtml 1.0 transitional. Also the css file is almost 6KB smaller. If you want the css to validate, use the version linked above as I had to change a few things to make it validate. Reynolds works fine on my end if I click a larger picture to view... so I'm not sure what could be causing the problem. Make sure you're using the latest dev code from cvs. It doesn't work too well with 1.3.x. I tried it myself and it didn't look very good.

[Tarique Sani]

have updated the package with the new CSS - thanks a lot for your efforts.

[cryogenic]

Just to let you know... the Reynolds theme is VERY close to validating as XHTML 1.1... it's only due to the table alignment present in the actual code (and not in css) that's causing it to not validate.