Need Help Coding Printfection store site

Hello there,

Sorry for the rookie question, but since this page is on printfection, I can’t quite seem to find out where to make these changes. I’ve gotten the background and most the font colors for the page working the way I want. But can’t quite seem to get the footer working right.

Does anyone know how I might go about customizing this footer? The problem is I want it to have three columns of links in there that are white font and no bullets. However I know it’s so simple using CSS, but I can’t quite seem to see where this is controlled? And how to put it in HTML? I have access to the CSS and HTML but don’t know if those give me full control or not?

Any ideas?

Thanks
Lorne

HTML CODE:

<table id="page" cellSpacing=0 cellPadding=0 width=773 border=0>   <tbody>
    <tr>
      <td id="header" vAlign="center" colSpan=2><div id="logo"><a  title="##storename##" href="##storeurl##">##logo##</a></div></td>
    </tr>
    <tr>
      <td id="breadcrumb" colSpan=2>##breadcrumb##</td>
    </tr>
    <tr>
      <td id="menucol" vAlign="top">##menuwrapper##
        <h4>Store Categories:</h4>
        ##menu## ##menuwrapper##
        <h4>Store Menu: </h4>
        <table width="100%" cellpadding="0" style='border-collapse:collapse' class='menuTable'>
          <tr>
            <td><a href="##storeurl##" class="menuLink menuLevel1">Store Home</a></td>
          </tr>
          <tr>
            <td><a href="##shoppingcarturl##" class="menuLink menuLevel1">Shopping Cart</a></td>
          </tr>
          <tr>
            <td><a href="##storehelpurl##" class="menuLink menuLevel1">Store Help</a></td>
          </tr>
        </table>
        ##pricingmenuwrapper##
        <h4>Shop by price:</h4>
        ##pricingmenu## ##pricingmenuwrapper##
        <div id="prop"></div></td>
      <td id="maincol" vAlign="top">##content##
        <div id="prop1"></div></td>
    </tr>
    <tr>
      <td id="footer" colSpan=2>
<ul id="menu-our-products" class="menu">
<li><a href="http://activestatedesigns.com/customer-service/products/merchandise">Merchandise</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">Printing Process</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">DTG vs Screen-Print</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/size-charts">Size Charts</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/got-an-idea">Got an idea?</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/order-in-bulk">Order in Bulk</a></li> 
</ul>
</td>
    </tr>
  </tbody>
</table>

CSS Code:

@charset "UTF-8";


body{ margin:0; padding:0; text-align:center; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; background-image: url(http://img.printfection.com/3/1156087/cjDX8.jpg);color:#FFF;}


#page {background-image:url(http://www.activestatedesigns.com/wp-content/themes/TheJewelryShopDark/images/content_bgd_slice.png);width:1000px;}


#header{height:201px; background-image:url(http://www.activestatedesigns.com/wp-content/themes/TheJewelryShopDark/images/header_bgd.jpg);}
#shopName{display:block; font-size:14px}


#maincol{padding:50px;}


#menucol{width:10px;}
#menucol h4{font-size:11pt; font-weight:bold; text-decoration:none; color:#fff}
.menuTable{margin-left:0px; margin-top:0px}
.menuLink, .menuSelectedText{display:block; line-height:23px; text-decoration:none; color:#fff;}
.menuLevel1{padding-left:3px}
.menuLevel2{padding-left:6px}
.menuLevel3{padding-left:9px}
.menuLevel4{padding-left:12px}
.menuLevel5{padding-left:15px}
.menuLevel6{padding-left:18px}
.menuLevel7{padding-left:21px}
.menuLevel8{padding-left:24px}
.menuLevel9{padding-left:27px}

.menuLink{display:block}
.menuSelectedText{display:block;  color:#fff;; font-weight:bold}

.menuLink:hover{display:block; color:#42B4DA; text-decoration:underline;}


#breadcrumb{background-image:url(); color:#fff;display:none;}
.breadcrumbLink, .breadcrumbLink:visited{color:#fff; font-weight:bold;  text-decoration:none}
.breadcrumbLink:hover{color:#42B4DA; text-decoration:underline;}


#footer{height:297px; background-image:url(http://www.activestatedesigns.com/wp-content/themes/TheJewelryShopDark/images/footer_bgd.jpg);}
#footerLinks:link{ color:#42B4DA; text-decoration:none; font-weight:none; font-size:10px}
#footerLinks:visited{color:#42B4DA; text-decoration:none; font-weight:none; font-size:10px}
#footerLinks:hover{color:#42B4DA; text-decoration:underline; font-weight:none; font-size:10px}
#footerBarLinks:link {color:#42B4DA; !important;padding: 8px;text-decoration:none;font-size:10px;}
#footerBarLinks:visited {color:#42B4DA; !important;padding: 8px;text-decoration:none;font-size:11px;}
#footerBarLinks:hover {color:#42B4DA; !important;padding: 8px;text-decoration:underline;font-size:11px;}
#footerBarLinks:active {color:#42B4DA; !important;padding: 8px;text-decoration:underline;font-size:11px;}


.footer_notes {font-size:.9em;overflow:hidden;margin:0 20px 0;}
.footer_notes span {float:right;}
.footer_notes .copyright {float:left;font-size:.9em;}


#menu-our-products {float:left;margin-left:20px;text-align:left;}
#menu-our-products ul {list-style-type: none; !important}
#menu-our-products ul li { float:left;white-space:nowrap;}
#menu-our-products ul li a {float:left;display:block;padding:1px 0 5px 10px;font-size:0.9em;}
#menu-our-products ul li:first-child a {padding-left:0;}
#menu-our-products ul li a:focus, .footer_navi ul li a:hover, .footer_navi ul li a:active {text-decoration:underline;}


#content{background:#fff; background-image:url()}
#cName{background:#fff; background-image:url(); color:#fff; font-size:14pt}
#cImage{margin-left:auto; margin-right:auto}
#cDesc{margin-top:10px; font-size:10pt}
#content{clear:both; margin-top:0px; padding:5px; _padding:0px; margin-bottom:20px; text-align:center}
.sectionsTable1{width:100%}
a.sectionTitleLink, a.sectionTitleLink:visited, a.sectionTitleLink:hover{color:#42B4DA; text-decoration:underline;}


#maincol a, #maincol a:visited, #maincol a:hover{color:#42B4DA; text-decoration:underline;background: none !important;}
#maincol a:hover{font-weight:bold; background:none !important;}
.productDetailTable1 a:hover{text-decoration:underline !important; background:none !important;}

.headerLinks, .headerLinks:visited, .headerLinks a:hover{color:#42B4DA; text-decoration:underline;}


.productDetailTable1{padding-right:15px; padding-bottom:30px; padding-left:15px; width:100%; *padding-right:5px;  *padding-left:5px; *width:630px}
.productDetailTitleText{ font-size:1.6em; text-indent:15px; padding-top:10px; margin-bottom:20px; color:#fff; }


.sizeChartTitleText{ font-size: 1.4em; color:#fff; margin-bottom:20px; }
.sizeChartTable{border-collapse:collapse}
.sizeChartHeaderTD{ width:50px; text-align:center; font-weight:bold}
.sizeChartHeaderTDSpacer{border-bottom:0px gray solid; margin-left:0px; margin-bottom:0px; margin-right:0px}
.sizeChartHeaderDIVSpacer{border-right:0px white solid; font-size:4px}
.sizeChartTD{border-bottom:1px gray solid; padding-left:1px; padding-bottom:0px; text-align:center}
.sizeChartTDSpacer{border-bottom:1px gray solid; margin-left:0px; margin-bottom:0px; margin-right:0px; width:1px}
.sizeChartDIV{margin-top:2px}
.sizeChartDIVSpacer{border-right:1px gray solid; font-size:4px; margin-right:0px; margin-left:0px}
.sizeChartTDName{border-bottom:1px gray solid}


.helpCenterHeader{font-weight:bold; font-size:14px}


.productDetailTabTable{ padding:0x;  border-spacing:0px;  border-collapse:collapse; }
.productDetailTabUnfocus{ border-bottom:1px #fff solid; padding:3px; text-align:center}
.productDetailTabFocus{ border-bottom:1px #fff solid; font:bold; padding:3px; text-align:center}
.productDetailTabExtra{ border-bottom:1px #fff solid}
.productDetailTabTextFocus{font-weight:none; font-size:9pt}
.productDetailTabTextUnFocus{font-size:9pt}


.buyBoxTable{ border-top:1px #ccc solid;  border-left:1px #ccc solid;  border-bottom:1px #ccc solid;  border-right:1px #fff solid}
.buyBoxHeaderTD{ text-align:center;  padding:3px}
.buyBoxHeaderText{ font-weight:bold;  color:#fff; font-size:9pt}
.buyBoxProductNumber{color: #939393;font-size: 11px;}
.cellChanged{background-color:#ccc}


.pricingTable{}
td.pricingHeader{text-align:center; padding:2px; border-right:2px #fff solid; border-bottom:2px #fff solid; width:50px; }
.pricingColorName1{width:100px; text-align:right; border-bottom:2px #fff solid; border-top:2px #fff solid; padding:2px; }
.pricingColorName2{width:100px; text-align:right; border-bottom:2px #fff solid; border-top:2px #fff solid; padding:2px; }
.pricingSwatch1{border-bottom:2px #fff solid; padding:2px; border-top:2px #fff solid; }
.pricingSwatch2{border-bottom:2px #fff solid; padding:2px; border-top:2px #fff solid; }
.pricingPrice1{text-align:right; padding:2px; border-bottom:2px #fff solid; border-right:2px #fff solid; }
.pricingPrice2{text-align:right; padding:2px; border-bottom:2px #fff solid; border-right:2px #fff solid; }


.underlineHeader{border-bottom:2px #fff solid; font-weight:bold}
.underlineHeaderPurple{border-bottom:2px #fff solid; font-weight:bold}
.underlineErrors{border-bottom:2px #f00 solid}


.cartTable{empty-cells:show;}
.cartHeadTR{}
.cartHeadText{color:#fff; font-weight:bold}
.cartTD{border:1px #fff solid}
.cartLineTD{border-bottom:1px #fff solid}
.cartTitleText{font-size:18px; color:#fff; font-weight:bold}


.upsellCartText{font-size:10px}


#page{border-collapse:collapse; margin-left:auto; margin-right:auto; margin-bottom:-95px;}
#breadcrumb{bold; text-align:left;  font-size:10pt; margin-left:0px; padding:10px; padding-left:20px}
#menucol{margin-left:0px; text-align:left}
#menucol, .menuTable, .menuTable td{width:100%; padding-left:50px;display:none;}
#prop{width:173px}
#prop1{width:600px}

#menucol h4{width:100%; display:block; height:25px; line-height:25px;  margin:0px; padding-top:0px}
.sectionsTD1, .sectionsTable2{padding-top:0px; vertical-align:top}
#maincol{text-align:left; background-repeat:repeat; margin:0px}
#midheader{background:transparent; text-align:left}
#description{padding:20px}
#logo{ width:365px;height:75px; position:relative;left:550px;top:32px;background:transparent !important;}
#shopName{padding-left:20px; padding-top:20px; text-align:center}
.productsTable1 td{width:29%}
.productDetailColorOutOfStock{background-color:#f99 !important; border-color:red !important}

.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{display:inline-block; margin-bottom:50px}

* html .clearfix{height:1%}
.clearfix{display:block; margin-bottom:0\\px}


Here’s a screenshot of what I want the footer to look like.

Here’s a quick example of what I might do inside the footer:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Lorne17</title>
	
<style type="text/css" media="all">
#footer {background: #042d56; width: 850px; height: 300px; margin: 0 auto; padding: 50px 0 0 70px; }

.wrap {width: 212px; float: left;}
#footer ul {margin: 0; padding: 0 0 0 10px; list-style: none; color: #52a5ce;}
#footer li, #footer p {font: 0.8125em/1.4 sans-serif; }
#footer a {color: #52a5ce; text-decoration: none;}
#footer h2 {margin: 0 0 12px 0; color:#51799f; font: 1em verdana, sans-serif; text-transform: uppercase; font-weight: normal;}
#footer p {width: 160px; float: left; padding-left:10px; color: white; margin: 0;}
</style>
</head>


<body>
<div id="footer">
<div class="wrap">
<h2>Our Products</h2>
<ul class="menu">
<li><a href="http://activestatedesigns.com/customer-service/products/merchandise">Merchandise</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">Printing Process</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">DTG vs Screen-Print</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/size-charts">Size Charts</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/got-an-idea">Got an idea?</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/order-in-bulk">Order in Bulk</a></li> 
</ul>
</div>

<div class="wrap">
<h2>Our Company</h2>
<ul class="menu">
<li><a href="http://activestatedesigns.com/customer-service/products/merchandise">Merchandise</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">Printing Process</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">DTG vs Screen-Print</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/size-charts">Size Charts</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/got-an-idea">Got an idea?</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/order-in-bulk">Order in Bulk</a></li> 
</ul>
</div>

<div class="wrap">
<h2>Our Service</h2>
<ul class="menu">
<li><a href="http://activestatedesigns.com/customer-service/products/merchandise">Merchandise</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">Printing Process</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/printing-process">DTG vs Screen-Print</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/products/size-charts">Size Charts</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/got-an-idea">Got an idea?</a></li> 
<li><a href="http://activestatedesigns.com/customer-service/custom-orders/order-in-bulk">Order in Bulk</a></li> 
</ul>
</div>

<div class="wrap">
<h2>Our Community</h2>
<p>Great meeting <a href="#">@caseyschorr</a> with Printfection last week! Look forward to working with you. <a href="#">2 months ago</a></p>
</div>

</div>
</body>
</html>

Hey Ralph,

Thanks for the reply, I’ve gotten the footer figured out, but have a couple more questions that maybe you can help me with.

One, how might I go about making my logo link to State Inspired T-Shirt Designs | ActiveState Designs? Because where I can edit the code, it doesn’t have header content where I can edit the html. ALso, my site is really wide? You can scroll way to the right but I dont’ know what is driving that width?

two, how might I go about adding the blue background below the footer where it says “this service is powered by Printfection”? That content is outside the code I can edit, but want to added a background in the css?

I hope that makes sense. Thanks,
Lorne

I think you might need to ask the web hosts about that. Unless you have access to the code, we can’t help you.

ALso, my site is really wide? You can scroll way to the right but I dont’ know what is driving that width?

Make these changes:

#cjsp-content {
  background: url("images/contentbg.png") no-repeat scroll 0 0 transparent;
  height: 560px;
  [COLOR="Red"]width: 960px;[/COLOR] /* was 1000 */
}
.cjsp-spammsg {
  color: #7A7A7A;
  font-size: 8pt;
  left: 120px;
  margin: 7px 0 0;
  position: relative;
  text-align: center;
  top: 190px;
  [COLOR="Blue"]width: 840px;[/COLOR] /* added this rule in */
}
how might I go about adding the blue background below the footer where it says "this service is powered by Printfection"?  That content is outside the code I can edit, but want to added a background in the css?

I don’t see that, so perhaps I’m looking at the wrong thing? You haven’t actually linked to your site, as far as I can see. The changes above relate to the page you linked to in your last post.

Again, though, if you can’t access the code, you’ll have to talk to the service provider. To be honest, I think there are much better ways to build a website. You really need access to all this stuff.

Ralph,

Thanks again for your help. I have fixed the width of the page and fixed the logo to link to my homepage. There are some features in Printfection that will not allow me to edit the code, I know this is tough because as a web designer, I want access to all this. However since they are a t-shirt fullfillment company for my t-shirt company, I need to use their site/services to print my product. My homepage is a separate domain, but I am trying to get my printfection store to look the same as my homepage for my brand. I hope that makes sense.

Now I’m running into another problem. I’m running into the issue of correctly coding the css for my main menu in my header. If you go here to my printfection store, you’ll notice there is a menu up top (on the shelf). Well resize your window and you’ll see the menu stays put and doesn’t move with the window resizing. I need to have that position to move when the screen resolution or windows size is different. I cannot get the CSS to cooperate to make this menu work properly.

Do you have any ideas?

Thanks,
Lorne

The code for those menus needs to be inside the header section for it to be placed relative to that header section. Do you have the option to turn this into a non-table layout? It’s really a nasty piece of work as is. A professional shot like that should allow for modern layouts.