Tableless CSS theme 'badger' available

[adamish]

Hi. i've hacked together a tableless CSS XHTML theme.....

This was designed alongside the CVS 1.4 version of coppermine.

To view
http://www.badgerphotos.com/

To download
http://www.ghostofashark.co.uk/badger/themes/badger.tar.gz

i wanted to post this in mods->themes but no option to post there ....

Adam.

[edit GauGau]
Warning: this theme was made for an early alpha version of the cpg1.4.x theming engine, it won't work with the stable release without modifications, see my reply on page 2 of this thread.
[/edit]

[jpaffett]

Looks interesting. I'll have to delve more into it.

Jeff

[Tarique Sani]

Wish there was a way to sort out the issue of  uneven thumbnail height due to long description - that inturn leading to problem of improper flow....  We too had run into this problem but gave up as we seriously lack CSS talent. Can it be done with nested hidden div which becomes visible when you take mouse over the thumbnail?

Good effort I would say

[Joachim Müller]

hm, is this meant as "proof-of-concept" or for real use? This is what I get with the badger theme in IE6SP1 and Firefox1.0.1:

[Rodinou]

Bad css because using "Position : Absolute" ... only floats are necessary.

When the Core will be separated, it would be easier to dev tableless.

http://www.sortons.net/photos/ > 90% tableless ....

For long description, the only way is
- overflow hidden, but the description is cropped
- overflow auto, to scroll the description.

But for "only" description, it would be sad to not transform Coppermine in tableless ...
- some forums become tableless (PunBB for example)
- some blogs are tableless (WordPress for example)

My Coppermine is 90% tableless, and I gain about 30 > 45% of generated code ... my server says "thanx Rod".



But Adamish : NEVER USE absolute position to create a fluid layout.

[jpaffett]

Hi Rodinou,

Is it possible to get a copy of your theme?

Jeff

[Rodinou]

Sure. But warning : to get this, I have modified theme.php too ... and it's buggy on some pages (but I dropped it because core code is quite ... waouh)

[adamish_]

Greetings,

Was meant to be of real use! But i've only implemented the bits i wanted to use, to not complete (yet).
Agreed, the previous screenshots from gaugau don't make a good advert for my theme.
(Possibly using different versions of coppermine? Are you using my template.html, theme.php as well as style.css? )
Could you attach source so i can see what is going wrong ?
i've attached what i see on my screen using firefox 1, similar results in IE 6. Also my site is functional and looks okay on my sony ericcson k700 mobile phone.

Rodinou: 90% tableless, 10% not good enough
Cheers for the tip on overflow. i figured it myself the other day, but took a while. i realised the only way to fix the flow was to fix height for each div.thumbnail block, but that gave overflow problems. personally, i think scrollbars are prob easiest.

acknowledged....i will try to banish those position : absolutes....

[jpaffett]

Hi Rodinou,

Could you attach a zip file of your theme please?

Merci

Jeff

[Joachim Müller]

Was meant to be of real use! But i've only implemented the bits i wanted to use, to not complete (yet).
Agreed, the previous screenshots from gaugau don't make a good advert for my theme.
(Possibly using different versions of coppermine? Are you using my template.html, theme.php as well as style.css? )
Could you attach source so i can see what is going wrong ?
i've attached what i see on my screen using firefox 1, similar results in IE 6. Also my site is functional and looks okay on my sony ericcson k700 mobile phone.

I used all of the files you attached into your archive for the theme "badger" and didn't modfy any of them. I used the most recent cpg1.4.x core files using yesterday's checkout. Not sure what causes the theme to crash for me, while it appears to work for you - try bug-hunting by enabling all possible display details in coppermine's config, with long descriptions for everything like albums, cats etc. (I do that deliberately to stress-test all themes). Can't give you a link to my test-server though (sorry), maybe someone else is ready to post a link to his/her test server with badger as a theme.
I didn't mean to discourage you, I was just suggesting that there's work to do before you can release it as stable.
Regarding the "overflow", I suggest you rather crop surplus content.

Joachim

P.S. changed subject of this thread from "Tableless CSS theme available" to "Tableless CSS theme 'badger' available"
P.P.S. I don't think tables are that bad for everything: current browsers aren't ready yet for completely tableless themes imo...

[Rodinou]

P.S. changed subject of this thread from "Tableless CSS theme available" to "Tableless CSS theme 'badger' available"
P.P.S. I don't think tables are that bad for everything: current browsers aren't ready yet for completely tableless themes imo...

Tables are necessary only for tabular datas ... the only we see on CPG is on index.php and eventually in a category containing several categories ...

code in css/xhtml is light !!! very customizable (only play with display, float, and you change all a layout !!!), fluid (only % or fixed width to change the area content ...)

I'm ok to post my files : but only if someone wants to help me to do a 100% tableless theme

I'm afraid of the core code and these a lot of       <<< EOT            EOT >>> ... waouh.

I have some bugs in Firefox, but it's my fault, and I know how to repair them (quite easy)

We see with nol33t (he's gone for a while) to create a "plugin" Coppermine : 100% dhtml and 100% tableless, just upload in CPG root and you'll have another way to browse your pics. Soon.

[Joachim Müller]

you can see the theme on my test site: http://www.gaugau.de/cpg14/index.php?theme=badger

Joachim

[Rodinou]

quite bad, indeed ...

The css is not valid, and the "thumb" area is too large : perfect when you have only 5 or 6 thumbs, but 20 ...

[adamish_]

quite bad, indeed ...

The css is not valid, and the "thumb" area is too large : perfect when you have only 5 or 6 thumbs, but 20 ...

Sorry! i didn't have any categories set up, so didn't realise that my theme.php was generating bad code (this causes the broken overlapping text affect see in GauGau's test site).  I've fixed some stuff, but haven't got much free time at the moment.

Not sure how to get by without display : absolute, any ideas ?

Adam.

[Rodinou]

no ... if you want to create 2 columns ...

#left

#content



#left {
display : block;
float : left;
margin-right : 5px;
width : 150px;
}

#content {
display : block;
float : right;
}


<div id="left">
your menu here
</div>

<div id="content">
CPG content here
</div>

Simply this to create 2 columns ... you can use absolute positions, of course, but it's very less flexible and fluid.

[adamish_]

Thank you Rodinou!!

I've removed all display-absolutes from my style.css.

I have also fixed a bunch of stuff and made categories work properly.

Thanks to whoever said recommended turning all display options on for stress test, it threw up a ton of things i hadn't noticed before.

Please can my work be re-evaluated (ripped apart  )

Same places....

www.badgerphotos.com

www.badgerphotos.com/themes/badger.tar.gz

Adam.x

[Joachim Müller]

OK, this looks much better - view it live here.
There are some issues with it however:

• The "Home" menu item is missing that should be inside the theme (can be switched on and off on coppermine's config)
  
• The album thumbnails overlap the album names if there's more text, see http://coppermine-gallery.net/demo/cpg14x/index.php?cat=2 as an example (FF issue, in IE everything works as expected)
  
• When more than one meta album is chosen to be displayed in "content of the main page" (e.g. random and lastalb), the meta album captions aren't being displayed over the thumbnail row, but next to it (see above exapmple as well) (FF issue, in IE everything works as expected)
  

Joachim

[ot]
@Adam: why didn't you log in as adamish and registered a new account named adamish_ instead?
[/ot]

[Xamataca]

Hello, tho I'm not yet installed coppermine (i'm just looking for a good gallery system script that is full css+xhtml fully compliant, or at least highly/easily modifiable to make it close to) I came here thanks to a google search "coppermine+tableless" after having a look at "theme.php" code, from the classic theme, that almost made me faint 

Well, the question is that I know how difficult can be to build a "tableless" layout (eh, think about a tableless site, forum too ), so now that I'm looking at _adamish_ theme.php file I wonder, just for curiosity's sake, why aren't you using unordered list or definition list for the menus? almost the thumbnail part of the template could be done with <dd> too ( having that huge amount of <div> tags around don't make's the code tiddy, nor semantically compliant at all  )

Please, don't take it as a critic, just curiosity, I appreciate your effort and I'm trying to achieve the same objective (in fact I'm waiting for the success of your attempts , that will give me an insight in how to make it fully standards compliant and semantically correct)

Greets
Xamataca
P.d (excuse my english)

[adamish_]

There are some issues with it however:

Accepted, i'll look into them probably tomorrow. Once i've ironed out all the content (theme.php related) issues, i'll get onto the style.css and make it look pretty

[ot]
@Adam: why didn't you log in as adamish and registered a new account named adamish_ instead?
[/ot]

i stupidly  managed to forget the password of original account, and you can't retrieve passwords at moment because of the sourceforge.net outgoing email problem. Didn't think anybody would notice the underscore

Adam.

[adamish_]

why aren't you using unordered list or definition list for the menus?

Yes would be better, a small change, and what i do on my personal site already.
i've been focusing my attention on bigger issues (restructure, removing spacer gifs, inline styling etc).

Never thought of using DD/DT tags for thumbnails, will look into it. i always thought of them for definitions at the end of technical documents etc.
But thumbnails are just a definition (picture + title) and a description (caption, details)

( having that huge amount of <div> tags around don't make's the code tiddy, nor semantically compliant at all  )

True, but i have classed them in fairly sensible way.

Thanks for the ideas, watch this space...

Adam.x