Nifty Zen Template - Rounded Corners without images!

sorry that this is delayed due to some pc hardware issue. :blush:

now it looks like this, scrshot:

and i prefer the upper approach(html_header.php). :smile: because this way the inner wrapper will not be so jam packed with links.

that said, i may as well put the links inside wrapper if i have a horizontal flyout menu implemented.

thanks for a new style of template to play with , can anyone tell me how to split the boxes apart a little .

Ive tried padding the bottom of .SideBoxContainer but it doesn't seem to work . I just want the sideboxes to be seperated with "white space"

I know its just a CSS tweak somewhere , but cant figure it at the moment.

Cheers

crazycucumber:

thanks for a new style of template to play with , can anyone tell me how to split the boxes apart a little .

Ive tried padding the bottom of .SideBoxContainer but it doesn't seem to work . I just want the sideboxes to be seperated with "white space"

I know its just a CSS tweak somewhere , but cant figure it at the moment.

Cheers

There is no .SideBoxContainer tag, as far as I know, :happy:
Also, try it with a margin instead:
.sideBoxContent {
padding: 0.4em;
margin-bottom:2em;
}

I love this theme, but some customisation is a problem for me.
I want a fixed width cause I want a full size backgroundpicture in the whole header. So covering the whole blue header area. I guess I need a split image (behind the NIFTZEN logo and the tabs/search). I don't use the categories in the header and my niftyzentemplate is centered.
Please give me some directions for the fixed width and headerbackgroundimage.

nb. NiftyZen templates works well with vs. 1.3.6

I am using 1.3.6 and followed the directions to a tee ( I believe) to center the nifty template but it still wont work.. here is what I have for the css:
/**

• Main CSS Stylesheet
• @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: stylesheet_new.css nifty_zen v1.2 2006-Sep-10 jettrue $
  */

/* Site centering instructions for this template are found under #outermainWrapper*/

• {
  margin:0;
  padding:0;
  }

body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 79.5%;
color: #000000;
margin:30px 0;
background:#fff;
}

a img {
border: none;
}

a:link, #navEZPagesTOC ul li a {
color: #333;
text-decoration: none;
}

a:visited {
color: #666;
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: #000;
}

a:active {
color: #000;
}

h1 {
font-size: 1.4em;
}

h2 {
font-size: 1.3em;
}

h3 {
font-size: 1.2em;
}

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

.biggerText {
font-size: 1.2em;
}

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

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

FORM, SELECT, INPUT {
font-size: 1em;
margin: 2px;
}

.navMainSearch INPUT {
font-size:11px;
}

form {
display:inline;
margin-top:0px;
margin-bottom:0px;
}

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

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

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

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

LABEL, h4.optionName {
line-height: 1.25em;
padding: 0.1em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
font-size: 0.95em;
margin: 0.2em 0.5em;
}

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

#logo {
margin-left:5px;
}

LABEL.inputLabel {
font-size: 0.95em;
width: 10em;
float: left;
}

#checkoutPayment .inputLabel {
width:85%;
}

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

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

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 #000000;
}

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

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

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

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
}

#navColumnOneWrapper, #navColumnTwoWrapper{
background:#F0FAFD;
}

#tagline {
color:#333;
font-size: 1.4em;
text-align : center;
padding:20px 5px 0 0;
}

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

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #csNotifications, #navEZPagesTOCWrapper {
margin: 10px 0px;
width: 100%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/navigation/

.navSplitPagesResult {
margin: 0.5em;
font-size: 0.9em;
}

.navSplitPagesLinks {
margin: 0.5em;
font-size: 0.9em;
}

.navNextPrevCounter {
font-size: 0.9em;
}

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

#navMainWrapper {
color: #000;
width: 100%;
height: 25px;
}

#navCatTabsWrapper {
color: #000;
width: 100%;
line-height:1.3;
}

/*This section controls the top tab links */
div#navMain {
float:left;
height:0;
background: #93D6E8; /background color behind tabs, should match logo color (blue default)/
}

ul#back,ul#back li {
list-style-type:none;
}

ul#back {
margin-left: 1.5em;
font-size:13px;
}

ul#back li {
float:left;
margin-right: 3px;
text-align: center;
}

ul#back a {
float:left;
width: 7em;
padding: 5px;
background: #666;
text-decoration:none;
color: #fff; /color of top tabs and text color (grey default)/
}

ul#back a:hover {
background: #933;
color: #000; /*color of top tabs and text color when you hover over them (red default) */
}

/*end top tab links */

/wrappers - page or section containers/

#outermainWrapper {
background-color: #4B4B4B; /this controls the color of the small outermost strip of background border (grey border default)/
width: 65em;
max-width: 1024px;
padding:8px;
text-align: center;
margin:0 auto;
/text-align:center;
margin:0 auto;
padding:8px;/ /to center this site, uncomment these, and erase the padding:8px 8px 8px 0; above. Then open up includes/templates/nifty_zen/jscript/jscript/niftyalayout.js and follow instructions there/
}

#mainWrapper {
background-color: #93D6E8; /this controls the color of the inner rounded edges, both top right and bottom right (blue default)/
text-align: left;
width: 64.8em;
max-width:1019px;
}

#contentMainWrapper {
border-top:1em solid #933; /color of border below the tabs (red default)/
color:#000;
background:#fff;
font-size:110%;
position:relative;
}

#navSuppWrapper {
border-top:1em solid #933; /color of border above the footer (red default)/
color:#fff;
}

#navSupp {
background:#93D6E8; /color of footer where the Home link is (blue default)/
}

#navColumnOne {
padding: 0;
background:#F0FAFD; /*background color of left sidebox (light blue default /
border-right:5px solid #333; / left sideboxes border (default grey) */
}

#navColumnTwo {
padding: 0;
background:#F0FAFD; /*background color of right sidebox (light blue default /
border-left:5px solid #333; / right sideboxes border (default grey) */
}

h3.leftBoxHeading, h3.rightBoxHeading{
background:#93D6E8; /* background color behind sidebox heading (blue default) */
padding:0;
margin-top:3px;
width:100%;
}

h3.rightBoxHeading a:hover, h3.rightBoxHeading a, h3.leftBoxHeading a:hover, h3.leftBoxHeading a{
color: #000; /* text color of sidebox heading */
text-decoration: none;
}

#navSupp ul, #navCatTabs ul {
padding: .2em .5em;
list-style-type: none;
text-align: center;
}

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

#navSupp ul li a{
text-decoration: none;
padding: 0 0.5em;
color: #fff;
white-space: nowrap;
}

#navCatTabs ul li a {
text-decoration: none;
padding: 0 0.5em;
color: #000;
font-weight:bold;
white-space: nowrap;
}

#navCatTabs ul li a:HOVER, #navEZPagesTop a:hover{
color: #fff;
font-weight:bold;
}

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

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

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

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

#navMainSearch, #navCategoryIcon, #indexProductListCatDescription {
margin:0 0.5em;
}

#navEZPagesTop {
font-size: 1em;
font-weight: bold;
margin-bottom:.5em;
padding: .5em 2em;
background: #93D6E8;
}

#navBreadCrumb {
font-size: 1em;
font-weight: bold;
padding: 0.5em;
background:#fff;
}

.leftBoxContainer {
padding:0;
}

/The main content classes/

#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

#productDescription, .shippingEstimatorWrapper {
padding: 0.5em;
}

.alert {
color: #933;
margin-left: 0.1em;
font-size: 0.9em;
}

.advisory {}

.important {
font-size: 1.1em;
}

.notice {}

.rating{}

.gvBal {
float: right;
}

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.centerColumn {
line-height:1.2;
}

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

#siteinfoLegal {
padding:10px;
}

/Shopping Cart Display/

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

.cartTableHeading TH {
border-bottom: 1px solid #cccccc;
}

.cartTableHeading, #cartSubTotal {
background-color: #e9e9e9;
height: 2.2em;
}

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

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

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

#scUpdateQuantity {
width: 2em;
}

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

.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;
}

.cartAttribsList {
margin-left: 1em;
}

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

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

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

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

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
}

.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 {}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

h2.centerBoxHeading, .productListing-rowheading {
font-size: 1em;
color: #000;
padding: 0.5em 0.2em;
border-bottom: 1px solid #9a9a9a;
}

.centerBoxWrapper, .tabTable {
padding: 0px;
height: 1%; /do not remove- IEhack/
border: 1px solid #9a9a9a;
margin-bottom: 1em;
}

.sideBoxContent {
padding: 0.4em;
}

.rightBoxContent {
margin-bottom: 1em;
}

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

#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;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/misc/
.back {
float: left;
}

.forward {
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;
}

CAPTION {
/display: none;/
}

#myAccountGen li, #myAccountNotify li {
}

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

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

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

#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;
}

and the jscript:

/*to center the site, change
Nifty("div#mainWrapper", "big right");
Nifty("div#outermainWrapper", "big right");

to

Nifty("div#mainWrapper", "big");
Nifty("div#outermainWrapper", "big");
*/

NiftyLoad=function(){
Nifty("ul#back a","small transparent top");
Nifty("div#mainWrapper", "big");
Nifty("div#outermainWrapper", "big");
}

did I screw up somewhere?

Thanks in advance!

bfwdesigns:

I am using 1.3.6 and followed the directions to a tee ( I believe) to center the nifty template but it still wont work.. here is what I have for the css:

did I screw up somewhere?

Thanks in advance!

I just pasted your entire stylesheet into my 1.3.6 test site, and it centered it just fine. What it didn't do though, is create the correct corners. Because as my instructions stated, you need to:

Then open up includes/templates/nifty_zen/jscript/jscript/niftyalayout.js and follow instructions there*/

Take this:

and the jscript:

/*to center the site, change 
Nifty("div#mainWrapper", "big right");
Nifty("div#outermainWrapper", "big right");

to

Nifty("div#mainWrapper", "big");
Nifty("div#outermainWrapper", "big");
*/

NiftyLoad=function(){
Nifty("ul#back a","small transparent top");
Nifty("div#mainWrapper", "big");
Nifty("div#outermainWrapper", "big");
}

off of the stylesheet, and open up the correct file for the jscript. That section doesn't belong in the stylesheet at all.

ok, it worked great! Thank you!!!

I did have 2 questions:

1. How do you get rid of the tagline? It this just any other template in the english.php file?

2. Also, if I just wanted to have 1 column (along the left side) and get rid of the second column and the black line or whatever it is that separates the center from right.. would this be possible? If so, what would you do? code? css?

Thanks in advance!

bfwdesigns:

ok, it worked great! Thank you!!!

I did have 2 questions:

1. How do you get rid of the tagline? It this just any other template in the english.php file?

2. Also, if I just wanted to have 1 column (along the left side) and get rid of the second column and the black line or whatever it is that separates the center from right.. would this be possible? If so, what would you do? code? css?

Thanks in advance!

1. yes, this is done through the language files. A search of the forum will have complete instructions on doing that.

2. This is done through the admin, under "Tools" and "Layout Settings".

Thanks for the reply, but I know how to shut off the side categories but I think the right column is part of the design because when I downloaded it, it already had a left, center and right column without me having any categories...

bfwdesigns:

Thanks for the reply, but I know how to shut off the side categories but I think the right column is part of the design because when I downloaded it, it already had a left, center and right column without me having any categories...

I meant to say go to "Configuration" then "Layout Settings".

This template has been updated for 1.3.6, basically I just made the changes noted here:

http://www.zen-cart.com/forum/showthread.php?t=49957

applied it. great. :)

Added another quick update, as I forgot to make a small edit in includes/templates/nifty_zen/common/tpl_header.php. Simply change:

Jadefish- I wanted to thank you for such prompt responses and for all your help.

I had one more question. There is no image for the header except the logo.gif and I wanted to know if possible to make the logo.gif a bigger image and make it into a header that goes across where the small logo is now... would i just resize the logo to fit and where do i change the dimensions, css? I would like the dimension to be like w=750 or something like that ... is this possible with the nifty template?

bfwdesigns:

Jadefish- I wanted to thank you for such prompt responses and for all your help.

I had one more question. There is no image for the header except the logo.gif and I wanted to know if possible to make the logo.gif a bigger image and make it into a header that goes across where the small logo is now... would i just resize the logo to fit and where do i change the dimensions, css? I would like the dimension to be like w=750 or something like that ... is this possible with the nifty template?

You don't need to change any dimensions anywhere, just upload your larger logo.gif. You'll need to edit or remove your tagline, so that it can fit if you want to have a tagline, or just make it empty if you don't want a tagline at all.

Hi jettrue,
I think bfwdesigns means with his question the same as I asked a few days ago. How can we put a image in the full header, including the area behind the tabs.
Take a look at the image for complete understanding

1. area A must disappeer
2. area Beste heer/mevrouw must disappeer
3. behind the tabs, area C, must the image continue (split image)

I already find out, in the CSS the width of the page must be set by px instead of em

erwin208:

Hi jettrue,
I think bfwdesigns means with his question the same as I asked a few days ago. How can we put a image in the full header, including the area behind the tabs.
Take a look at the image for complete understanding

1. area A must disappeer
2. area Beste heer/mevrouw must disappeer
3. behind the tabs, area C, must the image continue (split image)

I already find out, in the CSS the width of the page must be set by px instead of em

I don't think that is possible. The corners are drawn by nifty corners... so even if you got the image all the way accross, there will still be some background all around. This site is designed to have a logo with the same colored background as the inner background of the site. Otherwise it would just be better to not have nifty corners on the top... just on the bottom. I have no idea why the image is split like that.

I love the idea of doing rounded corners without images and was wondering how difficult it would be to apply to boxes and/or columns? I've had a look at Alessandro Fulciniti's original Nifty Corners Cube page and it looks like a bit of a hill to climb! Before I start trying to reinvent the wheel I was just wondering if anybody had already gone some way down the road?

imac:

I love the idea of doing rounded corners without images and was wondering how difficult it would be to apply to boxes and/or columns? I've had a look at Alessandro Fulciniti's original Nifty Corners Cube page and it looks like a bit of a hill to climb! Before I start trying to reinvent the wheel I was just wondering if anybody had already gone some way down the road?

Sure, you can apply the nifty corners to any portion you like. I've used it for sideboxes as well. Just open up jscript_niftyalayout.js, and you can add the div you want to add the sideboxes to there. For example, right now that file contains these:
Nifty("div#mainWrapper", "big right");
Nifty("div#outermainWrapper", "big right");

You can play around with trying
Nifty("div#navColumnTwo", "big right");
if you want the entire right sidebox enclosed, or if you want to enclose only say the categories sidebox, you can try:
Nifty("div#categoriesContent", "big right");

Then you'd open up your stylesheet and five whatever div you style the background color you want it to have. Might take some css tweaking to get it the way you want it to look, but getting it to work on any div you want, only requires you to adjust the jscript/jscript/niftyalayout.js file.

Jade,

Thanks for the reply. > jettrue:

Just open up jscript_niftyalayout.js, and you can add the div you want to add the sideboxes to there. Straight after I'd posted yesterday I decided to try more-or-less exactly that. I copied tpl_box_default_left.php into my template folder and, just to be 'safe', decided to wrap div class="leftBoxContainer" in a couple of new ones: ```

Result was that it rounded the corners of the first sidebox (Categories) as expected, but left all the others square. :dontgetit

Skimming back through the examples on Alessandro's original Nifty Corners Cube page I started to form the (dim!) impression that if I want to round more than one element then I either need to make multiple calls or turn the sideboxes into some kind of list as you have done with the tabs. Don't know if that's right or not, but must admit that at that point I hit the brain-fade barrier and decided to give it a rest for a while. Can't say I woke up this morning with any better idea on what to try next. Any pointers would be much appreciated.

Ian