Guest boodle Posted May 21, 2007 Share Posted May 21, 2007 guys, i have been asked to create a website capable of using a basket type software. i have 2 sites already running CC, but only with free skins that i have found here. this new site requires a custom skin, and im not sure how to tackle it. idealy i would like to create my own pages in dreamweaver and simple have an add to basket button, then a checkout button which then takes you to a single page to input details etc. is this possible or does it all have to be driven with CC? i have no experience in skin modding, and the sort of layout/features they want is like this site, http://www.barijay.com ie big picture on the left and a scroll bar on the right to navigate the site. they dont want any 'new products' 'special offers' or 'home' type tabs any where, just simple words at the top to click on to go to a new category. if someone can start me of with how to create the basics of a simular page that would be great. thanks ben Quote Link to comment Share on other sites More sharing options...
markscarts Posted May 21, 2007 Share Posted May 21, 2007 You can create html pages in Dreamweaver or whatever, then code the templates into CubeCart. To be very successful at it, you should know the basics of writing and editing html and css directly. For this type of site, it would help to be a little familiar with javascript too. I really like the concept of the site. When you look at barijay.com/salon.php it is analogous to looking at a customized cubecart viewCat page. The large image on the left could represent the CubeCart random image (featured product) showing full-size rather than thumb photo, or it could represent a static category image, either way easily done by modding cubecart code a little. The "slidestrip" represents the product list that appears on viewCat pages in cubecart, the prod list is simply coded as a filmstrip rather than a tabled list, using only product images with alt and title tags that are linked to the viewProd pages. The effect on this site is great, as it gives the appearance of browsing through a wardrobe closet. Following is some information I posted in another forum once about coding the html templates into cubecart, perhaps you may find it helpful. Question Let me see if I have gotten this right. The .tpl files can actually contain all types of html tags as long as I use the {tags} in the places I want them to show up. If I am correct with that statement then I should actually be able to create actual .html/.htm files so that I can see what is happening in the Windows environment and then change the extension to .tpl when I have it like I want. AM I CORRECT THERE? Answer Hi Scott! You are correct in principle, I'll give you the whole picture to the best of my ability. First, the global/index.tpl will be the basic cubecart equivalent of your html page. This template is a straightforward HTML page, with two notable exceptions, explained below. Open yours and study along. • Like any valid HTML or XHTML page, it starts with a DOCTYPE declaration. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • As with all HTML pages, the "code proper" begins and ends with the html tag: <html> . . . </html> <html xmlns="http://www.w3.org/1999/xhtml"> and at the bottom of the page </html> • The opening HTML tag is followed by a head section: <head> . . . </head> This section, like any normal html document, contains META tags and links to external scripts and stylesheets, etc. <head> <meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" /> <title>{META_TITLE} <meta name="description" content="{META_DESC}" /> <meta name="keywords" content="{META_KEYWORDS}" /> <link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" /> <link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" /> <script language="javascript" src="js/jslibrary.js" type="text/javascript"> </head> • Following the head section comes the body section: <body> . . . </body> This section contains the code behind what you actually see on the webpage; i.e., the body of the webpage. It contains block-level tags or elements like <div> and <p> and <ul> and <form>, and line-level tags or elements like <span>, <strong>, <li>, etc. --------------------------------------- The page you create in your wysiwyg editor should contain all these elements! --------------------------------------- The two notable exceptions ~ First, note the <!-- BEGIN: special_name --> and <!-- END: special_name --> These look like any old html comments, but they are special markers for telling php where to parse active content from the php includes files. It is important to retain these markers, and to be sure they are in the correct file and in the right place. Certain content must remain between each specific set of markers, and certain content should be kept out from between these markers. Second, note the {SPECIAL_NAME} tags. These are content markers or variables that place php-generated content on the page, and in the global/index.tpl file they represent other .tpl files found in styleTemplates/boxes and styleTemplates/content. If you look at these other non-global .tpl files, you will see that they, too are html with the same two exceptions, but these files do not have doctype declarations, <html> tag, nor head nor body tags. These represent html snippets that are "pasted" into the body section of your xhtml document by use of the above mentioned {SPECIAL_NAME} tags. --------------------------------------- A basic understanding of the above is essential to doing what you wish to do, successfully. With that in mind, here is your general recipe: 1. Create your document using dreamweaver or some other creation program in the XHTML 1.0 format. 2. Copy and replace the doctype declaration and the <html> tag from stock cubecart skin text (recommended) 3. Place the <!-- BEGIN: body --> and <!-- END: body --> markers at beginning and end of page, respectively. 4. "Cut" the code snippets for boxes out of your created page and paste them into the correct styleTemplates/boxes .tpl files. • NOTE: You must re-code these snippets for active content using the php cues in each file appropriately, analogous to the original files ~ 5. Use the correct {SPECIAL_NAME} tags in place of the snippets you cut for pasting in the other files. 6. Likewise, "cut" the main content code and place it in styleTemplates/content/index.tpl, and again you must re-code this snippet for active content using the php cues appropriately, analogous to the original styleTemplates/content/index.tpl -------------------------------------- All of this can be a piece of cake if you are very familiar with coding, or it could be like a difficult birthing for the novice, but in any case it represents work. -------------------------------------- I hope this overview has been helpful; any feedback is appreciated. :D Quote Link to comment Share on other sites More sharing options...
Guest boodle Posted May 22, 2007 Share Posted May 22, 2007 thanks for that. ill look into it. i never studied any web design course so im all self teached. (excuse my bad grammar lol) chances are it'll be over my head but ill give it a go. :D Quote Link to comment Share on other sites More sharing options...
Guest Posted May 26, 2007 Share Posted May 26, 2007 this should be pinned - "The Basics of Starting Skinning Your Own Store Guide by MarksCarts" :sourcerer: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.