Help - Search - Members - Calendar
Full Version: Background Home Page
MonsterSmallBusiness Forums > MonsterWebDesign > Designing Your Storefront
energysuperstore
Hey,

I want to make the background of my home page the same color as I have it on the page. Meaning I want to tile it out to the sides. How do I begin to do that. I also have custom pages that are longer than my home page so it looks really bad when you scroll down and all you see is the center content because the left border or nav bar is so short. How would I fix this? Thanks for the quick response. here is the url of my site.

www.energy-superstore.com

Also I want to embed the login image onto the home page. How would I do that?
agkits
Put this in your custom.css

CODE
body {background-image: url(/images/background1.gif); background-repeat:repeat-y;}


If you already have the body tag...obviously just add...

CODE
background-image: url(/images/background1.gif); background-repeat:repeat-x;


Download this image: Background Image

Upload it to the Images folder in your File Manager.

It's 1500px tall so it should be enough for your pages. If you need more still just add more gray to the bottom.

Hope that helps thumbsup.gif
Justyn
agkits
Sorry didn't see that last part...

Embedding your login use these lines of code. You should be able to customize length of the boxes if need be.

CODE
<input type="text" class="sitewideinput" name="txtusername" maxlength="100" tabindex="1" size="20" value="">
<input type="password" class="sitewideinput" name="txtPassword" maxlength="50" tabindex="1" size="20" value="">
<input type="submit" value="Login" name="btnLogin" class="storebuttons" ID="Submit1">


You would have to put them in some sort of table and label them to make them look good. But those are what you should work with.

thumbsup.gif
energysuperstore
QUOTE(agkits @ Nov 14 2007, 01:53 PM) *
Sorry didn't see that last part...

Embedding your login use these lines of code. You should be able to customize length of the boxes if need be.

CODE
<input type="text" class="sitewideinput" name="txtusername" maxlength="100" tabindex="1" size="20" value="">
<input type="password" class="sitewideinput" name="txtPassword" maxlength="50" tabindex="1" size="20" value="">
<input type="submit" value="Login" name="btnLogin" class="storebuttons" ID="Submit1">


You would have to put them in some sort of table and label them to make them look good. But those are what you should work with.

thumbsup.gif


ok thanks for the repsonse. Now when I enter the code into my cell how do I make it where the hit login that it actually logs them in. Do you know how I can do that?
agkits
CODE
<input type="submit" value="Login" name="btnLogin" class="storebuttons" ID="Submit1">


That part is the button that should log you in.
energysuperstore
QUOTE(agkits @ Nov 16 2007, 10:20 AM) *
CODE
<input type="submit" value="Login" name="btnLogin" class="storebuttons" ID="Submit1">


That part is the button that should log you in.




I have this code in but it doesn't log you in.

You can take a look.....www.energy-superstore.com.
agkits
Sorry forgot the form part. Try this:

CODE
<form name="frmLogin" action="index.asp?PageAction=LOGIN&amp;Auth=1" method="post"><tr><td valign="top" class="sitewide">&nbsp;</td>
<td class="sitewide">&nbsp;</td>
<td class="sitewide"><table width="46%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="sitewide" width="291">Username or Email Address:</td>
    <td width="152" class="sitewide"><input type="text" class="sitewideinput" name="txtusername" maxlength="100" tabindex="1" size="20" value=""></td>
  </tr>
  <tr>
    <td height="16" class="sitewide">Password:</td>
    <td class="sitewide"><input type="password" class="sitewideinput" name="txtPassword" maxlength="50" tabindex="1" size="20" value=""></td>
  </tr>
  <tr>
    <td class="sitewide" colspan="2"></td>
  </tr>
  <tr>
    <td height="22" class="sitewide" colspan="2"><input type="submit" value="Login" name="btnLogin" class="storebuttons" id="Submit1"></td>
  </tr>
</table></td>
</tr></form>


You'll have to customize the tables to fit ..but it should work now. wink.gif
energysuperstore
Thanks. That worked great. I appreciate the help. If I can could I ask you to help me out on one more part and then i promise I'll leave you alone. lol. I want to set up my cart but the default cart does not go with my page. I doon't understand the draw functions could you give me an example how it works. 9What does the code look like) Thanks.





QUOTE(agkits @ Nov 19 2007, 09:35 AM) *
Sorry forgot the form part. Try this:

CODE
<form name="frmLogin" action="index.asp?PageAction=LOGIN&amp;Auth=1" method="post"><tr><td valign="top" class="sitewide">&nbsp;</td>
<td class="sitewide">&nbsp;</td>
<td class="sitewide"><table width="46%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="sitewide" width="291">Username or Email Address:</td>
    <td width="152" class="sitewide"><input type="text" class="sitewideinput" name="txtusername" maxlength="100" tabindex="1" size="20" value=""></td>
  </tr>
  <tr>
    <td height="16" class="sitewide">Password:</td>
    <td class="sitewide"><input type="password" class="sitewideinput" name="txtPassword" maxlength="50" tabindex="1" size="20" value=""></td>
  </tr>
  <tr>
    <td class="sitewide" colspan="2"></td>
  </tr>
  <tr>
    <td height="22" class="sitewide" colspan="2"><input type="submit" value="Login" name="btnLogin" class="storebuttons" id="Submit1"></td>
  </tr>
</table></td>
</tr></form>


You'll have to customize the tables to fit ..but it should work now. wink.gif

agkits
The draw functions are just a simple way of displaying the code. Here is how they work:

<%DRAWCART%> displays:

CODE
<table background="Images/cartbg.gif"  border="0" valign="top" cellpadding="0" style="border-collapse: collapse" class="shoppingcartbg" width="100%" height="60" id="AutoNumber1">
                    <tr>
                      <td align="center" background="Images/cartbg.gif"  width="100%" height="60" class="shoppingcartbg">
                      <b><font class="shoppingcart">Your Cart Is Empty</font></b></td>
                    </tr>

                </table>
                <br>


Where <%DRAWCART2%> displays:

CODE
    <script language="javascript">
    varlast =
    varMinOrderQty = 0
    function Cart2Checkout(intCartQty, intMode)
    {
    
    if(intCartQty==0 && intCartQty < varMinOrderQty) {
            alert('Your Cart is empty, please add items before checking out')
            
    }
    else
    {    
    
      if (intCartQty < varMinOrderQty)
        
            alert('The minimum order amount is $0')
        
    else
    {
        
if (intMode == 2)
{
window.location.href = ("index.asp?PageAction=GETGBUYCART");
}
else
{

            window.location.href = ("https://www.agkits.com/index.asp?PageAction=CARTCHECKOUTLOGIN");
        }

    }

    }
     }    
    function validateDetClearCart()
    {
    if(confirm('Are you sure you wish to clear your cart ?'))
        window.location.href='Index.asp?PageAction=CLEARCART';
    }
    </script>    
    
    <table border="0" style="border-collapse: collapse" width="100%" height="76">
        <tr>
            <td height="76" width="640">
          <p style="margin-top: 0; margin-bottom: 0" align="right">

          <font class="shoppingcart">Items in your Cart: </font><b>
          <font class="shoppingcart">0</font>&nbsp;&nbsp; </b></p>
          <p style="margin-top: 0; margin-bottom: 0" align="right">
          <font class="shoppingcart">Current Subtotal:</font><b><font class="shoppingcart">$0.00</font></b></p>
          <hr class="shoppingcart" align="right" width="150">
          <p style="margin-top: 0; margin-bottom: 0" align="right">

          <a title="Clear Your Cart" href="java script:validateDetClearCart();"><img border="0" src="images/tcart-clear.gif"></a>
          <a title="Checkout" href="java script:Cart2Checkout('0.00', 1);"><img border="0" alt="Checkout Button" title="Click Here To Checkout" src="images/tcart-checkout.gif"></a>
          <a title="View Your Cart" href="index.asp?PageAction=CARTDETAILS"><img border="0" src="images/tcart-view.gif"></a>
          
          </td>
        </tr>
    </table>


So rather than having to type out all that code you just use the draw function. However if you want to customize it some more you'll have to edit the actual code rather than use the draw functions. You should be able to customize those codes to suit your needs. Hope that helps thumbsup.gif
energysuperstore
This worked great. Thanks. But the # of items in cart is not working and no subtotal displays when adding items to cart. You can look at it on my site. (http://www.energy-superstore.com) But the checkout works. How can I fix this?

P.S. You have been really helpful. Thanks for everything.


QUOTE(agkits @ Nov 19 2007, 02:52 PM) *
The draw functions are just a simple way of displaying the code. Here is how they work:

<%DRAWCART%> displays:

CODE
<table background="Images/cartbg.gif"  border="0" valign="top" cellpadding="0" style="border-collapse: collapse" class="shoppingcartbg" width="100%" height="60" id="AutoNumber1">
                    <tr>
                      <td align="center" background="Images/cartbg.gif"  width="100%" height="60" class="shoppingcartbg">
                      <b><font class="shoppingcart">Your Cart Is Empty</font></b></td>
                    </tr>

                </table>
                <br>


Where <%DRAWCART2%> displays:

CODE
    <script language="javascript">
    varlast =
    varMinOrderQty = 0
    function Cart2Checkout(intCartQty, intMode)
    {
    
    if(intCartQty==0 && intCartQty < varMinOrderQty) {
            alert('Your Cart is empty, please add items before checking out')
            
    }
    else
    {    
    
      if (intCartQty < varMinOrderQty)
        
            alert('The minimum order amount is $0')
        
    else
    {
        
if (intMode == 2)
{
window.location.href = ("index.asp?PageAction=GETGBUYCART");
}
else
{

            window.location.href = ("https://www.agkits.com/index.asp?PageAction=CARTCHECKOUTLOGIN");
        }

    }

    }
     }    
    function validateDetClearCart()
    {
    if(confirm('Are you sure you wish to clear your cart ?'))
        window.location.href='Index.asp?PageAction=CLEARCART';
    }
    </script>    
    
    <table border="0" style="border-collapse: collapse" width="100%" height="76">
        <tr>
            <td height="76" width="640">
          <p style="margin-top: 0; margin-bottom: 0" align="right">

          <font class="shoppingcart">Items in your Cart: </font><b>
          <font class="shoppingcart">0</font>&nbsp;&nbsp; </b></p>
          <p style="margin-top: 0; margin-bottom: 0" align="right">
          <font class="shoppingcart">Current Subtotal:</font><b><font class="shoppingcart">$0.00</font></b></p>
          <hr class="shoppingcart" align="right" width="150">
          <p style="margin-top: 0; margin-bottom: 0" align="right">

          <a title="Clear Your Cart" href="java script:validateDetClearCart();"><img border="0" src="images/tcart-clear.gif"></a>
          <a title="Checkout" href="java script:Cart2Checkout('0.00', 1);"><img border="0" alt="Checkout Button" title="Click Here To Checkout" src="images/tcart-checkout.gif"></a>
          <a title="View Your Cart" href="index.asp?PageAction=CARTDETAILS"><img border="0" src="images/tcart-view.gif"></a>
          
          </td>
        </tr>
    </table>


So rather than having to type out all that code you just use the draw function. However if you want to customize it some more you'll have to edit the actual code rather than use the draw functions. You should be able to customize those codes to suit your needs. Hope that helps thumbsup.gif

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.