Results 1 to 10 of 10
  1. #1
    Join Date
    Sep 2006
    Location
    United Kingdom
    Posts
    195
    Plugin Contributions
    0

    Default how can i specify a background image for centerBoxHeading

    im trying to customise at template and would like to specify a background image for centerBoxHeading i have added the relavent items to the style sheet but cant seem to find what file or where in the file to put the call for it
    also im not good at php so im quite sure what the call command should be
    any help much apprciated

    here is the stsyle sheet i have edited so u can see what i have done so far

    /*
    //
    // +----------------------------------------------------------------------+
    // |zen-cart Open Source E-commerce |
    // +----------------------------------------------------------------------+
    // | Copyright (c) 2003 The zen-cart developers |
    // | |
    // | http://www.zen-cart.com/index.php |
    // | |
    // | Portions Copyright (c) 2003 osCommerce |
    // +----------------------------------------------------------------------+
    // | This source file is subject to version 2.0 of the GPL license, |
    // | that is bundled with this package in the file LICENSE, and is |
    // | available through the world-wide-web at the following url: |
    // | http://www.zen-cart.com/license/2_0.txt. |
    // | If you did not receive a copy of the zen-cart license and are unable |
    // | to obtain it through the world-wide-web, please send a note to |
    // | license AT zen-cart DOT com so we can mail you a copy immediately. |
    // +----------------------------------------------------------------------+
    // $Id: stylesheet.css 277 2004-09-10 23:03:52Z wilt $
    */

    BODY {
    background-color: #326DB8; /*#e5edf5;*/
    color: #000000;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    font: 11px Verdana, Arial, sans-serif;
    }

    .centershop {
    padding: 5px 0px 5px 0px;
    margin: 0px auto;
    position: relative;
    text-align: center;
    width: 95% !important;
    }

    TD.main, P.main {
    font-size: 13px;
    line-height: 1.5;
    }

    A {
    color: #428dff;
    text-decoration: none;
    }

    A:hover {
    color: #ffb062;
    text-decoration: underline;
    }

    FORM {
    display: inline;
    }

    .banners {
    padding: 5px;
    }

    .bannerspic {
    padding: 0px;
    }

    /*HEADER CSS*/

    TABLE.header {
    background: #ffffff url(../images/header_bg.gif) no-repeat;
    width: 100% !important;
    text-align : center;
    }

    TABLE.headerNavigation {
    background: #abbbd3;
    background-image: url(../images/header_06.gif);
    background-color: #ffffff;
    width: 100% !important;
    }

    TD.headerNavigation {
    width: 100% !important;
    position: relative;
    vertical-align:middle;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color:#000000; /* the line between Home "|" Login at the top */
    letter-spacing:1px;
    padding: 5px;
    }
    TD.headerNavigationimg{
    position: relative;
    padding: 0px;
    }

    TD.breadCrumb {
    font-size: 10px;
    font-weight: bold;
    color: #9a9a9a;
    padding: 3px;
    border-bottom: 1px dotted #9a9a9a;
    }

    TD.headerNavigation A, TD.headerNavigation A:visited, .sideBoxHeading A, td.footertop a, .centerboxheading A {
    font-weight: bold;
    color: #000000;
    }

    TD.headerNavigation A:hover, .sideBoxHeading A:hover, td.footertop a:hover, .centerboxheading A:hover {
    color: #0000ff;
    }

    TR.headerError {
    background: #ff0000;
    }

    TD.headerError {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    background: #ff0000;
    color: #ffffff;
    font-weight : bold;
    text-align : center;
    }

    TR.headerInfo {
    background: #00ff00;
    }

    TD.headerInfo {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    background: #00ff00;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    }

    /*SIDEBOX CSS*/

    .column_box_spacer_left {
    height: 10px;
    }

    .column_box_spacer_right {
    height: 10px;
    }

    .column_box_spacer_single {
    height: 10px;
    }
    /* change the column_left_pic as well */
    .column_left{
    background: #e5edf5; /*#ffffff;*/
    padding: 6px 6px 6px 6px;
    }

    .column_left_pic{
    background: #e5edf5; /*#ffffff;*/
    padding: 2px;
    }



    .column_right{
    background: #e5edf5; /*#ffffff;*/
    padding: 6px 6px 6px 6px;
    }

    .column_right_pic{
    background: #e5edf5; /*#ffffff; */
    padding: 2px;
    }

    /* columns. If changeing the column_right change column_right_pic as well */


    .boxText {
    font-size: 13px;
    line-height: 125%;
    }


    .sideBoxContent, .centerboxcontent {
    line-height: 125%;
    padding: 4px;
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    }

    .sideBox, .centerbox {
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    background: #ffffff;
    border:1px solid #9a9a9a;
    margin-bottom: 15px;
    }

    .infoBoxNotice {
    background: #FF8E90;
    }

    .infoBoxNoticeContents {
    background: #FFE6E6;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    }

    TD.sideBoxHeading, TD.centerboxheading {
    height: 20px;
    padding-left: 5px;
    }

    .sideBoxHeading, .productListing-heading, .centerboxheading {
    font-size: 12px;
    font-weight: bold;
    color: #000000; /*#000000;*/
    padding: 3px;
    }

    TR.sideBoxHeading, TD.productListing-heading, TR.centerboxheading {
    background: #abbbd3;
    background-image: url(../images/header_06.gif);
    }

    .sideBoxFooter, .centerboxfooter {
    background: #abbbd3;
    background-image: url(../images/header_06.gif);
    }

    SPAN.newItemInCart {
    color: #ff0000;
    font-weight: bold;
    }

    /*center main section
    -----------------------------------*/
    TD.pageHeading, DIV.pageHeading, h1 {
    font-size: 16px;
    font-weight: bold;
    color: #9a9a9a;
    padding-top: 11px;
    }


    /********** center column ************/
    .center_column {
    background-color: #ffffff;
    padding: 8px;
    }
    .column_center_pic{
    background: #ffffff;
    padding: 0px;
    }



    /************* end column center pics ************/

    .main_page{
    width: 100% !important;
    background-color: #ffffff;
    /* border-right: 1px solid #9a9a9a;*/
    /* border-left: 1px solid #9a9a9a;*/
    padding: 0px;
    }

    .plainBox, .plainbox-description {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    background: #ffffff;
    border: 1px solid #9a9a9a;
    margin-bottom: 15px;
    padding: 5px;
    }

    .plainBoxHeading {
    font-size: 12px;
    font-weight: bold;
    padding: 11px 5px 5px;
    }
    /* footer
    --------------*/

    TABLE.footer {
    background: #ffffff;
    text-align: center;
    font-size: 10px;
    /* border-right: 1px solid #9a9a9a;*/
    /* border-left: 1px solid #9a9a9a;*/
    /* border-bottom: 1px solid #9a9a9a;*/
    }

    TR.footertop {
    background: #abbbd3;
    background-image: url(../images/header_06.gif);
    font-size: 11px;
    }

    TD.footertop{
    padding: 5px;
    }

    TD.footertopimg{
    padding: 0px;
    }

    TD.footerbottom {
    padding: 5px;
    }

    /*miscellaneous areas
    -------------------------------------*/
    TD.infoBox, SPAN.infoBox {}

    TD.cartBox {
    background: #eff4f8;
    font-size: 10px;
    padding: 3px;
    border: 1px dotted #ffb062;
    }

    TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
    background: #ffffff;
    }

    TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
    background: #eff4f8;
    }

    .errorBox { background: #ff797c; color: #ffffff; font-weight: bold; }
    .stockWarning { color: #cc0033; }
    .productsNotifications { background: #f2fff7; }
    .orderEdit { color: #70d250; text-decoration: underline; }
    .productListing-heading {
    border-bottom: 1px solid #9a9a9a;
    }

    TD.productListing-data {
    font-size: 10px;
    }

    td.pageresults a {
    color: #0000FF;
    }

    td.pageresults a:hover {
    background: #FFFF33;
    }
    td.pageresults {
    font-size: 10px;
    }
    TR.subBar {
    background: #f4f7fd;
    }

    TD.smallText, SPAN.smallText, P.smallText {
    font-size: 10px;
    }

    TD.accountCategory {
    font-size: 13px;
    color: #aabbdd;
    }

    TD.fieldKey {
    font-size: 12px;
    font-weight: bold;
    }

    TD.fieldValue {
    font-size: 12px;
    }

    TD.tableHeading {
    font-size: 12px;
    font-weight: bold;
    }

    CHECKBOX, INPUT, RADIO, SELECT {
    font-size: 11px;
    }

    TEXTAREA {
    width: 100%;
    font-size: 11px;
    }

    .greetUser {
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    }

    SPAN.greetUser {
    color: #f0a480;
    font-weight: bold;
    }

    TABLE.formArea {
    background: #f1f9fe;
    border: 1px solid #7b9ebd;
    }

    TD.formAreaTitle {
    font: bold 12px Verdana, Arial, sans-serif;
    }

    SPAN.markProductOutOfStock {
    color: #c76170;
    font: bold 12px Verdana, Arial, sans-serif;
    }

    span.normalprice {
    text-decoration: line-through;
    }

    SPAN.productSpecialPrice {
    color: #ff797c;
    }

    span.productSpecialPriceSale {
    color: #ff797c;
    text-decoration: line-through;
    }

    SPAN.productSalePrice {
    color: #FF0000;
    }

    SPAN.productPriceDiscount {
    font-size: 10px;
    color: #FF0000;
    }

    SPAN.errorText {
    color: #ff0000;
    }

    .moduleRow { }
    .moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
    .moduleRowSelected { background-color: #E9F4FC; }

    .checkoutBarFrom, .checkoutBarTo { color: #8c8c8c; }
    .checkoutBarCurrent { color: #000000; }

    /* message box */

    .messageBox { }
    .messageStackError, .messageStackWarning { background-color: #ff797c; color: #ffffff; padding: 2px; border: 1px solid #9a9a9a; }
    .messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }
    .messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #FFFF00; }

    /* input requirement */

    .inputRequirement {
    color: #ff0000;
    font-size: 10px;
    }

    span.coming {
    color: #ff797c;
    }

    /* checkout totals */
    TD.ot-subtotal-Text, TD.ot-cod-fee-Text, TD.ot-total-Text, TD.ot-group-pricing-Text, TD.ot-gv-Text, TD.ot-loworderfee-Text, TD.ot-shipping-Text, TD.ot-subtotal-Text, TD.ot-tax-Text, TD.ot-coupon-Text {
    font-weight: bold;
    }
    TD.ot-subtotal-Amount, TD.ot-cod-fee-Amount, TD.ot-total-Amount, TD.ot-group-pricing-Amount, TD.ot-gv-Amount, TD.ot-loworderfee-Amount, TD.ot-shipping-Amount, TD.ot-subtotal-Amount, TD.ot-tax-Amount, TD.ot-coupon-Amount {}

    /* product_info attribute comments */

    .ProductInfoComments, TD.ProductInfoComments, SPAN.ProductInfoComments {
    color: #ff0000;
    font-size: 9px;
    line-height: 1.0;
    text-align : left;
    font-weight: bold;
    padding-top: 6px;
    border-top: 1px solid #9a9a9a;
    }

    /* General alert span class */
    TD.alert, SPAN.alert {
    color: #FF0000;
    font-weight: bold;
    }

    /* General alert span class */
    TD.alertBlack, SPAN.alertBlack {
    color: #000000;
    font-weight: bold;
    }

    /* popup tables */
    TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {
    background-color: #ffffff;
    margin: 6px;
    padding: 6px;
    font: 11px Verdana, Arial, sans-serif;
    }

    /* categories_description */
    TABLE.categoriesdescription {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    background: #D0D0D0;
    border:1px solid #9a9a9a;
    }

    TD.categoriesdescription {
    font-size: 11px;
    line-height: 1.0;
    }

    /* categories box parent and child categories and extra links */
    A.category-top, A.category-links {
    color: #428dff;
    text-decoration: none;
    }
    A.category-subs, A.category-products {
    color: #428dff;
    text-decoration: none;
    }
    SPAN.category-subs-parent {
    font-weight: bold;
    }
    SPAN.category-subs-selected {
    font-weight: bold;
    }

    /* attribute images table */
    TABLE.products-attributes-images {
    /* width: 100%; */
    /* border: 1px solid #9a9a9a; */
    float: left;
    padding: 2px;
    }


    /***************************** for footer roundness *********************/

    #bot_corner_img {
    padding: 0px;
    }
    #top_corner_img {
    padding: 0px;
    }


    /*************************** for the Amazon categories *****************/
    TD.smallText, SPAN.smallText, P.smallText {
    font-size: 13px;
    padding: 0px 0px 8px 8px;
    }

    SPAN.tiny {
    font-size: 10px;
    }

    /************************** space between tables *************************/

    .empty_space {
    background-color: #326DB8;
    }

  2. #2
    Join Date
    Jan 2006
    Posts
    420
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    I'm assuming you want to block color or background the bits tat say Featured, Specials , New etc ?

    Like on my test site ? www.tapes-direct.co.uk/newshop/

    with the blue grad bars ?

    I think i edited the tpl_columnar_display.php in Common at line 18 ish to have a div around the title :

    Code:
    <div id="titletag" class="titletag">
    <?php echo $title; ?></div>
    then added that class to the style

    Code:
    .titletag{
    	color: #FFFF00;
    	background-color: #000066;
    	background-image: url(../images/blu_grad.gif);
    	text-align: left;
    and uploaded the image to the templates/yourtemplate/images folder.

    It works for me .
    Various Zen cart sites !

  3. #3
    Join Date
    Sep 2006
    Location
    United Kingdom
    Posts
    195
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    what i actually what is to use a gif image that i have created that would sit behind the text for example it would make up a bar behind the text "New Products For September" and behind "Featured Products" ect in the center setion of my site

    heres an example http://www.terabytecomputers.co.uk/zen/

    ignore the awful look fo the site i was just using some spare hosting space to try zen out before i took the plunge and started developing it for my new site

  4. #4
    Join Date
    Sep 2006
    Location
    United Kingdom
    Posts
    195
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    errr giess i should read post properly lol yes what u were suggerting is pretty much what i want lol

    i already have this bit in my css
    TR.sideBoxHeading, TD.productListing-heading, TR.centerboxheading {
    background: #abbbd3;
    background-image: url(../images/header_06.gif);
    }

    .sideBoxFooter, .centerboxfooter {
    background: #abbbd3;
    background-image: url(../images/header_06.gif);
    }
    but i just dont know where to put the call for it or how to format the call (like i said i cant write php)

    btw nice looking site u have there
    Last edited by modchipfitters.co.uk; 28 Sep 2006 at 01:00 PM.

  5. #5
    Join Date
    Sep 2006
    Location
    United Kingdom
    Posts
    195
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    tried what you said but it didnt add an image at all

  6. #6
    Join Date
    Sep 2006
    Location
    United Kingdom
    Posts
    195
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    finally managed to sort it by replacing my css file with 1 from a different template and then tweaking it a little

  7. #7
    Join Date
    Nov 2007
    Posts
    2
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    Quote Originally Posted by crazycucumber View Post
    I'm assuming you want to block color or background the bits tat say Featured, Specials , New etc ?

    Like on my test site ? www.tapes-direct.co.uk/newshop/

    with the blue grad bars ?

    I think i edited the tpl_columnar_display.php in Common at line 18 ish to have a div around the title :

    Code:
    <div id="titletag" class="titletag">
    <?php echo $title; ?></div>
    then added that class to the style

    Code:
    .titletag{
    	color: #FFFF00;
    	background-color: #000066;
    	background-image: url(../images/blu_grad.gif);
    	text-align: left;
    and uploaded the image to the templates/yourtemplate/images folder.

    It works for me .
    just wondering how you made your site tapes-direct.co.uk to full size window for zen cart following your browser size? the default won't resize the window even if you make your browser full screen.

  8. #8
    Join Date
    Nov 2007
    Posts
    6
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    To give the "New Products", "Featured Products", etc a background image, use this css:

    Code:
    .centerBoxHeading {
         background: url(../images/image.gif);
    }
    You may have to mess with the padding to make the text line up properly. Also, if you're using a fluid width site, you can make the header resize using the sliding doors technique. It involves 2 images and 'grows' as you increase the width of the browser.

  9. #9
    Join Date
    Mar 2009
    Posts
    3
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    Hey guys, soz to revive this old thread but i just wanted to say thanks to crazycucumber as he solved a problem i had, nice one, which i'd have done a google search 7 hours ago

    Also thanks to the other guys on here, some well useful info,

    Peace out guys.

  10. #10
    Join Date
    Mar 2009
    Posts
    3
    Plugin Contributions
    0

    Default Re: how can i specify a background image for centerBoxHeading

    Quote Originally Posted by ethanhunt View Post
    just wondering how you made your site tapes-direct.co.uk to full size window for zen cart following your browser size? the default won't resize the window even if you make your browser full screen.
    You set this in your CSS style sheet of your template:

    #mainWrapper {
    background-color: #fff;
    text-align: left;
    width: 100%;
    vertical-align: top;
    }

    Set width to 100%, i know this is old thread but it may help people searching through google.

    Cheers,
    Lee.

 

 

Similar Threads

  1. v139h Page Background - Can I use an 'image' instead of a colour - if so How?
    By shags38 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 6 Jul 2012, 09:56 AM
  2. How can I remove Featured Products background image?
    By gaffettape in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 3 Jan 2010, 03:52 PM
  3. Replies: 0
    Last Post: 6 Mar 2008, 05:38 AM
  4. Image for 'centerBoxHeading'
    By PGlad in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 26 Jul 2007, 11:07 PM
  5. Can I use a background image for entire pages?
    By bluealice in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 25 Jan 2007, 10:56 PM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR