Custom Layout - Mess Up

kahlo · 2006-09-30 13:22:26

Hi, I recently had a custom layout made. Today I put in all the unique to TXP codes and copy & pasted it into the appropriate places. Obviously I <a href=“http://alessandrapalmer.org”>went wrong <i>somewhere.</i></a> I’ve uploaded the <a href=“http://www.alessandrapalmer.org/lisalayout/”>index and css as well as a preview jpg</a> to my domain so you can view it. My designer is new to TXP, I knew that going in, but normally it is easier to put customs together. So if any of you know where I went wrong (and how to make the sig pic appear at the bottom of every entry), it would be greatly appreciated. :)

- Ali

Walker · 2006-09-30 14:37:41

Ali,

Here’s your new CSS:

<code>
body
{
font: 12px Tahoma, Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 19px;
color: #333333;
background-color: #FFCC00;
background-image: url(‘/images/september_bg.jpg’);
background-attachment: fixed;
background-repeat: repeat-x;
padding:0px;
margin:0px;
}

#frame
{
width:800px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
background-color: #FFFFCC;
background-image: url(‘/images/background.jpg’);
}

#content
{
font: 11px Tahoma, Arial, Helvetica, sans-serif;
color: #555555;
line-height: 19px;
width:550px;
text-align:justify;
padding:4px;
margin-left: 235px;
}

#side
{
font: 11px Tahoma, Arial, Helvetica, sans-serif;
color: #555555;
line-height: 19px;
width:225px;
text-align: justify;
padding:4px;
float:left;
}

#header
{
top: 0px;
background: url(‘/images/header.jpg’) no-repeat top center;
width: 800px;
height: 420px
}

p, pre
{
margin:0px 10px 10px 10px;
}

a:link, a:active, a:visited
{
text-decoration: none;
color: #FFCC66;
}

a:hover
{
text-decoration: none;
color: #993300;
}

h1
{
font: 25px Times New Roman, Helvetica, Sans-Serif;
font-weight: bold;
color: #ffffff;
background-image: url(‘/images/sideheaderbg.jpg’);
line-height: 17px;
margin:0 0 9px 0;
padding:0;
text-transform: lowercase;
}

h2
{
font: 25px Times New Roman, Helvetica, Sans-Serif;
font-weight: bold;
color: #ffffff;
background-image: url(‘/images/contentheaderbg.jpg’);
line-height: 17px;
margin:0 0 9px 0;
padding:0;
text-transform: lowercase;
}

.date
{
font: 11px Tahoma, Arial, Helvetica, sans-serif;
color: #009999;
line-height: 12px;
text-align: center;
font-weight: bold;
text-transform: none;
}

.comment
{
font: 10px Tahoma, Arial, Helvetica, sans-serif;
color: #009999;
line-height: 12px;
text-align: right;
font-weight: none;
text-transform: none;
}

#select
{
font-size:10px;
font-family:Arial;
line-height:40px;
}

textarea, input, submit
{
font: 11px Tahoma, sans-serif;
border: 1px solid #339966;
background: #66CCCC none;
color: #ffffff;
padding: 1px;
}
</code>

kahlo · 2006-09-30 17:24:05

Thanks so much. A couple more questions though. How can I get all my links to align to the left without the lone bullet? Also, if you aren’t using IE it looks awful, now I said the designer knew squat about TXP but she does churn out cross compat layouts generally, is there a quick fix? Seriously, nothing drives me crazier then cross compat issues. I’m viewing it in FireFox, Mozilla & IE. IE is the only one it looks A-ok in. Thanks again.

jm · 2006-09-30 18:10:05

OK, your linklist needs to be a little more defined, first, to get rid of the line breaks. Try <txp:linklist break="li" class="" wraptag="ul" />. Your nav menu should be similar: <txp:section_list break="li" class="" wraptag="ul" />.

After fixing that, add a doctype to your pages. Use

<code>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
</code>
instead of <html><head>.

I’ve got your layout almost fixed. Should be ready in a sec.

jm · 2006-09-30 18:32:40

OK, here’s the CSS:

<pre>
@media screen,projection { html { background: #FC0 url(http://alessandrapalmer.org/images/september_bg.jpg) repeat-x fixed; font-size: 62.5%; } body { width: 800px; margin: 0 auto; padding: 0; background: #FFC url(http://alessandrapalmer.org/images/background.jpg); color: #555; font-size: 1.1em; line-height: 1.7em; text-align: left; } body,form * { font-family: tahoma,arial,sans-serif; } #header { width: 800px; height: 420px; margin: 0; background: url(http://alessandrapalmer.org/images/header.jpg) no-repeat; text-indent: -9999px; } #content { width: 73%; float: right; text-align: justify; } #secondary { width: 26%; text-align: justify; float: left; } p, pre { margin: 0 10px 10px; } a:link { color: #FC6; text-decoration: none; } a:visited { text-decoration: underline; } a:hover,a:active { text-decoration: none; color: #930; } h1,h2 { margin: 0 0 9px; padding: 0; background: #fc3 url(http://alessandrapalmer.org/images/sideheaderbg.jpg) left center; color: #fff; font: bold 1.7em/1 “Times New Roman”,serif; text-transform: lowercase; } h2 { background: url(http://alessandrapalmer.org/images/contentheaderbg.jpg) no-repeat left center; } .date { color: #099; text-align: center; font-weight: bold; } .comment { color: #099; text-align: right; } textarea,input,#submit,#preview { border: 1px solid #396; padding: 1px; background: #6CC; color: #fff; }
}
</pre>

page template HTML

<code>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<link href=”<txp:css />” rel=“stylesheet” type=“text/css” />
<link href=”<txp:site_url />rss/” rel=“alternate” type=“application/rss+xml” />
<title><txp:page_title /></title>
</head>
<body> <h1 id=“header”>Allesandra Palmer</h1>

<div id=“secondary”>
<h1>Navigate</h1>
<txp:section_list break=“li” class=”“ wraptag=“ul” />
<h1>Plugged</h1>
<txp:link_list break=“li” class=”“ wraptag=“ul” />
</div><!—//secondary—>
</body>
</html>
</code>

form: default

That should work, as far as TXP code goes. The layout works well in Opera,FF, and IE6&7.

Last edited by jm (2006-09-30 18:34:09)

kahlo · 2006-09-30 18:51:04

Hi, I like how it looks. It straightened up a lot of issues I didn’t bother addressing, such as entries other then the first one being right-aligned which was annoying. But, I am not seeing the background that should be there which quite frankly makes it look awful. The links can be reorganized of course that’s no biggie, but what have I done wrong this time to make the white background go away?

Thanks so much :)

jm · 2006-09-30 19:07:55

Oh, sorry—I forgot to add a clearing footer. Add this to the bottom of your template:

CSS:
<code>
#footer {
clear: both;
text-align: center;
}
</code>

Also, the media screen, projection prevents the yellow backgrounds and type from printing. You can then add, after the last curly brace “}”, <code>@media print { body { font: 10pt georgia,serif; } #secondary { display: none } }</code>.

kahlo · 2006-09-30 19:20:19

Hi, I’m not sure what I did, but I did something, and I’m not sure how to fix it. Needless to say, I think it looks as bad if not worse then it did when I started.

jm · 2006-09-30 19:40:48

You had a period and a couple of extra braces in your CSS. Use this instead as your CSS:

<pre>
media screen,projection { html { background: #FC0 url(http://alessandrapalmer.org/images/september_bg.jpg) repeat-x fixed; font-size: 62.5%; } body { width: 800px; margin: 0 auto; padding: 0; background: #FFC url(http://alessandrapalmer.org/images/background.jpg); color: #555; font-size: 1.1em; line-height: 1.7em; text-align: left; } body,form * { font-family: tahoma,arial,sans-serif; } #header { width: 800px; height: 420px; margin: 0; background: url(http://alessandrapalmer.org/images/header.jpg) no-repeat; text-indent: -9999px; } #content { width: 73%; float: right; text-align: justify; } #secondary { width: 26%; text-align: justify; float: left; } p, pre { margin: 0 10px 10px; } a:link { color: #FC6; text-decoration: none; } a:visited { text-decoration: underline; } a:hover,a:active { text-decoration: none; color: #930; } h1,h2 { margin: 0 0 9px; padding: 0; background: #fc3 url(http://alessandrapalmer.org/images/sideheaderbg.jpg) left center; color: #fff; font: bold 1.7em/1em "Times New Roman",serif; text-transform: lowercase; } h2 { background: url(http://alessandrapalmer.org/images/contentheaderbg.jpg) no-repeat left center; } .date { color: #099; text-align: center; font-weight: bold; } .comment { color: #099; text-align: right; } textarea,input,#submit,#preview { border: 1px solid #396; padding: 1px; background: #6CC; color: #fff; } #footer { clear: both; text-align: center; } }media print { body { background: white; color: black; font: 10pt georgia,serif; } #secondary,form { display: none; }
}
</pre>

Then, for your page template, use this:

<code>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<link href=”<txp:css />” rel=“stylesheet” type=“text/css” />
<link href=”<txp:site_url />rss/” rel=“alternate” type=“application/rss+xml” />
<title><txp:page_title /></title>
</head>
<body>
<h1 id=“header”>Allesandra Palmer</h1>

<div id=“secondary”>
<h1>Navigate</h1>
<txp:section_list break=“li” class=”“ wraptag=“ul” />
<h1>Plugged</h1>
<txp:link_list break=“li” class=”“ wraptag=“ul” />
</div><!—//secondary—>
<p id=“footer”>Copyright ©2006 <txp:site_name />.</p>
</body>
</html>
</code>

Textpattern CMS

Textpattern CMS support forum

#1 2006-09-30 13:22:26