How do I convert an existing TXP website to responsive design?

jcr4runner · 2015-04-04 21:49:53

I’ve run my own website since 1996.

About 7 years ago, I converted the entire site — that has thousands of articles — to TXP with the help of a friend on the initial design.

For several years, I’ve known of the need to convert the existing site to responsive design.

I have little knowledge of PHP and CSS. My friend implemented the CSS for me.

How easy or difficult would it be to take my current design (three columns) and convert it to a responsive design that “folds” down to a format suitable for tablets and phones?

Is there a step by step tutorial or a how-to somewhere?

I’ve spent houirs researching this and I am either dense or I am missing something simple or it is just over my head.

I consulted with a couple of services who advised me to just switch to WordPress — but that would be more work than simple creating the design on TXP.

BTW: You can see one of my existing pages below:

Last edited by jcr4runner (2015-04-04 21:50:40)

Dragondz · 2015-04-05 08:24:01

Hi

it s not difficult to convert a txp website to another design.

First you must have the new design ready (html and css) (you can use css framwork like zurb foundation, bootstrap or others, you can also use some existing free or paid templates as you wish),

Then i advise you to create a new section on your website for tesing

Put your html code into a new page template and the css into a new css page if needed,

Then look at your old page to see where to put the txp tags to have the same result, that could take you some times to do it if you are not familiar with txp but it s doable.

You can find help here at the forum, if you have time people here can give you enough informations at each step to perform that.

Cheers

jcr4runner · 2015-04-05 22:43:12

Thanks for your answer. You are telling me what I need to know. I already know I need HTML and CSS for a WRD.

You mentioned fee templates at zurb foundation, bootstrap, etc.

I am very familiar with TXP tags, and can write HTML, but the CSS is the hard part for me. I am not familiar enough with how it all works although I’ve toyed with my existing CSS file in TXP.

If I had a sample three column WRD page that “folds down” for various devices — with the CSS that could just be copied and pasted into TXP — then my idea is that it would work and then I could customize the HTML to be more like what I want.

I know that already. What I am looking for is such a design that has the CSS.

Any suggestions of where specifically to look?

Dragondz · 2015-04-06 08:31:16

Hi

For CSS you can pick some free template using foundation or bootstrap, the CSS is included there.

The general structure of those framework (foundation , bootstrap) include css and javascript to upload to your website, and then it works, if you want to modify some css features (like color buttons or other thing) personnaly i add a <txp:css /> tag to make those changes using a txp css template.

For free templates look at those (quick googling):

http://startbootstrap.com/
http://www.freshdesignweb.com/free-bootstrap-templates.html
http://bootstrapzero.com/
http://blog.templatemonster.com/2014/01/09/free-zurb-foundation-templates/
http://www.epickwebdesign.com/free-one-page-website-template/
http://designscrazed.org/free-responsive-html5-css3-templates/

And there is many others!

Cheers.

jcr4runner · 2015-04-06 13:59:52

Okay, thank you. I experimented a little with bootstrap. The question I have is that after I downloaded the folders, I found html and CSS, but there were several CSS sheets. This is what is confusing to me. Do I want to paste these in the CSS tab in TXP?

I created a new page and section called blog2 and associated it with a new CSS called default1.

So far, am I on track, or is there something I am missing?

After pasting the CSS code into default1 it didn’t work. But I probably need to go back and do some reading.

Last edited by jcr4runner (2015-04-06 14:00:15)

bici · 2015-04-06 15:31:36

jcr4runner wrote #289777:

Okay, thank you. I experimented a little with bootstrap. The question I have is that after I downloaded the folders, I found html and CSS, but there were several CSS sheets. This is what is confusing to me. Do I want to paste these in the CSS tab in TXP?

I created a new page and section called blog2 and associated it with a new CSS called default1.

So far, am I on track, or is there something I am missing?

After pasting the CSS code into default1 it didn’t work. But I probably need to go back and do some reading.

I have always found it best to use external css files.

Create/save the css files to a directlory e.g.; /assets/css/curtom.css, style.css so on.

call them by adding them to the <head> </head part of your template pages like so

<link rel='stylesheet' id='custom-css'  href='/assets/css/custom.css' type='text/css' media='all' />   
<link rel='stylesheet' id='responsive-css'  href='/assets/css/responsive.css' type='text/css' media='all' />

I find it easier edit and if need be duplicate css files outside the Textpatterm panel.

ps i am just now completing the redesign of my site to a responsive theme and did as was suggested by Dragondz

Last edited by bici (2015-04-06 15:41:23)

Dragondz · 2015-04-06 16:22:54

jcr4runner wrote #289777:

Okay, thank you. I experimented a little with bootstrap. The question I have is that after I downloaded the folders, I found html and CSS, but there were several CSS sheets. This is what is confusing to me. Do I want to paste these in the CSS tab in TXP?

I created a new page and section called blog2 and associated it with a new CSS called default1.

So far, am I on track, or is there something I am missing?

After pasting the CSS code into default1 it didn’t work. But I probably need to go back and do some reading.

Hi

Upload all files including the css directory, past the html code into the new page and then you can see the result, you dont need to past anithing into the css page, if your template has a css file to modifiy the default bootstrap css you can copy/past it into the css page if it havent one dont past anithing into css page.

Cheers

jcr4runner · 2015-04-06 17:23:31

Thanks. This makes sense. I was thinking I needed to use the TXP CSS style tab, but this makes it simpler.

I just need to create a page using a template and series of style sheets and then tweak the html to make it be want I want it to be.

Dragondz wrote #289781:

Hi

Upload all files including the css directory, past the html code into the new page and then you can see the result, you dont need to past anithing into the css page, if your template has a css file to modifiy the default bootstrap css you can copy/past it into the css page if it havent one dont past anithing into css page.

Cheers

p.

jcr4runner · 2015-04-06 17:28:17

Thank you too. I understand what you are saying.

Thank you for the stylesheet code. I am assuming this will over ride the stylesheet that the page is associated within TXP.

bici wrote #289779:

I have always found it best to use external css files.

Create/save the css files to a directlory e.g.; /assets/css/curtom.css, style.css so on.

call them by adding them to the <head> </head part of your template pages like so

<link rel='stylesheet' id='custom-css' href='/assets/css/custom.css' type='text/css' media='all' />...

I find it easier edit and if need be duplicate css files outside the Textpatterm panel.

ps i am just now completing the redesign of my site to a responsive theme and did as was suggested by Dragondz

p.

jcr4runner · 2015-04-07 15:18:26

I used the html and CSS from this page:

http://cheesetoast.co.uk/demos/responsive.html

I managed to come up with this:

http://www.forerunner.com/blog2/

This is essentially the structure I am looking for. Now I just have to tweak it. I actually pasted a single style sheet into TXP, so it was much easier than I thought to get started. This is the foundation. Now I just have to build.

Last edited by jcr4runner (2015-04-07 15:46:42)

Dragondz · 2015-04-07 15:51:23

Hi

Dont forget to tells people wich advised you to switch to wordpress in order to have a responsive website thats it s easier with textpattern ;)

jcr4runner · 2015-04-07 16:26:25

Amen, brother! :-)

Dragondz wrote #289799:

Hi

Dont forget to tells people wich advised you to switch to wordpress in order to have a responsive website thats it s easier with textpattern ;)

p.

Textpattern CMS

Textpattern CMS support forum

#1 2015-04-04 21:49:53