Announcement

Collapse
No announcement yet.

Finished rough draft of design, soliciting opinions

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

  • Finished rough draft of design, soliciting opinions

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

    Spent a few hours mocking this up based on a template I purchased from Template Monster. Would this be hard to implement in the 3D templating system? I am thinking of using this site to slice it into XML/CSS:

    http://markup-service.com/Order/Create

    Only $319 for their deluxe package. They've been very responsive on email and I sent them some example 3DC template files, they are examining them now.

  • #2
    Looks good, simple clean design.

    Do you know anything about CSS or HTML yourself? there is nothing difficult about your design as far as i can see... It would not be hard for you to do it yourself, as long as you knew a little about how things work. The nice part about the 3dcart templates are that they are pretty easy to work with, just cut and paste sections.

    I recently converted the main template of my site over to CSS. The powerful thing about it is once you get all the elements isolated in their own <div>'s then you use use the css code to place things where you want them, and make it look how you want.

    If your not at all technical, then your best bet would be to use the service you talked about, but they are going to over charge in my opinion. And you might still have to pay extra to get 3dcart to take their work and apply it to your site. The other thing is 3dcart does not seem to officially sanction CSS, they allow it of course, but their opinion is its not compatible with as many browsers as a table layout... This is debatable, but it comes down to the fact they may not be willing to help you as much.

    Comment


    • #3
      Thanks for the input.

      I actually do have a technical bent and am more comfortable messing around with CSS and HTML than in Photoshop. Creating that design from a template certainly pushed my skills to the max. I am perfectly comfortable editing code and tweaking stuff, but starting from a blank page is a bit overwhelming. Especially when you consider having to worry that something you do might work one way in one browser but a different way in another.

      Any advice on that?

      Comment


      • #4
        I have tested it in pretty much every browser i can, and it seems to look the same... I think that you get the errors with different browsers when your pushing the limits of CSS, but im just positioning stuff.

        You wont be able to just cut and paste this, because i have added some "permanent" things into it... The mailing list is using code that applies just to me, because im using a 3rd party mailing list service... also the header has my logo URL in it. But both of these things are easily edible.


        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
        <html><head>
        
        <style type="text/css"> 
        body {text-align: center; } 
        
        .wrapper {
        	position:relative;
        	width:900px;
        	margin:0 auto;
        	text-align:left;
        }
        
        .menu-headers {
        	margin-top:10px;
        }
        
        #mainheader {
        	height:110px;
        }
        #mainleft {
        	float:left;
        	width:165px;
        }
        #mainright {
        	float:right;
        	width:730px;
        }
        #mainfooter {
        	clear:both;
        }
        
        #externallinkbackground {
        	position:absolute;
        	background-image: url(http://www.nmteaco.com/assets/images/Logos/headers/externallinkbackground.png);
        	width: 182px;
        	height: 36px;
        	z-index: 1;
        	left: 497px;
        	top: 77px;
        }
        
        #toplinks {
        	position:absolute;
        	left: 5px;
        	top: 86px;
        }
        
        #shoppingmenu {
        	position:absolute;
        	width: 900px;
        	text-align:right;
        	left: 0px;
        	top: 0px;
        }
        #searchbox {
        	position:absolute;
        	z-index: 1;
        	left: 709px;
        	top: 79px;
        }
        #externallinks {
        	position:absolute;
        	z-index: 2;
        	left: 513px;
        	top: 86px;
        }
        
        div#commentForm
        {
        	position:absolute;
        	width: 250px;
        	padding: 10px;
        	background-color:#FFC;
        	left:170px;
        	z-index:50;
        	display: none;
        }
        
        </style>
        
        <title>[TITLE]</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        [META]
        
        
        <LINK REL="StyleSheet" HREF="assets/templates/[template]/css/[stylesheet]" TYPE="text/css" MEDIA="screen">
        
        <meta name="verify-v1" content="HySyWt/sygYIYEVc/yTxgAnMGGequzIk0K98eop0X5Q=" />
        </head>
        <body>
        
        <div class="wrapper">
        
        <div id="mainheader">
        	<div id="headerimage" style="background-image:url(http://nmteaco.com/assets/images/Logos/headers/websiteheader-main.jpg); width: 900px; height: 107px; z-index:-10;"></div>
        
        	<div id="externallinkbackground"></div>
          
        <div id="shoppingmenu">
        	[account_greeting] [username]  |  <a href="myaccount.asp">My Account</a>  |  <a href="crm.asp?action=add">Customer Service</a>  |  <a href="view_cart.asp">			<img src="assets/templates/[template]/images/cart.gif" alt="Shopping Cart" border="0" /></a> <a href="view_cart.asp">Shopping Cart</a> - [ITEMSINCART] 	    item(s)
        </div>
            
        <div id="toplinks">
        	  <!--START: menuitems_view-->
        	  <!--START: TOP_LINK_FORMAT-->
        	  <td>&nbsp;</td>
        	  <td><a href="infopage.asp?page=[link_id]" class="menu" target="[link_target]"> [link_name] </a></td>
        	  <td><!--END: TOP_LINK_FORMAT-->
        	    <!--END: menuitems_view--></td>
        </div>
            
            <div id="externallinks"> 
        <a href="http://blog.nmteaco.com" class="menu" >The Tea Blog</a> &nbsp; <a href="http://www.nmteabar.com" class="menu">The Tea Bar</a></div>
        
        <div id="searchbox">
        <!--START: FRAME_SEARCH-->
                          <form method="get" action="search.asp" STYLE="margin: 0px; padding: 0px,0px,0px,0px;" >
                            <table border="0" align="center" cellpadding="4" cellspacing="0"  ID="Table2">
                              <tr>
                                <td><input  type="text" size="13" name="keyword" class="txtBoxStyle">
                                </td>
                                <td><input  type="submit" name="search" value="SEARCH" class="btn" >
                                </td>
                              </tr>
                            </table>
                          </form>
        <!--END: FRAME_SEARCH-->
        </div>
        </div>
        
        
        
        
        
        
        <div id="mainleft">
        
        <!--START: FRAME_CATEGORY-->
        <div class="menu-headers" style="margin-top:0px;">[frame_categories]</div>
        <img src="assets/templates/[template]/images/dots.gif" alt="" /><br>
        
        <!--START: CATEGORIES-->
        <!--START: CATEGORY_FORMAT-->
        <a href="view_category.asp?cat=CATID" class="cat">  <span class="icon">ยป </span>CATEGORY</a><br>
        <!--END: CATEGORY_FORMAT-->		
        <!--START: SUB_CATEGORY_FORMAT-->
        &nbsp;&nbsp;&nbsp;<a href="view_category.asp?cat=CATID" class="cat"> <span class="icon">  - </span>CATEGORY</a><br>
        <!--END: SUB_CATEGORY_FORMAT-->
        <!--END: CATEGORIES--> 
        <!--END: FRAME_CATEGORY-->
        	 
        <!--START: FRAME_MANUFACTURER-->	
        <form name="mfg" id="mfg" method="get" action="search_groups.asp" STYLE="margin: 0px; padding: 0px;">	 
        <div class="menu-headers">[frame_manufacturer]</div>
        <img src="assets/templates/[template]/images/dots.gif" alt="" />
        <select name="manf" onChange="this.form.submit();" ID="Select1"  class="txtBoxStyle" style="width:150px;">
        <option value=0 selected class="txtBoxStyle">Manufacturer</option>
        <!--START: manufacturer_format-->
        <option value=[mfgid] class="txtBoxStyle">[manufacturer]</option>
        <!--END: manufacturer_format-->
        </select>
        </form>
        <!--END: FRAME_MANUFACTURER-->
        
        
        <!--START: MAILING_LIST-->
        <div class="menu-headers">Mailing List</div>
        <IMG alt="asdasd" src="assets/templates/v30014/images/dots.gif"><br>
        
        <div id="commentForm">
        <form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup10726" accept-charset="UTF-8" onsubmit="return verifyRequired10726();">
        <input type=hidden name=redirect value="http://www.nmteaco.com" />
        <input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" />
        
        <div id="SignUp">
        <div style="float:left">Email:</div><div align="right"><input type=text name="fields_email"></div><p>
        <div style="float:left">First Name:</div> <div align="right"><input type=text name="fields_fname"></div><p>
        <div style="float:left">Last Name:</div> <div align="right"><input type=text name="fields_lname"></div><p>
        <div>How did you hear about us?<br >
        <div align="right"><input type=text name="fields_hearaboutus?"></div></div><p>
        <input type=hidden name="listid" value="150859">
        <input type=hidden name="specialid:150859" value="MU0J">
        <input type=hidden name=clientid value="330748">
        <input type=hidden name=formid value="10726">
        <input type=hidden name=reallistid value="1">
        <input type=hidden name=doubleopt value="0">
        <div style="float:left">* = Required Field</div>
        <div align="right"><input type="submit" name="Submit" value="Submit"></div>
        </div>
        </form>
        <div align="right"><input type="reset" name="reset" value="Cancel"
        onclick="javascript:toggleLayer('commentForm');" /></div>
        </div>
        
        
        <center><a href="javascript:toggleLayer('commentForm');" title="Email List Signup">
        <img style="border:none" src="/assets/images/Logos/Templateimages/Emailsignup.png" /></a></center>
        <font size="1">Each monthly email includes a coupon for a free ounce of your preferred tea. <br><br>
        I hate spam! We will never sell your address. <a href="/Will-you-spam-me-or-sell-my-e-mail-address_df_72.html">Privacy</a>
        </font> <br>
        <script language="javascript">
        function toggleLayer( whichLayer )
        {
          var elem, vis;
          if( document.getElementById ) // this is the way the standards work
            elem = document.getElementById( whichLayer );
          else if( document.all ) // this is the way old msie versions work
              elem = document.all[whichLayer];
          else if( document.layers ) // this is the way nn4 works
            elem = document.layers[whichLayer];
          vis = elem.style;
          // if the style.display value is blank we try to figure it out here
          if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
            vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
          vis.display = (vis.display==''||vis.display=='block')?'none':'block';
        }
        </script>
        
        <script type="text/javascript">
        
        var icpForm10726 = document.getElementById('icpsignup10726');
        
        if (document.location.protocol === "https:")
        
        	icpForm10726.action = "https://app.icontact.com/icp/signup.php";
        function verifyRequired10726() {
          if (icpForm10726["fields_email"].value == "") {
            icpForm10726["fields_email"].focus();
            alert("The Email field is required.");
            return false;
          }
          if (icpForm10726["fields_fname"].value == "") {
            icpForm10726["fields_fname"].focus();
            alert("The First Name field is required.");
            return false;
          }
          if (icpForm10726["fields_lname"].value == "") {
            icpForm10726["fields_lname"].focus();
            alert("The Last Name field is required.");
            return false;
          }
        
        
        return true;
        }
        </script>
        <!--END: MAILING_LIST-->
        
        
        <!--START: NEW_RELEASES_BLOCK-->
        <div class="menu-headers">New Releases</div>
        <img src="assets/templates/[template]/images/dots.gif" alt="" /><br>
        <!--START: newreleases--> 
        <a href="product.asp?itemid=[catalogid]"><img src="[thumbnail]" border="0" alt="[name]"></a><br>
        <center><a href="product.asp?itemid=[catalogid]">[name]</a></center>
        <!--END: newreleases-->	
        <!--END: NEW_RELEASES_BLOCK-->	
        
        <!--START: TOP_SELLERS_BLOCK-->
        <div class="menu-headers">Best Sellers</div>
        <img src="assets/templates/[template]/images/dots.gif" alt="" /><br>
        <!--START: topsellers--> 
        <a href="product.asp?itemid=[catalogid]" class="cat"><img src="thumbnail.asp?file=[thumbnail]&maxx=30&maxy=0" align="middle" border="0" id="thumbnail" name="thumbnail"></a>
        <a href="product.asp?itemid=[catalogid]" class="cat">[name]</a><br>
        <!--END: topsellers-->								
        <!--END: TOP_SELLERS_BLOCK-->
        
        <!--END: LEFT_BANNER-->	
        </div>
        
        <div id="mainright">
        <!--start middle column-->
        MIDDLE
        <!--end middle column-->
        </div>
        
        <div id="mainfooter">
        <center>
        [GLOBAL_FOOTER]
        <HR>
        <!--START: FRAME_LINKS-->
        <!--START: LINKS-->
        <!--START: LINK_FORMAT-->
        <a href="infopage.asp?page=[link_id]&extra=1" target="[link_target]">[link_name]</a>  |
        <!--END: LINK_FORMAT--> 
        <!--END: LINKS--> 
        <!--END: FRAME_LINKS-->	
        <HR>    
        [frame_copyright1]
        </center>
        </div>
        </div>

        Comment

        Working...
        X