Trying to turn this theme using tables into one using just CSS, help please.

mrsleep99 · September 28, 2007, 11:25:55 PM

I'm trying to take this code making up my simple theme to use just divs and to utilize the following div's to give it rounded corners:

Code Select

 
<div id="liquid-round">
          <div class="top"><span></span></div>
          <div class="center-content">
Content
          </div>
          <div class="bottom"><span></span></div>
      </div>

Here's the template.html code:

Code Select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>My Webpage</title>
<style type="text/css">
<!--
.style1 {font-size: 10px}
-->
</style>
{META}
<link rel="stylesheet" href="themes/simpleX/style.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html 2688 2005-12-04 03:22:35Z donnoman $ -->
<div class="banner">Welcome to the site!</div>
</head>

<body>
{CUSTOM_HEADER}
  <center>
  <table width="90%" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td align="left" width="25"><img src="themes/simpleX/images/border_tl.gif"></td>
		<td width="100%" style="border-top: 1px solid black;"></td>
		<td align="right" width="25"><img src="themes/simpleX/images/border_tr.gif"></td>
	</tr>
	<tr>
		<td colspan="3" class="logo_ads">
			<table width="100%" cellspacing="0" cellpadding="0" border="0">
				<!-- LOGO -->
				<tr>
				<td style="padding-left: 10px; float: left;"><img src="themes/simpleX/images/banner.png"></tr>
				</td></tr>
				<!-- LOGO -->
				<tr><td align="center" style="padding-left: 4px;">
<br />
<br />				
<!-- Google Ads -->
			
				</td></tr>
			</table>		</td>
	</tr>
		<tr>
		<td colspan="3" class="logo_ads">
			<table width="100%" cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td class="left_menu" width="200" valign="top">		

						<table width="100%" cellspacing="0" cellpadding="0" border="0">							
						<tr><td style="border-bottom: 2px solid black;">	
						
							<form method="post" action="thumbnails.php" name="searchcpg">					
							<input style="width: 80%;" name="search" maxlength="255" value="" class="textinput2" type="text">
							<input value="search" class="button" type="submit" style="margin-bottom: 4px;">							
							<input name="album" value="search" type="hidden">							
							<input name="title" type="hidden" value="checked">
							<input name="caption" type="hidden" value="checked">
							<input name="keywords" type="hidden" value="checked">
							<input type="hidden" name="filename" value="checked">
							</form>
							
						</td></tr>
						<tr><td class="{SR_CLSS}">
							{SYS_MENU}{SUB_MENU}	
						</td></tr>		
						<tr><td>
							{ADMIN_MENU}				
						</td></tr>
						</table>					</td>
					<td valign="top" style="padding: 8px;">						
						{GALLERY}												
						{LANGUAGE_SELECT_FLAGS}{THEME_SELECT_LIST}{LANGUAGE_SELECT_LIST}					</td>
				</tr>
			</table>		</td>
	</tr>
	<tr>
		<td align="left" width="25"><img src="themes/simpleX/images/border_bl.gif"></td>
		<td width="100%" style="border-bottom: 1px solid black;"><div class="newfooter">Copyright 2007</div></td>
		<td align="right" width="25"><img src="themes/simpleX/images/border_br.gif"></td>
	</tr>
  </table>
  </center>
</body>
</html>

I'm not sure what I can leave and what I can remove, should I get rid of all tables? Can anyone point me in the right direction by giving an example of how I might accomplish at least SOME of this? I've read about 10 different pages and part of an e-book on laying out pages with divs instead of tables but I'm just not seeing how to do it with what I have here. Any help would be greatly appreciated, thank you!

Nibbler · September 28, 2007, 11:52:16 PM

Converting Coppermine from tables to divs+css is a major task. I would not recommend attempting this.

mrsleep99 · September 28, 2007, 11:58:44 PM

Even just converting the theme..? I've seen a few themes that are using div's instead of tables. Why is it so difficult?

Sami · September 29, 2007, 06:12:04 AM

As Nibbler already said it's not easy task cause you need to change lots of theme's functions and also some core functions to accomplish this
There are bunch of hard coded table under core code

gav240z · November 21, 2007, 11:13:35 AM

I was going to post this in feature requests, but I was wondering if in the newer versions we could look into more theme customisation or at least flexibility. I'd like to remove the table layout elements also and think that using CSS / XHTML with coppermine would improve it vastly and reduce page bloat and markup.

I guess my main gripe is with the user menu. I'd like to be able to customise it using an ordered or unordered list.
If you see my current gallery the gallery menu items kinda conflict with the website's main menu items. If I could tile them vertically it would make more sense to the users.

http://www.viczcar.com/gallery/

It would be great to be able to wrap them in a container div that had a heading like "Gallery Control Panel".

I guess it's hard to explain without the use of a diagram.

I'd be glad to offer any advice in the field of CSS and XHTML and possibly help with converting away from tables to CSS / XHTML. If I can find the time I'd love to assemble a generic template for coppermine that uses CSS and XHTML.

If anyone has already assembled a CSS template for Coppermine it would be great if someone could post a link to it.

Cheers
Gavin.

gav240z · November 21, 2007, 11:17:54 AM

Quote from: mrsleep99 on September 28, 2007, 11:25:55 PM
I'm trying to take this code making up my simple theme to use just divs and to utilize the following div's to give it rounded corners:

Code Select Expand
<div id="liquid-round"> <div class="top"><span></span></div> <div class="center-content"> Content </div> <div class="bottom"><span></span></div> </div>

I'm not sure what I can leave and what I can remove, should I get rid of all tables? Can anyone point me in the right direction by giving an example of how I might accomplish at least SOME of this? I've read about 10 different pages and part of an e-book on laying out pages with divs instead of tables but I'm just not seeing how to do it with what I have here. Any help would be greatly appreciated, thank you!

Hi there, I would not suggest using nested div's to accomplish the rounded edge look. There is a javascript that can give you a rounded edge look called niftyCube. http://www.html.it/articoli/niftycube/index.html

This is alpha transparent meaning no gif images with a halo effect if you change the colour theme of your site. I think it's the most elegant solution until CSS3 is readily supported which has a proposal for a rounded edge property. Worst case scenario, those who do not have javascript enabled with just see solid corners.

Joachim Müller · November 21, 2007, 06:41:07 PM

[ot]
@gav240z: thanks for your posting - I have used the "Nifty Corners Cube" script you mentioned to create a coppermine theme with rounded corners named "classic_nifty". Not exactly tableless, just using the rounded corners look.
[/ot]

@mrsleep99: Coppermine is table-driven. You can reduce the number of nested tables, but you can't remove them completely unless you perform a complete re-code. Tableless design approaches have been discussed in the past - please search the board for those discussions (which ended in a rant between CSS-purists and table-lovers with much personal bias blended into those threads).
Accomplishing rounded corners is one thing. Achieving a tableless Coppermine just is another aspect that imo is beyond the scope.

coppermine-gallery.com/forum

News:

Trying to turn this theme using tables into one using just CSS, help please.

mrsleep99

Nibbler

mrsleep99

Sami

gav240z

gav240z

Joachim Müller