SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    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:
    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}

  2. #2
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a screenshot of what I want the footer to look like.
    Attached Images Attached Images

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Here's a quick example of what I might do inside the footer:

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lorne17 View Post
    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.
    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:

    Code:
    #cjsp-content {
      background: url("images/contentbg.png") no-repeat scroll 0 0 transparent;
      height: 560px;
      width: 960px; /* was 1000 */
    }
    Code:
    .cjsp-spammsg {
      color: #7A7A7A;
      font-size: 8pt;
      left: 120px;
      margin: 7px 0 0;
      position: relative;
      text-align: center;
      top: 190px;
      width: 840px; /* added this rule in */
    }
    Code:
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •