Jump to content

Total reskinning how-to


Guest woodbtreasures

Recommended Posts

Guest woodbtreasures

I was just looking at aikdo's new skin they're working on (which is awesome BTW) and I had a question come to me.

Would any of you be willing to take the time to go over all of the files necessary to edit to make a completely new page (and not just tweaking and changing an existing skin).

I've read over the knowledge base and I've tried to search and I've looked through the file tree...but I still don't think that I've got them all.

I have a template that I've designed that I want to integrate all of the carts features into, I'm just not sure where/how to start plugging things in.

I know that I'm asking for a lot here, but I really would appreciate the help!

PPPPPPPPPRRRRRRRRREEEEEEEEEETTTTTTTTTY Please :lol:

-jeremy

Link to comment
Share on other sites

Jeremy, the answer will be obvious if you think about it. Virtually every file in the skin folder can be changed and manipulated to produce the effects you want. Under styleImages, you may place any new images you wish to use, delete or replace any and all existing images to your liking. Under styleSheets, you can add new stylesheets and call for them in global/index.tpl and global/cart.tpl, you can delete any existing stylesheets, or you can change any and every property currently listed in any existing stylesheet to suit your desire. In styleTemplates, you can change the structure of any and every box template, content template and global template.

:lol::D :D

Link to comment
Share on other sites

Guest woodbtreasures

Thanks mark :D

So just to make sure that I'm straight on this...

Unless I'm actually trying to change the way that something functions fundamentaly within the cart system itself, I can concentrate my efforts on the folders under my skin of choice and I should be able to accomplish what I'm trying to do...eventually? :lol: Right?

Link to comment
Share on other sites

Absolutely - concerning the look, the presentation of the information on a webpage, everything is done in the skin files - templates feeding into the global templates, governed by stylesheets. Everything needed for a skin is in the skin's files - so you can change skins by changing skin files to get a completely different look. IOW, Classic skin for example, every file you find under the folder Classic (in styleImages, styleTemplates and styleSheets) can be edited, and manipulated to get the look you want without goofing up your store in any way.

Choose a stock skin - copy the entire folder on your hard drive - change the name to make it descriptive of your new skin - now upload the renamed folder back to your site. In ACP, choose this new skin name from the drop down.

Now you can begin editing files. Experiment, practice, ask advice here (after searching and reading tutorials :lol: ), work on getting a whole new look. If you mess something up, no problem, you can always switch back to one of the original three skins.

Everything within a particular skin file is totally customizable with little danger of screwing up the store :D

Link to comment
Share on other sites

A tip for you and the way i always build a site, start of and just build a HTML page... Then Basicaly Disect it and place it into the right files in your skin directory...

As long as you have a basic knolwege of the templat values IE {TXT_whatever} ect the you will be able to place them in the apropriate places...

Alot is controled by the CSS and that is the idea of it that one edit in the CSS files and everything thats related updates...

Thank you for the compliment about the skins btw, i am trying to figure the problems im having out but they have me stumped...

Link to comment
Share on other sites

Guest woodbtreasures

Thanks for the encouragement guys.

I've actually made several modified stock skins for cc3 that I'll be putting on my site for downloading eventually.

I just wasn't sure about completely starting from scratch. I guess that I knew the answer all along, I just needed for someone to tell me that I was right so I didn't waste a whole lot of time going about things in completely the wrong way. :lol:

Now it looks like I'm going to have to give it a try. :D

Link to comment
Share on other sites

Guest woodbtreasures

Ok, it seems as if I may have spoke too soon.

For some reason I'm just having a heck of a time wrapping my brain around how to get this to work for me.

This is one of those things I need someone to give me a swift kick and slap up side the head telling me duh!, because I know if shouldn't be all that difficult with cubecart 3.x.x's template system.

Here's where I'm at. I've got this template here that I'm attempting to make into a storefront. But I'm stuck. I don't know what to do.

Do I simply need to start writing my own layout.css and style.css files? For right now I'm only really interested in gettting the stock content to show up on the page. I've bookmarked that code that aikdo gave on another post on how to use buttons for legend/classic skins in place of pure text, so I'll get that part worked out as well.

Is somebody interested in helping me to get started out here?

I'm just lost :(

Sorry for sounding like an idiot here. All help is supremely appreciated. */*

Link to comment
Share on other sites

Jeremy, VERY nice design. As to the link, you need to put a "dot com" in there */*

Try this

Yes, I can help you with this; sending PM. This is the same approach I took with this skin, which is still under development: http://allservico.com/skinTest/

1st, copy all the HTML and <head> information (everything above the opening <body> tag) from global/index.tpl, and paste it into your index.html replacing the existing head information with the new. There is a javascript call at the very top of your present index.html page, if you plan to use this javascript for some functionality in your finished skin, be sure to add it back in by pasting that line beneath the other javascript calls in the head section code you paste in from CubeCart.

2nd, make sure the page now starts with the <!-- BEGIN: body --> comment you should have just pasted in with the whole upper head section block, and now go to the bottom of the page and add a comment,

<!-- END: body -->

3nd, rename your file to index.tpl and put it in the global folder. You should first name the original index.tpl to index.BAK.tpl or whatever, to preserve it for reference.

4th, if you have a decent text editor, set language to XML for all files with .tpl extension. Look at your file and see if you can spot any little problems for tune-up.

5th, compare your new index.tpl with index.BAK.tpl, and begin pasting code for links, boxes, etc. from original template to wherever you want them in the new template, adjusting things as you go.

There is no need to make a new styleSheet, though you certainly can. Any stylesheet you use needs to be linked in the head section, just like the originals.

You can use classes from the existing style sheets to define text properties, box properties, etc. etc.

You have full flexibility here :(

Link to comment
Share on other sites

@ markscarts ... i have already helped with the development of this skin, the basic template files have been created and now woodbtreasures is playing with the CSS to make it look perfect... :wacko:

But im sure your advice will come in hand to other users...

Link to comment
Share on other sites

Sorry i left almost straight after helping with the skin... had to travel 30miles away just to turn around travel 60miles the other direction then turn and go home... I wish all my customers lived in once place, being in the middle of them and having to visit one then the other isn't half time consuming...

Link to comment
Share on other sites

Guest woodbtreasures

Mark-

Thank you a great deal actualy!

Aikdo did a great job a skinning the page, but he basicaly did it for me (thank god, otherwise I'd still be working on it)

But your explanation went a long way towards telling me how I will need to do things for other templates.

I truly greatly appreciate all of the help provided by the both of you and hope that I can do something in return to help out in return. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...