Announcement

Collapse
No announcement yet.

Trying to apply my new design to 3DC

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying to apply my new design to 3DC

    Hello all,

    I hired a coder to transform my design into a CSS+XHTML table-less design, and they did a very good job in my opinion.

    http://dl.getdropbox.com/u/626153/AE..._v1/index.html
    That is what it's supposed to look like. Here is a PNG for reference too:

    http://dl.getdropbox.com/u/626153/AEBIKEv5.png

    Now I am trying to get this into the form of a 3DCart template. I am starting just with the home page.
    I created a new folder in my template directory, and renamed my new index.html file as frame.html and placed it in the new template folder. I uploaded my CSS and images there as subfolders, and updated the pathnames of the CSS and image references to match.

    It looks completely messed up:
    https://aebike.3dcartstores.com/


    I assume there is something simple I can do to make things translate.. any advice?
    Last edited by cbsteven; 10-21-2009, 02:54 PM.

  • #2
    The best way to go about this is:

    #1 - Download a frame.html from any of the template folders so that you can understand how the templates work. its not hard, specially if you know HTML & CSS. Basically you have [VARIABLES] and Code blocks that look like
    < --START: something -- >
    < --END: something -->

    #2 - You take your index.html you have there, and you start moving things from FRAME file you were looking at. Start top to bottom:

    The CSS files on the header, JS files, etc. Now, as for the CSS, you are going to want to place yours under the one 3dcart mentions on the template so that yours overwrites the one we provide. This is a good way to get things moving quickly without having to style every other section like the checkout pages, etc.

    #3 - Anything you have on your template that will remain static, you can leave, ie. if you want your left navigation to remain static always, you can leave it like that. If you want instead for 3dcart to replace it with your categories dynamically, look at the way the code block "CATEGORIES" works, and implement it on your template. Essentially, remove all categories but 1, then place the code above and below the area that will repeat, and, replace the category name/link. ie.

    HTML Code:
    <div class="product-catalog"> 
    <h3>Product Catalog</h3> 
    <ul> 
    <li><a href="#">Accessories</a></li> 
    <li><a href="#">Apparel</a></li> 
    ..
    Will become something like:

    HTML Code:
    <!--START: FRAME_CATEGORY-->
    <div class="product-catalog"> 
    <h3>Product Catalog</h3> 
    <ul> 
    <!--START: CATEGORIES-->
    <!--START: CATEGORY_FORMAT-->
    <li><a href="view_category.asp?cat=CATID">CATEGORY</a></li> 
    <!--END: CATEGORY_FORMAT-->
    </ul>
    <!--END: FRAME_CATEGORY-->
    Same goes for other sections of the template, like the TITLE tag, etc.

    Also, since you are working on the frame.html, look for "MIDDLE" this needs to be placed were the content for the page will display. So normally a frame template looks like

    [HEADER]
    3 columns (left section for categories)(middle section were content will display, this is where the MIDDLE tag goes)(right section for right column)
    [FOOTER]

    The actual layout for home template would then be modified on home.html, for categories category_0.html, etc.
    ----------------------------
    Gonzalo Gil
    3dCart Support
    800-828-6650 x111

    Comment


    • #3
      Thank you sir. I will work on this tomorrow.

      Comment


      • #4
        It is coming along, slowly but surely.

        A couple questions.

        Do blocks like the NEW_RELEASES_BLOCK depend on the HTML <table> to work? I did a very simply test, replacing my own static new items block:

        PHP Code:
        <!-- right column new items list start -->
                                <
        ul class="new-items">
                                    <
        li>
                                        <
        class="img-holder" href="#"><img alt="" src="assets/templates/AEBikev1/images/product-item1.jpg" width="145" height="149"/></a>
                                        <
        a href="#" class="product-name">Sinz Platform Pedals <br />$62.99</a>
                                    </
        li>
                                    <
        li>
                                        <
        class="img-holder" href="#"><img alt="" src="assets/templates/AEBikev1/images/product-item2.jpg" width="145" height="149"/></a>
                                        <
        a href="#" class="product-name">Saris Bones 3-Bike Rack <br />$159.99</a>
                                    </
        li>
                                    <
        li>
                                        <
        class="img-holder" href="#"><img alt="" src="assets/templates/AEBikev1/images/product-item3.jpg" width="151" height="149"/></a>
                                        <
        a href="#" class="product-name">Park CN-10 Cable Cutter<br />$25.99</a>
                                        <
        class="more" href="#">More New Items...</a>
                                    </
        li>
                                </
        ul>
                                <!-- 
        right column new items list end --> 
        with a block ripped right from the template:

        PHP Code:
        <!--STARTNEW_RELEASES_BLOCK-->
                                    <
        table width="160" cellpadding="4" cellspacing="0" border="0">
                                        <
        tr>
                                            <
        td class="menu-headers" colspan="2">New Releases</td>
                                        </
        tr>
                                        <!--
        STARTnewreleases-->
                                        <
        tr>
                                            <
        td align="center"><a href="product.asp?itemid=[catalogid]"><img src="[thumbnail]" border="0" alt="[name]"></a></td>
                                        </
        tr>
                                        <
        tr>
                                            <
        td align="center" class="item"><a href="product.asp?itemid=[catalogid]">[name]</a></td>
                                        </
        tr>
                                        <!--
        ENDnewreleases-->
                                    </
        table>
                                    <!--
        ENDNEW_RELEASES_BLOCK--> 

        It ended up with just a blank area on my page where the block should appear. I only have one item in my catalog, with no image.


        Question two. In the original frame.html file (I am using template #6, btw), the only reference I see to "middle" is:
        PHP Code:
        <!--ENDLEFT BAR-->
                                <
        td align="center" valign="top" width="100%">MIDDLE</td>
                            </
        tr
        This doesn't seem to be any kind of tag, just the word middle in a table cell. Where does the content from home.html come into play?


        Thanks

        Comment


        • #5
          The code block looks ok, my only guess is that you have new releases turned off perhaps?

          have you changed to the default frame and see if it works there? If it does you know that the setting is correct...


          Yes, that's the only tag "MIDDLE" that you need to place (CAPS and all). Long time ago, back on V1.0, we didn't use [] we just used keywords in CAPS, we've since stopped doing that, but, this is one of those tags that remained for compatibility reasons.
          ----------------------------
          Gonzalo Gil
          3dCart Support
          800-828-6650 x111

          Comment

          Working...
          X