Help with editing the site.

[Guest arbak]

Ok this is (I believe) a lot of things to do.

Here is what I’m trying to do. This is my first time using cube cart or any shopping programs like this. I do not know any php.

here is my site.

http://www.nextelconnect.net/store

now what I want to do is.

first take the "Shopping Cart" tab on the right and transfer it to the top of the tabs (boxes) on the left

Then I want to take the 3 tabs under the "Shopping Cart" and transfer does 3 boxes to the Bottom of all the boxes on the left.

Then I want to Expand the box in the middle where all the products and stuff go. Since all the boxes at the right will be gone I would like to make the middle box with the content basically stretch out all the way to the right.

Then if it is possible I would like to take all the boxes on the left and basically combine them... so like stick them together so they are not all in different boxes but in just one big box with lines to separateing each section.

Is any of this even possible with this program? and if it is how and what files do I need to edit.

This is just a fast sketch of what i wan't.

http://www.nextelconnect.net/test.bmp

Hope that helps

Thank you.

[Guest]

is this for version 3?

as i have created something similar for version 2

[Guest Lunnmh]

Hey ardback, like you i am new to Cubecart (first looked at it yesterday).

To do your design ill try and give a quick explanation and hope you understand css and me.

First of all create a template file and copy all the content of an existing template into it ( i suppose you have already done this)

The main files which you edit are index.tpl and layout.css and then the appropriate templates (i.e the boxes)

To get your overall layout i would use something like the diagram attached and from there read the following: (i would do the following on index.tpl file)

Blackline=wrapper div to contain everything,

Blueline = header div to contain header/banner

redline=content wrapper

greenline= float left and put the appropriate boxes you want in there

yellowline= float right and put content and 3 boxes at bottom. Create 1 div to wrap the main content (welcome to cubecart etc) and then to put the 3 boxes at the bottom i would use one classdiv that has a float left and have them float beside each other x3 and then put the appropriate box inside each one.

As you have a couple of floats in here you may need to clear the floats before the end for the content to flow correctly.

to edit the boxes style change this in layout.css:

.boxTitleLeft, .boxTitleRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 70%;

color: #09347C;

background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

width: 155px;

height: 15px;

padding-left: 5px;

padding-top: 1px;

}

.boxContentLeft, .boxContentRight {

border-left: 2px solid #0E51A3;

border-right: 2px solid #0E51A3;

border-bottom: 2px solid #0E51A3;

background-color: #FFFFFF;

padding-left: 5px;

margin-bottom: 10px;

padding-top: 3px;

padding-bottom: 5px;

}

The boxtitle left and right changes the title in the boxes and the content right and left changes the content. As you dont want spacing on the left side so there all together then you should remove the bottom margin.

and to edit the position of everything change index.tpl.

You can also edit the individual templates of the boxes so they display the information you want. Just mainly trial and error, but see how you get on with that if you understand my bable.

Thanks

[Guest arbak]

"evilhomer" I am using the latest version i think thats 3.

Also

Lunnmh so you basicly saying change the stuff in layout.css right?

and it should work? Well i'm going to try this and ill fill you in once i'm done.

Thanks a lot.

------------------------------------------------------------------------------------------

EDIT

I just replase that code but notyhjing really happened.

I could not find the index.tpl

[Guest]

I could not find the index.tpl

To move from left to right or right to left you can move that in skins\Classic\styleTemplates\global\index.tpl where you will find somewehere starting at lines 23 thru 40

If you want to have boxes displayed under the main content box you can place them in a table like so

  <div class="colLeft">

	{CATEGORIES}

	{RANDOM_PROD}  

	{INFORMATION}	

	{CURRENCY}

	{LANGUAGE}

	</div>

	

	<div class="colMid">

	{PAGE_CONTENT}

	</div>

	

	<div class="colRight">

  {SHOPPING_CART}

  {POPULAR_PRODUCTS}

  {SALE_ITEMS}

  {MAIL_LIST}

	</div>

 here is where you move the "boxes" where colleft is the left boxes, mid is main content and colright is right boxes 

	<div class="colMid">

	{PAGE_CONTENT}

	<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">

  <tr>

 	 <td width="33%" align="center" valign="top">{MAIL_LIST}</td>

 	 <td width="34%" align="center" valign="top">{POPULAR_PRODUCTS}</td>

 	 <td width="33%" align="center" valign="top">{SALE_ITEMS}</td>

  </tr>

	</table>

	</div>

[Guest arbak]

YUP that worked thanks a lot.

Also how that i have transfered all the boxes to the left how do the exteng the middle box to strech out to the right?

[Guest Lunnmh]

If you want to have boxes displayed under the main content box you can place them in a table like so

	<div class="colMid">

	{PAGE_CONTENT}

	<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">

  <tr>

  	<td width="33%" align="center" valign="top">{MAIL_LIST}</td>

  	<td width="34%" align="center" valign="top">{POPULAR_PRODUCTS}</td>

  	<td width="33%" align="center" valign="top">{SALE_ITEMS}</td>

  </tr>

	</table>

	</div>

By using tables for design, is that not a bit pointless in a XHTML/CSS design. Using a table for this purpose is not what tables are designed for and it seems pointless do use CC3 which is in XHTML/css and then revert back to tables.

The same thing can easily be achived with 3 divs floating side by side.

Arbak, i have the code at work so ill check when i get there 2day.

[Guest arbak]

ok thank you, if you or anyone can tell me how to extend the middle box all the way to the right that would be nice. lol

[Guest]

started palying with cc3 yesterday changing the design could someone pls tell me wot program they use to edit the .tpl files as i cant open them

<<<<using dreamweaver mx

[Guest]

I Use Crimson Editor (www.crimsoneditor.com) and simply create a new file extensoin association in Windows :(

[Guest]

The same thing can easily be achived with 3 divs floating side by side.

Yeah I played around after I posted and came to that conclusion

started palying with cc3 yesterday changing the design could someone pls tell me wot program they use to edit the .tpl files as i cant open them

<<<<using dreamweaver mx

Can't open them in dreamweaver??? Dude I'm using MX too and no problems here..... look in your file associations (Edit>preferences) or open them within MX (file>open or ctrl+O) should be able to....

[Guest arbak]

use notepath

Can anyone answer my question.

[Guest Lunnmh]

ardback try editing

.colMid {

position: relative;

width: 388px;

float: left;

}

i have done it myself but i changed my code slightly.

I think this is how it is done, try and if it dont work ill recheck.