need help with side boxes

16 Jun 2008, 23:31

#1

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

need help with side boxes

Hi

I am working on a site and need some help with css and side boxes as folows:

1, my left coloum is off to the right compared to the right coloum

2, need all box headers to be text-align: left; and padding-left: 30px;

The url:

http://www.westonehosting.com/zen-cart/

I am still working on site.

17 Jun 2008, 21:34

#2

astrojasta

New Zenner

Join Date:: Jun 2008
Posts:: 3
Plugin Contributions:: 0

Re: need help with side boxes

Hi!, try this and see if this works:

In the stylesheet.css look for leftBoxHeading and there add your text-align: left; and padding-left: 30px;

Similarly do this for rightboxheading

17 Jun 2008, 21:54

#3

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

astrojasta:
Hi!, try this and see if this works:

In the stylesheet.css look for leftBoxHeading and there add your text-align: left; and padding-left: 30px;

Similarly do this for rightboxheading

Hi

Thanks for that but it did not work?

here is my css:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
 */

body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #000000;
    background-color: #FFFFFF;
    }

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
    color: #3300FF;
    text-decoration: none;
    }
 
a:visited {
    color: #5F6601;
    text-decoration: none;
    }

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #FF0000;
    }

a:active {
    color: #0000FF;
    }

h1 {
    font-size: 1.5em;
    color: #9a9a9a;
    }

h2 {
    font-size: 1.4em;
    }

h3 {
    font-size: 1.3em;
    }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
    font-size: 1.1em;
    }

.biggerText {
    font-size: 1.2em;
    }

h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 0;
    }

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
    position: relative;
    }
*html .centerColumn {
    height: 1%;
    }
*/

CODE {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 1em;
    }

FORM, SELECT, INPUT {
    display: inline;
    font-size: 1em;
    margin: 0.1em;
    }

TEXTAREA {
    margin: auto;
    display: block;
    width: 95%;
    }

input:focus, select:focus, textarea:focus {
    background: #E4FEF5;
    }

FIELDSET {
    padding: 0.5em;
    margin: 0.5em 0em;
    border: 1px solid #cccccc;
    }

LEGEND {
    font-weight: bold;
    padding: 0.3em;
    color: black;
    }

LABEL, h4.optionName {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
    line-height: 1.5em;
    }

LABEL.checkboxLabel, LABEL.radioButtonLabel {
    margin: 0.5em 0.3em;
    }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
    }

LABEL.inputLabel {
    width: 9em;
    float: left;
    }

LABEL.inputLabelPayment {
    width: 14em;
    float: left;
    padding-left: 2.5em;
    }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
    width: 11em;
    float: left;
    }

#checkoutPayment LABEL.radioButtonLabel {
    font-weight: bold;
    }

P, ADDRESS {
    padding: 0.5em;
    }

ADDRESS {
    font-style: normal;
    }

.clearBoth {
    clear: both;
    }

HR {
    height: 1px;
    margin-top: 0.5em;
    border: none;
    border-bottom: 1px solid #9a9a9a;
    }

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    line-height: 1.8em;
    padding: 0.2em;
    border: 1px solid #9a9a9a;
    }

.messageStackWarning, .messageStackError {
    background-color: #ff0000;
    color: #ffffff;
    }

.messageStackSuccess {
    background-color: #99FF99;
    color: #000000;
    }

.messageStackCaution {
    background-color: #FFFF66;
    color: #000000;
    }

/*wrappers - page or section containers*/
#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 100%;
    vertical-align: top;
    }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0em;
    padding: 0em;
    }

#logoWrapper{
//    background-image: url(../images/header_bg.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    height:75px;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 
#navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }
    
#tagline {
    color:#000000;
    font-size: 2em;
    text-align : center;
    vertical-align: middle;
    }

#sendSpendWrapper {
    border: 1px solid #cacaca;
    float: right;
    margin: 0em 0em 1em 1em;
    }

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
    margin: 0;
    width: 47%;
    }

.wrapperAttribsOptions {
    margin: 0.3em 0em;
    }

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
    margin: 0em;
    font-size: 0.9em;
    }
.navNextPrevList {
    display: inline;
    white-space: nowrap;
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    }

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
    margin: 0em;
    background-color: #FC8200;
    //background-image: url(../images/tile_back.gif);
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #ffffff;
    height: 1%;
    }

#navCatTabsWrapper {
    background-color: #ffffff;
    color: #9a9a9a;
    background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
    display: inline;
    }

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    }

#navCatTabs ul li a {
    color: #9a9a9a;
    }

#navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    border: 1px solid #9a9a9a;
    }

#navEZPagesTOC ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    line-height: 1.5em;
    }

#navEZPagesTOC ul li {
    white-space: nowrap;
    }

#navEZPagesTOC ul li a {
    padding: 0em 0.5em;
    margin: 0;
    }

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    margin: 0.5em;
    }

#navMainSearch {
    float: right;
    }

#navBreadCrumb {
    padding: 0.5em 0.5em;
    background-color: #ffffff;
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    }

#navEZPagesTop {
    background-color: #C5D304;
    //background-image: url(../images/tile_back.gif);
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    padding: 0.5em;
    }

#navColumnOne, #navColumnTwo {
    background-color: transparent;
    }

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    vertical-align: top;
    }

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
    /*font-size: 1.2em;*/
    padding: 0.5em;
    }

.alert {
    color: #FF0000;
    margin-left: 0.5em;
    }
.advisory {}
.important {
    font-weight: bold;
    }
.notice {}
.rating{}
.gvBal {
    float: right;
    }
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    padding: 0.8em;
    }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    font-size: 0.9em;
    }

/*Shopping Cart Display*/
#cartAdd {
    float: right;
    text-align: center;
    margin: 1em;
    border: 1px solid #000000;
    padding: 1em;
    }

.tableHeading TH {
    border-bottom: 1px solid #9a9a9a;
    }

.tableHeading, #cartSubTotal {
    background-color: #e9e9e9;
     }

#cartSubTotal {
    border-top: 1px solid #cccccc;
    font-weight: bold;
    text-align: right;
    line-height: 2.2em;
    padding-right: 2.5em;
    }

.tableRow, .tableHeading, #cartSubTotal {
    height: 2.2em;
    }

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
    padding: 0.5em 0em;
    }

.cartUnitDisplay, .cartTotalDisplay {
    text-align: right;
    padding-right: 0.2em;
    }

#scUpdateQuantity {
    width: 2em;
    }

.cartQuantity {
    width: 4.7em;
    }

.cartNewItem {
    color: #33CC33;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartOldItem {
    color: #660099;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartBoxTotal {
    text-align: right;
    font-weight: bold;
    }

.cartRemoveItemDisplay {
    width: 3.5em;
    }

.cartAttribsList {
    margin-left: 1em;
    }

#mediaManager {
    width: 50%; 
    margin: 0.2em;
    padding: 0.5em;
    background-color: #E4FEf5;
    border: 1px solid #003D00;
    }
.mediaTitle {
    float: left;
    }
.mediaTypeLink {
    float: right;
    }

.normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
    }

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    color: #ff0000;
    }

.orderHistList {
    margin: 1em;
    padding: 0.2em 0em;
    list-style-type: none;
    } 

#cartBoxListWrapper ul, #ezPageBoxList ul {
    list-style-type: none;
    }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
    margin: 0;
    padding: 0.2em 0em;
    } 

#cartBoxEmpty, #cartBoxVoucherBalance {
    font-weight: bold;
    }

.totalBox {
    width: 5.5em;
    text-align: right;
    padding: 0.2em;
    }

.lineTitle, .amount {
    text-align: right;
    padding: 0.2em;
    }

.amount {
    width: 5.5em;
    }

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
    margin: 0em 1em 1em 0em ;
    }

.categoryIcon {}

#cartImage {
    margin: 0.5em 1em;
    }

/*Attributes*/
.attribImg {
    width: 20%;
    margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
    margin: 1em 0em;
    }

.centerBoxWrapper {
    border: 1px solid #9a9a9a;
    height: 1%;
    margin: 1.1em 0;
    }

h2.centerBoxHeading {
    font-size: 1.3em;
    color: #ffffff;
    }

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
    }
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #C5D304;  
//    padding: 0.5em 0.2em;
border-top: 1px dotted white;
border-bottom: 1px dotted white;
padding: 2px 0px 2px 2px;
    }

.leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 1px solid #9a9a9a;
    border-bottom: 5px solid #336633;
    margin-top: 1.5em;
    }

.sideBoxContent {
    background-color: #E2E9A3;
    padding: 0.4em;
    }

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    color: #5F6601;
    text-decoration: none;
    text-align: left;
    padding-left: 30px;
    } 

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
    color: #5F6601;
    text-align: left;
    padding-left: 30px;
    }

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    text-align: left;
    padding-left: 30px;
    }

#bestsellers .wrapper {
    margin: 0em 0em 0em 1.5em;
    }

#bestsellers ol {
    padding: 0;
    margin-left: 1.1em;
    }

#bestsellers li {
    padding: 0;
    margin: 0.3em 0em 0.3em 0em;
    }

#bannerboxHeading {
    background-color: #C5D304;
}

#upProductsHeading {
    text-align: left;
    }

#upDateHeading {
    text-align: right;
    }

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
    color: #008000;
    text-decoration: none;
    }
A.category-links, A.category-links:visited {
    color: #004080;
    text-decoration: none;
    }
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
    color: #FF0000;
    text-decoration: none;
    }
SPAN.category-subs-parent {
    font-weight: bold;
    }
SPAN.category-subs-selected {
    font-weight: bold;
    }
/* end categories box links */

/*misc*/
.back {
    float: left;
    }

.forward, #shoppingCartDefault #PPECbutton {
    float: right;
    }

.bold {
    font-weight: bold;
    }

.rowOdd {
    background-color: #E8E8E8;
    height: 1.5em;
    vertical-align: top;
    }

.rowEven {
    background-color: #F0F0F0;
    height: 1.5em;
    vertical-align: top;
    }

.hiddenField {
    display: none;
}
.visibleField {
    display: inline;
}

CAPTION {
    /*display: none;*/
    }

#myAccountGen li, #myAccountNotify li {
    margin: 0;
    } 

.accountTotalDisplay, .accountTaxDisplay {
    width: 20%;
    text-align: right;
    /*vertical-align: top*/
    }

.accountQuantityDisplay {
    width: 10%;
    vertical-align: top
    }

TR.tableHeading {
    background-color: #cacaca;
    height: 2em;
    }

.productListing-rowheading {
    background-color: #abbbd3;
    background-image: url(../images/tile_back.gif);
    height: 2em;
    color: #FFFFFF;
    }

#siteMapList {
    width: 90%;
    float: right;
    }

.ratingRow {
    margin: 1em 0em 1.5em 0em;
    }

LABEL#textAreaReviews {
    font-weight: normal;
    margin: 1em 0em;
    }

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
    background-color: #ffffff;
    }
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
    clear: both;
    }

.seDisplayedAddressLabel {
    background-color:#85C285;
    text-align: center;
    }
.seDisplayedAddressInfo {
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    }
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xhsnazzy {
background: transparent; 
margin:0 3px;
    margin-top: 0.8em;
}
.xsnazzy {
background: transparent; 
margin:0 3px;
    margin-top: 0.4em;
}
.xtop, .xbottom {
display:block; 
background: transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background: #E2E9A3; 
}
.xb1 {
margin:0 5px; 
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xhtop, .xhbottom {
display:block; 
background: transparent; 
font-size:1px;
}
.xhb1, .xhb2, .xhb3, .xhb4 {
display:block; 
overflow:hidden;
}
.xhb1, .xhb2, .xhb3 {
height:1px;
}
.xhb2, .xhb3, .xhb4 {
background: #C5D304; 
}
.xhb1 {
margin:0 5px; 
}
.xhb2 {
margin:0 3px;
border-width:0 2px;
}
.xhb3 {
margin:0 2px;
}
.xhb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}
.woh1
{
border-top: 2px dotted white;
border-bottom: 2px dotted white;
//padding-left: 30px;
 } 
 .woh2
{
padding: 2px 0px 2px 2px;
 }
 .woh3
{
border-top: 2px dotted white;
border-bottom: 2px dotted white;
//width: 99%;
 }
#seShipTo {
    padding: 0.2em;
    }

18 Jun 2008, 00:10

#4

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: need help with side boxes

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
    }
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #C5D304;  
//    padding: 0.5em 0.2em;
border-top: 1px dotted white;
border-bottom: 1px dotted white;
padding: 2px 0px 2px 2px;
    }

You define padding-left: 30px; and then with
padding: 2px 0px 2px 2px;
you change that to 2px.
(top, right, bottom, left)

Actually, on examination, the 30px is working, because h3.leftBoxHeading has higher priority than .leftBoxHeading. What you are seeing is that some of the headings are also label elements, and those are getting another 30px of padding.

18 Jun 2008, 00:17

#5

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: need help with side boxes

LABEL, h4.optionName {
	font-size: 13px;
	color: #5f6601;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
	line-height: 1.5em;
	}

18 Jun 2008, 00:33

#6

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

Hi

Thanks for this

I will look at it now and get back

18 Jun 2008, 00:56

#7

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

Hi

I hade 30px set in more than 1 place (now removed)
That worked on some but not on:Featured [more]

Reviews [more]

Specials [more]

how can I sort these?

18 Jun 2008, 01:12

#8

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

Hi

If it helps this is my tpl_box_default_right.php:

<?php
/**
 * Common Template - tpl_box_default_right.php
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_box_default_right.php 2975 2006-02-05 19:33:51Z birdbrain $
 */

// choose box images based on box position
  if ($title_link) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
//
?>
<!--// bof: <?php echo $box_id; ?> //-->
<div class="xhsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<b class="xhtop"><b class="xhb1"></b><b class="xhb2"></b><b class="xhb3"></b><b class="xhb4"></b></b>
<h3 class="rightBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<b class="xhbottom"><b class="xhb4"></b><b class="xhb3"></b><b class="xhb2"></b><b class="xhb1"></b></b>
</div>
 
<div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                     <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
                     <div class="xboxcontent">
<?php echo $content; ?>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

also from the above can you see why all the left colum looks to be padded out more than the right colum

18 Jun 2008, 01:40

#9

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: need help with side boxes

tpl_box_default_right.php has nothing to do with the xxx [more]. Those are links, and are affected twice by this declaration:

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 13px;
	color: #5f6601;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
	}

Make it separate:

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 13px;
	color: #5f6601;
	text-align: left;
	font-weight: bold;
	}
h3.leftBoxHeading,
h3.rightBoxHeading {
	padding-left: 30px;
	}

If you think the left column is padded more than the right, I'd say it is an optical illusion. I believe they are equal in reality.

18 Jun 2008, 01:44

#10

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

gjh42:

tpl_box_default_right.php has nothing to do with the xxx [more]. Those are links, and are affected twice by this declaration:

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    padding-left: 30px;
    font-weight: bold;
    }

Make it separate:

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    font-weight: bold;
    }
h3.leftBoxHeading,
h3.rightBoxHeading {
    padding-left: 30px;
    }

Hi

Thanks it worked

your the BEST :smartalec:

18 Jun 2008, 02:24

#11

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

Hi

"optical illusion" yes or two much time on the pc.

as it look like you now a lot about css is it pos to fade a color from top to bottom? ie with out haveing to add loads of div?

18 Jun 2008, 02:32

#12

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: need help with side boxes

You can make a "fade" image, say 1000px by 5px, and use it as the background for the element you want to fade. If the fade is top to bottom, specify
background-repeat: repeat-x;
and the strip will repeat for the whole width of the element.

CSS3 is supposed to have the ablity to have lots of fancy fade effects without loading images, but it will be a while before those are safe to use in the real world.

18 Jun 2008, 02:49

#13

west_one

New Zenner

Join Date:: Nov 2006
Posts:: 34
Plugin Contributions:: 0

Re: need help with side boxes

Thanks for all your help.

all I need to do now is to get the biff box and header colors to be alternate color.

18 Jun 2008, 14:51

#14

littletoycompany

New Zenner

Join Date:: Mar 2007
Posts:: 33
Plugin Contributions:: 0

Re: need help with side boxes

I second that! Glenn is a CSS wizard and extremely helpful!!!

:yes:

West One:
Hi

Thanks it worked

your the BEST :smartalec: