Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2010-02-11 23:21:21
- mwhitfie
- New Member
- Registered: 2010-02-11
- Posts: 3
Design issue
I’m totally new to textpattern but I’m excited about trying it out. I want to have a blog similar to the one on this site http://rsvpgallery.com/, how the blog is within the site design, does anyone know how to accomplish this. thanks in advance
Offline
Re: Design issue
If it’s just the blog portion of that website you want to emulate, that looks easy to do. If you want a store and shopping cart too, that’s a more involved question. Txp doesn’t have a built-in shopping cart feature. There is the yab_shop plugin, though.
When making a site in Txp or any other CMS it’s important to distinguish between the visual design and the information design — the overall structure of sections and pages, and what content elements you want to appear where. And then it really helps — both for your own thinking, and to get effective help here — to come up with detailed specs for what you want. What aspects and elements of your example blog do you want to keep? Txp does not impose any limits on visual design. But Txp is better suited to some site architectures than others. Blog — easy.
Have you looked through any Txp tutorials?
Code is topiary
Offline
#3 2010-02-12 01:20:49
- mwhitfie
- New Member
- Registered: 2010-02-11
- Posts: 3
Re: Design issue
thanks for the reply, but yea the only portion i want to emulate is the blog portion. It looked simple enough to me but I still haven’t figured it out. I’ll work on getting some specs to specify my question a bit more
Offline
#4 2010-02-12 02:09:08
- mwhitfie
- New Member
- Registered: 2010-02-11
- Posts: 3
Re: Design issue
ok so i have my design posted in the presentation, however my posts are not appearing, http://www.hesbdc.com/testblog/, here is my code if that helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blog.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS3 Dreamweaver CS3 target. Created Wed Feb 10 10:07:57 GMT-0500 (EST) 2010-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/blog_r1_c1_f2.gif','images/blog_r1_c1_f4.gif','images/blog_r1_c1_f3.gif','images/blog_r2_c1_f2.gif','images/blog_r2_c1_f4.gif','images/blog_r2_c1_f3.gif','images/blog_r3_c1_f2.gif','images/blog_r3_c1_f4.gif','images/blog_r3_c1_f3.gif','images/blog_r4_c1_f2.gif','images/blog_r4_c1_f4.gif','images/blog_r4_c1_f3.gif','images/blog_r5_c1_f2.gif','images/blog_r5_c1_f4.gif','images/blog_r5_c1_f3.gif','images/blog_r6_c1_f2.gif','images/blog_r6_c1_f4.gif','images/blog_r6_c1_f3.gif');">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="HESBSS2010.png" fwpage="blog" fwbase="blog.gif" fwstyle="Dreamweaver" fwdocid = "1757479980" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="50" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="948" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="home.htm" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','blog_r1_c1','images/blog_r1_c1_f2.gif','images/blog_r1_c1_f4.gif',1);" onclick="MM_nbGroup('down','navbar1','blog_r1_c1','images/blog_r1_c1_f3.gif',1);"><img name="blog_r1_c1" src="images/blog_r1_c1.gif" width="50" height="50" border="0" id="blog_r1_c1" alt="" /></a></td>
<td rowspan="6" colspan="2"><p> </p>
<p> </p>
<p> </p></td>
<td rowspan="6"><img name="blog_r1_c4" src="images/blog_r1_c4.gif" width="1" height="800" border="0" id="blog_r1_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="50" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="home.htm" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','blog_r2_c1','images/blog_r2_c1_f2.gif','images/blog_r2_c1_f4.gif',1);" onclick="MM_nbGroup('down','navbar1','blog_r2_c1','images/blog_r2_c1_f3.gif',1);"><img name="blog_r2_c1" src="images/blog_r2_c1.gif" width="50" height="150" border="0" id="blog_r2_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="150" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="about.htm" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','blog_r3_c1','images/blog_r3_c1_f2.gif','images/blog_r3_c1_f4.gif',1);" onclick="MM_nbGroup('down','navbar1','blog_r3_c1','images/blog_r3_c1_f3.gif',1);"><img name="blog_r3_c1" src="images/blog_r3_c1.gif" width="50" height="150" border="0" id="blog_r3_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="150" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="store.htm" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','blog_r4_c1','images/blog_r4_c1_f2.gif','images/blog_r4_c1_f4.gif',1);" onclick="MM_nbGroup('down','navbar1','blog_r4_c1','images/blog_r4_c1_f3.gif',1);"><img name="blog_r4_c1" src="images/blog_r4_c1.gif" width="50" height="150" border="0" id="blog_r4_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="150" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="media.htm" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','blog_r5_c1','images/blog_r5_c1_f2.gif','images/blog_r5_c1_f4.gif',1);" onclick="MM_nbGroup('down','navbar1','blog_r5_c1','images/blog_r5_c1_f3.gif',1);"><img name="blog_r5_c1" src="images/blog_r5_c1.gif" width="50" height="150" border="0" id="blog_r5_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="150" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="blog.htm" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','blog_r6_c1','images/blog_r6_c1_f2.gif','images/blog_r6_c1_f4.gif',1);" onclick="MM_nbGroup('down','navbar1','blog_r6_c1','images/blog_r6_c1_f3.gif',1);"><img name="blog_r6_c1" src="images/blog_r6_c1.gif" width="50" height="150" border="0" id="blog_r6_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="150" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>Added bc.. for better code display -Gocom
Offline
Re: Design issue
Ok, looks like you have been able to get a couple of posts showing. But your code got me squinting my eyes !
All you need to get post to show up is to add a <txp:article /> tag anywhere in the <body> tag, ok ?
Like Jeff mentioned try to keep the presention and the content seperate. Have a look at the page-default example and see how the styles and forms are accessed.
Honestly, I think you can do without Javascript and tables to make your menu and instead use css – You can also build the menu dynamically using <txp:section_list />
Just make your code look more readable eh.
It’ll pay back when you decide to edit code in the future – and help the rest to quickly resolve issues.
Last edited by maniar (2010-02-12 03:24:42)
اردو میں بھی دستیاب Textpattern آپ کے لیے اب
Offline
Re: Design issue
Looks like you’re making progress. Note that clicking the article title gets you a completely different page template. Reason: The “default” template (the one with your design) applies to the default (i.e., home) page. But the article is assigned to the “articles” section, and that section is currently set to use the “archive” page template. You can change this setting in Presentation->Sections.
Code is topiary
Offline
Re: Design issue
maniar wrote:
Ok, looks like you have been able to get a couple of posts showing. But your code got me squinting my eyes !
That mess is probably entirely generate by Adobe’s WYSIWYG tools, so can’t really blame.
As Jaffer said, you, mwhitfie, will get way more solid site and skills by learning some markup- and style sheet languages. Using editors that generate invalid non-cross-platform code won’t get you far. Plus, TXP uses tags so you need to understand the basic consept of XML like tags and web development to be able to unleash all of it’s power.
Offline
Re: Design issue
As I’m still in the process of building my first TXP site for many years, I have some sympathy for what maniar is going through.
Yes, the tutorials are good. Yes, there is a book (which I must remember to buy). Yes, the TXP Textbook is my constant friend. But what would be good would be some real-life examples where people explain their thinking and methods in putting together a TXP site. One of the good things about TXP is it’s inherent flexibility, both in the core and through plug-ins. But sometimes flexibility makes it hard for beginners eg. choosing the right balance between sections and categories (I’m currrently struggling with that one!). A narrative approach would not just show the finished product.
And yes, I know there is the section in the forum on “Let’s See Yours, Then”. Some of them are inspirational, but they really only offer the finished product with some discussion around which plugins were used etc. I always want to dig deeper and ask “why did you use such-and-such plugin?”, “why did you settle on that structure?”, “have you had to change any decisions after implementing the site?”.
Anyway, my advice for now to maniar is to get the TXP functionality working on a simple white page ie. no designs. It is much easier to test the TXP functionality, and TXP makes it so so easy to ‘wrap’ a design around the TXP tags later.
Offline
Offline
Re: Design issue
Correct! I’m even struggling with the forums now!!
Offline
Re: Design issue
Well, thank you for your concern for me Anura, and your sympathies are received with sincere gratitude. ;-)
I do agree that there should be a step-by-step tutorial somewhere – just to put together a simple txp blog and dress it up a little. I doesn’t need to go too deep. Just steps – Do this – Do this now – And this one now – no explanation – just do as tutorial says !
Infact I learned WordPress =( that way on some one else’s blog – Unfortunately that blog it doesn’t exist anymore.
I think the next version of the Textpattern Solutions Book =| should do that. But the the existing edition already covers 3 test cases in detail, however they are for a multi-author weblog, an e-commerce site and a Restaurant social network – too complicated.
اردو میں بھی دستیاب Textpattern آپ کے لیے اب
Offline
Re: Design issue
I found the book, Textpattern Solutions, very helpful. It shows you how to turn a straight-up html website into a dynamic textpattern site, piece by piece. It’s very much worth the money!
Offline