Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
html to TXP template. Need help.
Everybody has its own way to learning, in others words I had read lot of tutorials, and I didn’t understand how to build templates for texpatern. Its obvious that I need a html desing, but after that? i put some tags and the template is ready? I tried and I failed.
I wonder if I can get help from the forum members to finish this template as my exercise on textpatern template.
here is the template In html, http://gournis.gr/gournis_4_txp.zip but i need some help, cause i just want to learn TXP, and i cant.
Any idea?
Last edited by pagou (2011-06-09 08:46:25)
don’t shut, am just begin.
Offline
Re: html to TXP template. Need help.
Hello Panagiotis,
I’d suggest downloading one of the free pre-made themes from Textgarden.org and dissecting it, that’s probably the best way to learn.
There is also a book called ‘Textpattern Solutions’ which you can get from Amazon, it’s a bit old now but the basic principles of Textpattern are still relevant.
Stick with it because once you get your head around how TXP works you’ll find it is very flexible and easy to use.
Last edited by philwareham (2011-06-09 09:50:58)
Offline
Re: html to TXP template. Need help.
Thanks for answer philwareham.
i had download a read the code from the templates, but, at least me, i cant use it without the plain html in parallel with the work in phases.
thats why i ask the above. its the only way to have (me and perhaps others) a full project in phases with html & evolution steps until the final template.
well at least this my thought.
also i had the change to read quickly the book and didn’t help either.
on the other hand very helpfull (for me) was:
http://wion.com/articles/understanding-textpattern-building-blocks
http://wion.com/articles/textpattern-building-block-mechanics
but i still have a lot of questions.
don’t shut, am just begin.
Offline
#4 2011-06-09 12:26:28
- Algaris
- Member
- From: England
- Registered: 2006-01-27
- Posts: 581
Re: html to TXP template. Need help.
There is also the Tag Reference. I found it invaluable when learning Textpattern.
http://textpattern.net/wiki/index.php?title=Category:Tag_Reference
Also the FAQ section ‘Common “How Do I?” questions’ has a lot of practical examples along with code to show you how it works.
http://textpattern.com/faq
Last edited by Algaris (2011-06-09 12:33:15)
Offline
Re: html to TXP template. Need help.
pagou wrote:
I wonder if I can get help from the forum members to finish this template as my exercise on textpatern template.
I downloaded the template and this is my first suggestion: Find another one. Teaching your Textpattern by using a table-based design that requires spacer gifs and inline css is just wrong and there is no need for that in 2011 with modern browsers.
If you want a suggestion, go pick somewhere like Styleshout.com and I will be glad to help you.
Offline
Re: html to TXP template. Need help.
michaelkpate thanks for the advise. actually is a design i made myself, since i need something simple with basic funtion, so i its obvius i need to sharp my html skills at the same time.
i found this one http://www.styleshout.com/hits.php?type=tmp&id=25&url=templates/downloads/UrbanArtist11.zip in Styleshout.com, i think its suitable for a nice TXP template, if you agree.
i am gonna take a good look at Algaris links, but at the same time, can you please explain what is the neserary steps to start converting to TXP?
don’t shut, am just begin.
Offline
Re: html to TXP template. Need help.
I like to work with a live site but it isn’t actually required: http://cmsstyles.com/demos/urbanartist/
Step 1. I always make backup copies of the default page and default style because I generally refer back to them at some point.
Step 2: Replace the contents of the default page with the file index.html from the template.
Step 3: Replace the content of the default style with the file UrbanArtist.css from the images folder.
Step 4: Upload the images to the images folder since it has the same name.
Step 5: View the site. It now looks exactly like the static template. A good start but not quite what we mean by a Textpattern template.
So…
Step 6: Locate the line
<link rel="stylesheet" href="images/UrbanArtist.css" type="text/css" />and replace it with
<txp:css format="link" />Step 7: View the site again. The formatting is still there but the images no longer display. That is because the stylesheet is no longer in the same folder as the images.
Step 8: Go back to the Default Style. In front of every image statement, insert “./images/” like so.
html { background: #010000 url(./images/bg.gif) repeat-x; }Step 9: View the site again. The images should appear now.
Step 10. Returning to the Page Default, Replace
<title>UrbanArtist</title>with
<title><txp:page_title /></title>Step 11. Replace
<h1 id="logo-text"><a href="index.html" title="">UrbanArtist</a></h1>with
<h1 id="logo-text"><a href="index.html" title="">UrbanArtist</a></h1>Step 12. Go over to the Forms Tab and locate (and backup if you want) the Default Article Form.
Replace the contents with this:
<h2><txp:permlink><txp:title /></txp:permlink></h2>
<p class="post-info">Posted by <txp:author link="1" /> | Filed under <txp:category1 link="1" />, <txp:category2 link="1" /> </p>
<txp:body />
<p class="postmeta">
<txp:permlink>Read more</txp:permlink> |
<txp:comments_invite /> |
<span class="date"><txp:posted /></span>
</p>Step 13. Go back to the Default Page and figure out where the main div begins and ends. You can replace all of it with…
<div id="main">
<txp:article />
<!-- main ends -->
</div>Step 14: View the site again and then stop and then take a moment….
Are you with me so far?
Last edited by michaelkpate (2011-06-09 15:49:33)
Offline
Re: html to TXP template. Need help.
i am gonna take a good look at Algaris links, but at the same time, can you please explain what is the neserary steps to start converting to TXP?
I haven’t seen really good documentation on this, in the book or elsewhere, actually. For now it takes more time to learn than it should.
When I was teaching conversion to a friend recently, I told him to View Source on the original site, then copy & paste that all into a TXP page. Then we started putting in little snippets of TXP code in the page, like:
<!-- Website footer -->
<txp:output_form form="footer" />Then you can create a form called “footer” and do things like call an article from it:
<txp:article_custom id="33" form="footer-text" />And that will display the article that has an ID of 33, using a form called “footer-text.” Using a form allows you to customize the way the article appears.
In the “footer-text” form, you could do this:
<txp:body />…and that is all. That way, you don’t have to display the article’s title, or the author name, etc.
So that’s how we started. I think it worked well for learning, but soon you have to start looking at TXP template code :-)
Offline
Re: html to TXP template. Need help.
michaelkpate, i install a online textpattern site, here: http://gourni.co.cc/
the steps that you desribe is exacly what i was looking, thanks a lot for that.
some questions:
-when i replace the <txp:css format=“link” /> only then the site was ok
-i dint had to insert html { background: #010000 url(./images/bg.gif) repeat-x; } to see the images
yes i finish the steps, and is working ( i think)
thanks for the tips maruchan
Last edited by pagou (2011-06-10 06:37:01)
don’t shut, am just begin.
Offline
Re: html to TXP template. Need help.
pagou wrote:
some questions:
-when i replace the <txp:css format=“link” /> only then the site was ok
-i dint had to insert html { background: #010000 url(./images/bg.gif) repeat-x; } to see the images
Did you follow step 4? “Upload the images to the images folder since it has the same name.”
This is what my Images Folder now contains.
The site should have looked okay because the .css file was in the same folder with the images.
When we replaced the original link to css.php?n=default, that should break all the image links until they are restored by specifying the new route.
Addendum: Another quick tutorial – In order to get the article to display more correctly, I just copied the entire content of the default page template into the archive page template. You will notice on the sidebar that doing that broke the links to the images there but we can fix that later.
Last edited by michaelkpate (2011-06-10 13:13:54)
Offline
Re: html to TXP template. Need help.
You are wright.
i had upload the image folder, but without the css. so the system had not directions that will end in correct visualization
if i had understand: we had in a few step convert a static web site, in a Textpattern site.
can we manage that site, with TXP?
don’t shut, am just begin.
Offline
Re: html to TXP template. Need help.
There are a few more steps to go…
The next step I would take though is to simplify the templates a bit. It makes it easier to work with and see what the code is actually doing.
1. The first thing you have to do then is decide, as maruchan mentioned, where to divide the code. I have pretty much adopted the standard that most users of that wildly popular blogging platform use and create a header, sidebar, and footer.
2. Go back to your default template and select everything from the very beginning to the two lines just below. Normally I wouldn’t go quite this far, but it kind of works with this code. Copy it to your clipboard.
<!--header ends-->
</div>3. Go to forms and click Create New Form. Paste the code in. Name the form “header” and set the type “misc” and save it.
4. Go back to the default template and select the same text again. Now replace it with:
<txp:output_form form="header" />5. The sidebar is pretty easy as we can use the <!— sidebar starts —> to start and end it on the div after <!— sidebar ends —>.
6. Everything from <!— footer starts here —> is going into the footer.
7. Personally, I like to try and maintain the code indenting. So at this point my default template looks like so:
<txp:output_form form="header" />
<!-- content-wrap starts -->
<div id="content-wrap">
<div id="main">
<txp:article pgonly="0" />
<!-- main ends -->
</div>
<txp:output_form form="sidebar" />
<!-- content-wrap ends-->
</div>
<txp:output_form form="footer" />8. As a bonus, you can actually replace the contents of the archive template again with this. Because we haven’t made any changes between the two yet.
Last edited by michaelkpate (2011-06-10 19:24:05)
Offline