Help Customizing an installation(beyond just CSS changes)

Hello Everyone,

I was wondering if I could get some help customizing and installation of opecart.  I'd say that I have intermediate skills with PHP and webdeisgn.  I have a site that i'm working on (shop.kingvagabon.com/test) and I would like to make the store look just like my blog (kingvagabon.com).  I have spend about 24 hours paying around with the files.  I want to change the layout of the site (for examlpe move the "button" bar to the left and display the links in a row and also move the "welcome" section under the search bar among other things) and have been told that I need to edit the layout.tpl file.  Now this is going to be a really stupid question, but how do I do that?  I tried opening it with dreamweaver, and I can get the code to load up fine, but nothing else.  Is there a way to one it up in a WYSIWUG program?  If not what would I need to edit in the code the make the changes I want to make?  What program would you guys recommend that I use to edit the layout? 

Thank you in advance.

If you are going to get into php programming seriously, I would suggest you buy a copy of PhpED by nusphere otherwise, download the free notepad++

You will have to move things around in layout.tpl

The "things" are mostly modules so have a look in catalog\extension\module and at the respective templates in catalog\template\default\module. The names of these modules correspond to the variables in the layout.tpl

eg: header.php uses header.tpl and is written into layout.tpl by the code snippet Most of the css styles are in catalog\template\default\css\default.css

Hope this helps a bit.

Cheers

Bruce

Another invaluable tool would be the Web Developer extension for Firefox as well. This is excellent for design development. Lets you change CSS & HTML on the fly so you can see how any webpage would look with custom coding.

Also see the "Favorite Tools of the Trade" thread

Thank you for all your help.  Using notepad++ I was able to open the file get things set up how I want them.  I am however now stuck with two more issue.  the first is the footer.  It seems that it is being places based on the size of the content section.  I would like to set it up so that it is always loaded under the column section. any tips on how to do that?

Next there seems to be an issue with my CSS file.  I'm trying to edit the font size for the header links (home, Login, basket, etc) but the size of the font wont change, only the spacing .  Is there something i'm missing?

Once again thanks for the help so far.

For the first question.
If you look at layout.tpl

You should see: The footer is NOT in the content block, as you can see the content block has a before the footer block.

For the CSS, you really need to get the webdev toolbar for firefox to see exactly which parameters are being used to control the links.

From using the toolbar, I found that those links are controlled by the following sections:

*

body, td, th, input, textarea, select, a

a:hover

#header .b a

Hey thanks once again for all the help.  I was able to get everything settled with the text in the side navi bar.  The Web dev toolbar was also a god send.  It made a world of difference when editing the page.  I just the only thing felt now is the footer issue.  The problem is that it seems to load the footer based on the "size of the content section.  for example the home page looks fine but if you click the link for the accounts section the the footer is loaded in the middle of the page.  how would I set it so that it always loads under the column section?

Once again thanks for all of the help so far, it has be EXTREMELY useful.

I'd assume you'd edit #footer in the default.css file
and add:
        width: 500px;

or play with the width until you got the size you want. Then play with some centering of the .a and .b subblocks

Hey thank you for all the help.  I figured it out.  It was the top: field in the CSS file. I had it set to 100% when it should have been set to a px value.

Once again thank you guys for all the help.  Feel free to check out the site and let me know if you see any mistakes.  My next task is making sure everything is uniform in all the web browsers.

shop.kingvagabon.com/test

P.S.  Another great too in addition to the web dev toolbar is firebug.

Thanks again guys.