Kryptronic Software Support Forum

ken_magic · 01-18-2004 18:27:22

Now that i have got this thing running. I wanna change the look of my cart. I dont just want it to be a shopping cart website so i have been playing around with the site html layout and up till now have made a complete mess of it!

Anyways i just want to build a portal. i.e. table with a row/column at the top where i can put my logo and a menu in the left where i can add links too using dreamweaver etc. and in the middle is where i want the cart to appear!

i would really like to see what other people have done with their shopping cart and how they have changed the layout ! just so that i can get some sort of idea of how much i can potentially change; the look of my cart and integrate it with a portal of some sort.

i am not very skilled at programming or anything.. i know dreamweavr and the basics but i dont mind getting my hands dirty..

any advice on anything ?

please ....

i know scoutch owes me a reply !!

Todd · 01-18-2004 18:40:36

Basically you can design a site anyway you want, and drop the CCP element tags in where you want CCP items to show up. That is a very basic explaination, but I would look at the ste_layout.txt file, found in the data/elements folder, that is the file that basically controls the whole look of the site. I have also included some many, if not all, of the most common CCP tags that you can use in your skin.

Code:




<!-- ############################################# -->
<!-- # Common CCP Tags                           # -->
<!-- ############################################# -->


** Notice the directory these things are stored. Your site graphics can be put into this folder. If you want to change your title, button or store graphics you get those from the www/ccp5/media/images/ directory and you will see them those folders. If you keep those same sizes and just change the look CCP will automatically include them into your store as it is set to "pull" those files already.


Image Tag (gif or jpg): <IMG SRC="(CGIVAR)images_path(/CGIVAR)/site/graphic_name.gif  WIDTH="xxx" HEIGHT="xx" BORDER="x">


Small Font: <FONT FACE="(CGIVAR)html_small_font_face(/CGIVAR)" SIZE="(CGIVAR)html_small_font_size(/CGIVAR)" COLOR="(CGIVAR)html_small_font_color(/CGIVAR)">


Base Font for your Site : <FONT FACE="(CGIVAR)html_base_font_face(/CGIVAR)" SIZE="(CGIVAR)html_base_font_size(/CGIVAR)" COLOR="(CGIVAR)html_base_font_color(/CGIVAR)">



<!-- ############################################# -->
<!-- # Common CCP Links                          # -->
<!-- ############################################# -->

<TITLE>(CGIVAR)html_title_bar_text(/CGIVAR)</TITLE>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=splash">home</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=store">online store</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=cart">shopping cart</A>
<A HREF="(CGIVAR)common_url_checkout(/CGIVAR)">checkout</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=contact">contact us</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=form&ref=ste_form_feedback">customer feedback</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=maillist">mail list</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=storepolicies">store policies</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=termsofuse">terms of use</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=privacy">privacy statement</A>
<A HREF="(CGIVAR)common_url_custacct(/CGIVAR)">customer accounts</A>

<A HREF="(CGIVAR)common_url_affacct(/CGIVAR)">affiliate area</A>
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=track">order tracking</A>
<!-- ############################################# -->
<!-- # End Common CCP Links                      # -->
<!-- ############################################# -->





<!-- ############################################# -->
<!-- # Body Tag Insertion                        # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_bodytag")

<!-- ############################################# -->
<!-- # End Body Tag Insertion                    # -->
<!-- ############################################# -->




<!-- ############################################# -->
<!-- # Center Tag Insertion - Top                # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_centertag" PARAMS="1")

<!-- ############################################# -->
<!-- # End Center Tag Insertion - Top            # -->
<!-- ############################################# -->





<!-- ############################################# -->
<!-- # Banner Ad Insertion - Top                 # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_banner" PARAMS="1")

<!-- ############################################# -->
<!-- # End Banner Ad Insertion - Top             # -->
<!-- ############################################# -->



<!-- ############################################# -->
<!-- # Page Title Insertion                      # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_pgtitle")<br>

<!-- ############################################# -->
<!-- # End Page Title Insertion                  # -->
<!-- ############################################# -->



<!-- ############################################# -->
<!-- # Message Insertion                         # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_message")<br>

<!-- ############################################# -->
<!-- # End Message Insertion                     # -->
<!-- ############################################# -->



<!-- ############################################# -->
<!-- # Content Section                           # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_element" PARAMS="(CGIVAR)element_id(/CGIVAR)")<br>

<!-- ############################################# -->
<!-- # End Content Section                       # -->
<!-- ############################################# -->





<!-- ############################################# -->
<!-- # Category Insert Display                   # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_cat_list")

<!-- ############################################# -->
<!-- # End Category Insert Display               # -->
<!-- ############################################# -->




<!-- ############################################# -->
<!-- # Info Insert Display                       # -->
<!-- ############################################# -->
<A HREF="(CGIVAR)common_url_custacct(/CGIVAR)">customer accounts</A><BR><BR>

<A HREF="(CGIVAR)common_url_affacct(/CGIVAR)">affiliate area</A><BR><BR>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=contact">contact us</A><br><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=form&ref=ste_form_feedback">customer feedback</A><br><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=maillist">mail list</A><br><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=storepolicies">store policies</A><br><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=termsofuse">terms of use</A><br><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=privacy">privacy statement</A><br><br>

<!-- ############################################# -->
<!-- # End Info Insert Display                   # -->
<!-- ############################################# -->



<!-- ############################################# -->
<!-- # Store Insert Display                      # -->
<!-- ############################################# -->
<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=search">search</A><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=specials">specials</A><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=bestsell">best sellers</A><br>

<A HREF="(CGIVAR)common_url(/CGIVAR)&pg=new">new items</A><br>
<!-- ############################################# -->
<!-- # End Store Insert Display                  # -->
<!-- ############################################# -->



<!-- ############################################# -->
<!-- # Copyright Insert Display                  # -->
<!-- ############################################# -->

(CGIVAR)copyright_year(/CGIVAR) (CGIVAR)site_owner_name(/CGIVAR)


<!-- ############################################# -->
<!-- # End Copyright Insert Display              # -->
<!-- ############################################# -->


<!-- ############################################# -->
<!-- # Banner Ad Insertion - Bottom              # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_banner" PARAMS="2")

<!-- ############################################# -->
<!-- # End Banner Ad Insertion - Bottom          # -->
<!-- ############################################# -->






<!-- ############################################# -->
<!-- # Center Tag Insertion - Bottom             # -->
<!-- ############################################# -->

(CGIGET TYPE="SUB" VALUE="ste_exec_centertag" PARAMS="2")

<!-- ############################################# -->
<!-- # End Center Tag Insertion - Bottom         # -->
<!-- ############################################# -->

ken_magic · 01-18-2004 19:04:23

hey thanks ..

i will let you know how i get on

altmedic · 01-18-2004 22:40:11

Create the web page design you want in Dreamweaver, leaving a content space where you want ccp51 to insert the various data. Select the html and paste it into ste_layout.txt (delete or save what was there originally). Use the code statements that Chris provided to make the functions you want, like Search, categories, etc.

scoutch · 01-18-2004 22:52:40

Since (CGIVAR) variables are unfamiliar with any web page editor, I recommend using Notepad instead and edit from there what WayneK suggested.

sayerp · 01-19-2004 05:52:56

Editing using Dreamweaver is an easy way to customise.

I created a "layout template" in the CCP51 folders and a CSS file in the same directory. This allowed me to use CSS for formatting of my page and also let me see the wysiwyg layout in DW.

You can even use SITE relative filenames for images provided your site root is defined with HTDOCS, DOCS or WWW etc. as the directory.

Once you are happy with the page then add the CCP tags and save a copy as ste_layout.txt and upload in the ELEMENTS directory.

As the link to the CSS file is supposed to be in the same directory as the layout, I also uploaded the CSS file to the same location on the server as the cp-app.pl file. This then ensures that the WYSIWYG formats are carried through to the store without changing any links.

The best bit about DW is that you can use it to alter all the form inputs and get some customised layouts.

- create a new page
- switch to code view
- cut all of the text & tags from within a CCP admin form
- paste the lot in between the <body></body> tags on the new page
- switch to mixed or wysiwyg format and design!!
- when complete simply copy the text from between the <body></body> tags
- paste into the CCP admin form

You can even save the page for future editing reference!

Have fun !

TerryA · 01-19-2004 08:21:46

EagleWolf,01/18/2004 06:40:36 PM wrote:
I have also included some many, if not all, of the most common CCP tags that you can use in your skin.

Chris, Thanks for the list of tags! This will be a great help for everyone.

Nick, how about making this sticky?

webmaster · 01-27-2004 10:33:44

Sure - it's sticky now.

buehlerfam · 01-29-2004 22:55:29

Where was this post way back in CCP 5.0? I got to fish around hundreds of posts to figure it all out.

I'm jealous. LOL

Scott

wildwebwest · 02-20-2004 21:03:31

Here are a couple of customized ccp5 and ccp51 that I've done.

Still under construction but close to done:

this one is still under construction too:

joolz · 03-03-2004 17:51:50

I have a finished site that i'm changing the cart on. I produced the site in Adobel GoLive 6. Currently i'm using cartsupport.com and it is very easy to use (just very expensive). You plug in the product info and it generates code to drop into your html. I don't want to change the look of my site but don't know where to start. I try to read the manual and find myself falling asleep quickly. I am not a stupid person, but this is starting to make me feel that way.

the site i'm using it on is

If I can get this to work on this site i'll use it on all my other sites.

Any help would be greatly appreciated.

scoutch · 03-03-2004 18:15:34

With CCP, you can easily integrate your layout into CCP's layout. All you need to do is to keep the software's command function and combine them into your design. It, surely, doesn't take two mins to do this but it's quite a great programming experience.

altmedic · 03-03-2004 19:34:01

In CCP51 you create the look of the site this way:

Sign into your admin area, click on HTML Pages & Elements|Manage Site Elements|update site layout. This contains the default HTML of the cart when you start. Next, go to Adobe GoLive and copy the HTML code of your page layout. Switch to admin, put the cursor in the "update site layout" area, select all, then paste what you copied, and submit. Now you have the HTML code of your page in CCP51 and all pages it creates will look like your template.

Alternately, you can download the file ste_layout.txt from ccp51 and paste your HTML into it; then upload it.

You must leave space in your page layout for the content that ccp51 will insert. This space is set at 600px as a default, I think. In this space, (typically a table), paste this code:

(CGIGET TYPE="SUB" VALUE="ste_exec_message")
(CGIGET TYPE="SUB" VALUE="ste_exec_element" PARAMS="(CGIVAR)element_id(/CGIVAR)")

This code is what drives ccp51 to insert the data.

This is most of it. You may need to add some code for search, and for categories you may have on your layout.

joolz · 03-03-2004 21:29:10

Thanks Altmedic. I'll give that a shot. :-)

joolz · 03-04-2004 10:58:52

Right now I have a minimum of 10 products per page. Will it allow me to continue this way. I don't use thumbnails, only photoshop 7 compressed for web images like this:

I am getting ready to paste the html code leaving space for the ccp51 content. Will automatically adjust the page size or ?

Thanks for your help.

scoutch · 03-04-2004 11:01:05

The size depends of your Global settings -- > HTML settings in your admin section. You must ajust the tables from there in order to make your presentation to appear correctly.

myfunkyshop · 01-06-2005 06:15:52

Hi there,

I am having a problem with the width of my website... and don't know which part to edit....

I posted here -

I hope some one can help

From

myfunkyshop · 01-06-2005 06:16:43

Hi there,

Sorry post came up twice

From

kidsandco · 02-15-2005 11:35:43

Can anyone tell me how to make a minor change to the default skin for ccp. i need to move the menu bar on the right (with categories, ploicies, info etc.) to the left of the page. i know its got something to do with table columns. i tried editing the "ste_layout.txt" but couldn't do anything but make a mess.

Can anyone help?

TerryA · 05-05-2005 07:26:29

Bump

confused · 05-19-2005 10:25:46

moved to new post

mfarin42 · 05-20-2005 00:59:40

Is there anyone that I can hire to do customization of the clickcartpro cart I purchased into our current design. I seemed to have hired a company that does not know how to do this at all and absolutely anything they've shown me has been horrible and nowhere near custom.

Any help would be appreciated.

Regards,
Michael

Ninja · 06-26-2005 14:11:32

I put my css and javascript file in the same directory as the cp-app.cgi.

cgi-bin/ccp51/cp-app.cgi
cgi-bin/ccp51/jlpstyle.css
cgi-bin/ccp51/navbar.js

so.. why is it having problems finding the .css and .js files?

I used this code to include them in the layout.txt file:

Code:

<script language="JavaScript" src="navbar.js" type="text/JavaScript">
</script>
<link href="jlpstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">

Ed_H · 06-26-2005 18:57:45

It's not working because src="navbar.js", for example, assumes that the javascript file is in your site root directory. Per your examples they should look like this:

<script type="text/javascript" src="/cgi-bin/ccp51/navbar.js"></script>

<link rel="stylesheet" type="text/css" href="/cgi-bin/ccp51/jlpstyle.css">

Todd · 06-27-2005 12:18:15

Many servers restrict the type of files they serve in the cgi-bin. You might want to create a directory for your css files in the media folder. There is already a javascript directory in the media folder that you can keep your .js files.

Kryptronic Software Support Forum

#1 01-18-2004 18:27:22

Site Html Layout

#2 01-18-2004 18:40:36

Re: Site Html Layout

Code:

#3 01-18-2004 19:04:23

Re: Site Html Layout

#4 01-18-2004 22:40:11

Re: Site Html Layout

#5 01-18-2004 22:52:40

Re: Site Html Layout

#6 01-19-2004 05:52:56

Re: Site Html Layout

#7 01-19-2004 08:21:46

Re: Site Html Layout

EagleWolf,01/18/2004 06:40:36 PM wrote:

#8 01-27-2004 10:33:44

Re: Site Html Layout

#9 01-29-2004 22:55:29

Re: Site Html Layout

#10 02-20-2004 21:03:31

Re: Site Html Layout

#11 03-03-2004 17:51:50

Re: Site Html Layout

#12 03-03-2004 18:15:34

Re: Site Html Layout

#13 03-03-2004 19:34:01

Re: Site Html Layout

#14 03-03-2004 21:29:10

Re: Site Html Layout

#15 03-04-2004 10:58:52

Re: Site Html Layout

#16 03-04-2004 11:01:05

Re: Site Html Layout

#17 01-06-2005 06:15:52

Re: Site Html Layout

#18 01-06-2005 06:16:43

Re: Site Html Layout

#19 02-15-2005 11:35:43

Re: Site Html Layout

#20 05-05-2005 07:26:29

Re: Site Html Layout

#21 05-19-2005 10:25:46

Re: Site Html Layout

#22 05-20-2005 00:59:40

Re: Site Html Layout

#23 06-26-2005 14:11:32

Re: Site Html Layout

Code:

#24 06-26-2005 18:57:45

Re: Site Html Layout

#25 06-27-2005 12:18:15

Re: Site Html Layout

Board footer