Re: Pure CSS Rounded Boxes! (no images, no tables)
 

To clear the templates cache, enter http://www.your site.com/cleanup.php in your browser.

"The extra dialogue menu I added is where it was"
There shouldn't be an "extra", the dialog.tpl in this mod replaces the original one. The same with menu.tpl. You can do this by naming the files "dialog.tpl-new" and "menu.tpl.new" and then uploading them via ftp. Then rename the existing dialog.tpl to dialog.tpl-old and rename dialog.tpl-new to dialog.tpl. This makes it easy to reverse if needed.
Enter http://www.your site.com/cleanup.php in your browser, and then go check your site.

Is your on sale mod in one of the menus, or in the center section? Depending on where it is, try working one the area where it isn't first. Does the on sale mod have a template (.tpl)? If so can you post it here?

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

By "extra dialogue menu" I mean a menu effected by the dialogue.tpl and not the menu.tpl.
I have added an extra "window" (I'm not sure how the terminology works.)
This is suppose to be an "ad-like" equivlient, though I can't get it to be just an image, but that's a problem for another thread.

Let me make it clear, I do not have two copies of the dialog.tpl or menu.tpl (well not on the server anyway) in the way you are describing (as that would not work well at all).

I am replacing them with a new file (with the changes).
When it breaks I then replace it with the old file (original).
And so the cycle continues.

So, that is not the problem I'm incurring, and the cleanup.php didn't seem to have any effect of the site design wise (though is nice to know how to use -- thanks!).

There doesn't appear to be any template (.tpl) files for the the "On Sale" mod (would it hide somewhere other then where the menu.tpl and dialog.tpl are?) There is only a php file, which I will not be touching if I can avoid it, as I am still only learning and will not break it, as it does its job very nicely!

The "On Sale" does appear as a link in the "products" menu on the left (in it's right hand corner) and as an "ad-like banner" in the center of the page.

I'm fine with that, though I've seen it on other pages and the link is the same as all the other product categories, if that is something I've done and therefore is what is causing the issue then anyone know how to fix that?

I can not change the dialog.tpl or the menu.tpl will effect one or both of these sections.
The menu.tpl will effect the "product" menu and it goes messy or the dialog.tpl effects the "featured products" and "my new ad window" this then causes issues.

I have this same "ad window" on all the other sites, same code, different coloured type.

Any Thoughts?

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

The menu.tpl controls the "boxes" in the left and right hand columns.
The dialog.tpl controls the "boxes" in the center column.

Have you tried using Webmaster mode to determine what template controls the "on sale" mod?

Can you send me a link (private message) to the site where you are having the problems?

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

I understand that the menu.tpl controls the "boxes" on the left and right column.
I understand that the dialog.tpl controls the "boxes" in the center column.
But, the dialog.tpl also controls my menu from the mod thread Adding HTML Boxes on Main Page where I added it on the right column. Again this is the same as the other sites, where I have rounded the corners.

Through webmaster mode I don't appear to get anymore details except that it is controlled by "onsale.php".

thanks

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

One of the problem is that the first "box" in your right column is using "DialogTitle", "DialogBorder" and "DialogBox" classes instead the normal "VertMenuTitle", "VertMenuBorder" . and "VertMenuBox". This is probably because dialog.tpl is being called from the template for that "box" instead of menu.tpl. This is evidenced by the rounded upper left hand corner and green outline instead of black, the same as your "dialog" boxes (like "featured products" has on your main page).

From the thread you referenced about "Adding HTML Boxes on Main Page", it calls the template "mycustombox.tpl", so it would be that or whatever you named it (onsale.tpl?) that controls that box. It needs to have menu.tpl instead of dialog.tpl control that space.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

I have tried using the menu.tpl settings on "my custom box" and when moving over the rounded corners menu.tpl the same problem occurred.
All the menus on the left were stretched across the page and so on.
It almost feels like an open tag, missing a close tag?
That's very HTML, but that's all I can compare it to.

On the other two sites that I am using the rounded corners on I am using the dialog.tpl for the box and the rounded corners works just fine? You just have to change the dialog.tpl file too.
Since I want a different look and feel for that window (so it jumps out) I would like to able to keep it as the same as the "feature products" window. I know right now they are very much the same, but I am looking at changing them, if I can get this to work.

I'm fairly certain that the "on sale" mod from altered carts, is what is making this rounded corners mod not work as it is the biggest difference, perhaps the only difference.

However, after searching around some more I finally found the .tpl files
There are 11 files, with lots of code.
They appear more to be the admin side and the middle window.
The part that makes the sales and the part where the sales themselves are displayed.
This is not where the issue appears to be occurring.

I fairly certain the problem is with where the setting on the "sales & promotions" link is in the "products" window.
I went through the language feature and found the title of the "sales & promotions" link in the "product" window, but that is not in any of the tpl files?
Therefore I can't move it where it is suppose to go. Perhaps that line of code is missing?
The close tag so to speak?
I didn't change the code, I only used it and added sales, so it would have to be something that happen in installation or something else I might have done in the CSS/Design that effected.

In the demo version on the altered carts site, their link in that menu is the same as all the other categories. Maybe this is what is causing it?
But, the mod works fine otherwise?

Any thoughts?
Thanks!

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

In case anyone is wondering how this turned out.
This has now been resolved!

There were some issues in the "On Sale" code placed in the categories.tpl
So if you have the same issue, the problem probably lies in there.

Thanks a million from JWait

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

rounded boxes is nice. How do i accomplish this in x-cart 4.2?

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

4.2 is kind of tricky, but I am working on it. But it is not easy, and the code below doesn't make it work. Read under the code posted for an explanation.

Here is what I have so far....

skin1/customer/menu_dialog.tpl (for the menu boxes)

skin1/customer/dialog.tpl (for the center boxes)

There are several templates that use "lists" to get the items to display. I know that categories.tpl, and help.tpl have them, and manufacturers.tpl probably does also. Anyway, I had to "convert" the <ul>s and <li>s to use simple <br /> tags to get the boxes to close and display correctly. It "works" but I'm not happy with it.

You also have to add the classes posted earlier (post #82) in this thread to your main.css stylesheet. Post #94 deals with a problem in IE that I can't seem to replicate, so you might check there if you run into a problem.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

I love this too but I'm having the same stretching problem as iWD, only in the admin side. Everything else is great, just the left boxes stretch waaay out.

I bet this is an easy fix but I can't figure out how. (see pic)

thanks

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

The problem iWD had was cause by a custom mod that screwed up the formatting. Do you have a custom mod installed (probably in the admin side)?

What you can do is do one section at a time. Change the dialog.tpl first, clear your template cache, then check it out to make sure it works both on the customer side and the admin side. Once you are satisfied it is working ok, change it back. Then change the menu.tpl, clear the cache, and see if it works ok. This will at least give a clue as to where to look for a problem.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Looks Great with V4.2

but no skin1.css to modify
so modified main.css instead
thanks lewis

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

lewaff, see post #129 in this thread for 4.2.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

I tracked down the problem, I figured i'd see what happened if I copied the whole skin1.css and pasted it into skin1admin.css Worked like a charm except this one little problem with the stretching. Guess I have to go fix up my skinadmin.css to look like my skin1.css manually.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Thanks for this mod
but can any body tell me where to get rid of the bullets and get the text to look right
heres a screen shot
http://www.mobile-phone-batteries.co.uk/images/rounded1.gif
V4.2

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

with v4.2 could not use dialog.tpl
as it it crashes out the checkout register page
lewis

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

lewaff

The bullets should be in the category.tpl file.
You have a <ul> or <li> or some other "list" tag adding the bullets to your category lists.
Go within the category.tpl and remove or alter it there.
Test this on a test store if possible because I found it difficult to remove the bullet without removing the list, which then puts all the products in one line.

Hopefully that helps
I'm still new at this!

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Yes, I haven't gotten that far yet. You could probably "get by" using a clone of the default dialog.tpl by renaming it and calling it instead.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

So I am assuming that this has not been successfully completed for 4.2?

I have been trying to do this with images in 4.2 and keep banging my head on the monitor. ](*,)

It seems to me that the CSS in 4.2 is overly complex, but it has such a minimal amount of html in the template files the pages load much faster.

If someone has the time (I know this is asking a lot) and wants to send me a PM with how to do this in 4.2 with images until this gets resolved in pure CSS, I would really appreciate it. I have been able to get the background and corners on the title boxes but have not been able to get the side lines and bottom line and corners to go.

Mike

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Hello!

Wonderful mod! I used the round boxes in products_t.tpl to make round boxes on my thumbnails. It worked out fine, now i still got one problem.
The boxes i made look like this:http://www.stizz.nl/skin1/prtscrn%20roundboxes.jpg

As you can see the left cell is in height smaller than the other 2 cells. I would like to have all these cells same height same width. Besides that you might see that the productnames contain or 1 or 2 lines. When they contain 2 lines the picture is lower than with 1 line of productname text. I've been trying to get the product names, images and prices (below) all on the same rows like:

Product name Product name short
longer

Image image

Price Price

Could anyone please help me out on this? It's driving me crazy.
Thanks in advance! (sorry for the long codes, didn't know how to create a scrollbox)

Here's the code i'm trying to change in products_t.tpl:

{* $Id: products_t.tpl,v 1.30.2.4 2006/11/27 11:40:25 max Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="680px" cellpadding="0" cellspacing="0">
<table bgcolor="#ffffff" border="0">

{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}

{section name=product loop=$products}
{assign var="discount" value=0}

{if %product.index% is div by $config.Appearance.products_per_row}
<tr>
{assign var="cell_counter" value=0}
{/if}

{math equation="x+1" x=$cell_counter assign="cell_counter" }

<td width="{$width}%" class="PListCell">

<div class="xroundedthumb">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontent">
{if $link_href}<a href="{$link_href}">{/if}
{$menu_title}
{if $link_href}
{/if}
</a>
<div>
<p>
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
{$lng.lbl_sku}: {$products[product].productcode}<br />
{/if}
<table cellpadding="3" cellspacing="0" width="100">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">
{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>
</tr>
</table>

{*<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">{$lng.lbl_see_details}</a>*}
{if $products[product].product_type ne "C"}
<br />
<br />
{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}
{include file="modules/Subscriptions/subscription_info_inlist.tpl"}
{else}
{if $config.General.unlimited_products ne "Y" && ($products[product].avail le 0 or $products[product].avail lt $products[product].min_amount) && $products[product].variantid}
&nbsp;
{elseif $products[product].taxed_price ne 0}
{if $products[product].list_price gt 0 and $products[product].taxed_price lt $products[product].list_price}
{math equation="100-(price/lprice)*100" price=$products[product].taxed_price lprice=$products[product].list_price format="%3.0f" assign=discount}
{if $discount gt 0}
<font class="MarketPrice">{$lng.lbl_market_price}: <s>
{include file="currency.tpl" value=$products[product].list_price}
</s></font><br />
{/if}
{/if}

<font class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</font><br /><font class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</font>{if $discount gt 0}{if $config.General.alter_currency_symbol ne ""},{/if} {$lng.lbl_save_price} {$discount}%{/if}
{if $products[product].taxes}<br />{/if}
{if $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}
{include file="modules/Special_Offers/customer/product_special_price.tpl" product=$products[product]}
{/if}
{else}
<font class="ProductPrice">{$lng.lbl_enter_your_price}
</font>
{/if}
{/if}
</div>
</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}
<div align="center" style="width: 100%; padding-top: 10px;">

{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}
</div>
{/if}

{*** Uncomment it if you need 'Buy Now' button ***
{if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}
{include file="customer/main/buy_now.tpl" product=$products[product]}
{/if}
*** Uncomment it if you need 'Buy Now' button ***}
{/if}
</td>

{capture name=prod_index}
{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}
{/capture}
{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }
</tr>
{/if}

{/section}

{if $cell_counter lt $config.Appearance.products_per_row}
{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}
<td class="SectionBox">&nbsp;</td>
{/section}
</tr>
{/if}

</table>

</td>
</tr>

</table>
{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses}
{include file="modules/Feature_Comparison/compare_selected_button.tpl"}
{/if}

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Hey Stizz
Is it possible that because the thbnail image is smaller in box 1 then the box is also smaller.

If so I beleive you may be able to address this by fixing the height of the product box.

You should be able to use something like height: 150px (you may need to add in your body class height :100% to get this to work)

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Hi Paul,
Thanks for your reply. The thumbnails are all the same size. Since my post i've been working on it, here's what it looks like now:
http://www.stizz.nl/skin1/prtscrn_roundboxes2.jpg
As you can see the box in the middle is larger than the other 2 because of the double lined text (RED). I would love to have the boxes with only one line of text as large as the middle box. So there should be a break between product name and price for boxes with 1 line of (productname) text.
Haha can you still follow me?
I really hope someone knows some sort of code for it :) i can't get it done..

Cheers from Holland.

Yorick
Stizz

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Ok.. in skin1.css or skin1_c.css (depending on which you use), add the class...

.ProdTitle { height:53px; }

Then in products_t.tpl find
and change it to...

Clear your templates cache (www.yoursite.com/cleanup.php) and see how it displays.

Then go back to skin1.css or skin1_c.css (depending on which you use) and adjust the height at .ProdTitle { height:53px; } until you are satisfied.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

The answer I gave adjusts the height of the Product Title regardless or whether it is one line, two line, or even three lines. You simply make the .ProdTitle class height match the longest of your product titles. It is a matter of the length of the title as it will automatically wrap after approximately 20 characters (in the example given).

This could/should be done even if you don't use the rounded boxes as it makes the images line up evenly even without a "box" around the products. What it does is make the "shorter" boxes as tall as the "tallest" box.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

wow amazing jwait! it's perfect now! Nice rows, nice lines!
Thanks a lot!

Greets
Yorick
Stizz

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Ok, a simple fix here use this mod with Fast Lane Checkout for x-cart version 4.2...

Open skin1_original/customer/dialog.tpl and edit the title to say...
$Id: checkout-dialog.tpl,v 1.8 2008/11/26 06:31:47 cray Exp $

Then save as to skin1/customer/checkout-dialog.tpl
(note: this is a different folder than skin1_original)

Open skin1/modules/Fast_Lane_Checkout/checkout_0_enter.tpl
and find....
and change it to...
and find
and change it to

What we are doing is changing the instances of dialog.tpl to our new checkout-dialog.tpl. This will make the "returning customer" and "new customer" boxes square, but it should work. Please note that I have not tried it yet, but I will and make any corrections if necessary.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Hi, regarding post #143, I've tried this several times in from diff posts. Doesnt seem to do anything.

Are your instructions for 4.1.11?
Its customer/main/products_t.tpl right?
Does it matter where you put that code in skin1.css?
I don't have rounded boxes set up for the thumbs, just the center big box.
Here is the top part of my code from products_t.tp, can you see anything wrong? (or anybody?)

Thx in advance.

{* $Id: products_t.tpl,v 1.30.2.12 2008/07/15 12:07:40 ferz Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

<table width="100%" cellpadding="5" cellspacing="1">

{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}

{section name=product loop=$products}
{assign var="discount" value=0}

{if %product.index% is div by $config.Appearance.products_per_row}
<tr>
{assign var="cell_counter" value=0}
{/if}

{math equation="x+1" x=$cell_counter assign="cell_counter" }

<td width="{$width}%" class="PListCell">

<div class="ProdTitle"><a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
<font class="SmallText">{$lng.lbl_sku}: {$products[product].productcode}</font><br />
{/if}</div>
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}">{i nclude file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" && $products[product].have_offers && $usertype eq 'C'}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

What post #143 addresses is when you have a long product title it will wrap over to the next line. Since products_t.tpl makes your products display in columns, if you have one product title that wraps and one that doesn't it will throw the images off line (or if you have "boxes" around your products like the examples that the question was about, it makes the boxes different sizes). By making a "space" for the product title it doesn't matter if it wraps or not (unless it uses more of the "space" provided by the height=53px definition in the ProdTitle class). If your product titles don't wrap (are not long enough) it should do anything (except put more space between the product title and the image). Also, you probably need to clear your templates cache (www.yoursite.com/cleanup.php) before you would notice any change.

It shouldn't matter where you put the ProdTitle class, and it shouldn't matter what version of x-cart you are using.

I hope this makes sense. :)

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

yeah, thanks, sorry I do understand. It just doesnt seem to do anything. I tried setting it as something crazy like 1053px but nothing ever budges. No movement. I started with a clean original products_t.tpl. I don't know where my problem is. (i do have some lines that long enough to wrap)

Thx for your quick response though.:-)

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Well, products_t.tpl is only used if you display your products in columns 2 or 3 across the page. If you display your products 1 per line down the page then it uses products.tpl and this mod is unnecessary (unless you display featured products in columns). Which are you using? Also, most times changes will not appear until the templates cache is cleared. enter www.yoursite.com/cleanup.php in you browser to do this.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Yeah I actually have 5 across. My site seems to update pretty instantly although I did try the cache cleanup.

I tried messing with the .css in golive too, I can change the line height that way but the "height" wont budge. Like I said I've tried starting with a clean new tpl for that too. Beats me.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

If you have 5 items across then the template has been modified. Can you PM me a link or post one here so I can have a look?

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

I figured since I restored the original TPL it wouldnt matter. But I PM'ed ya.

Huge thanks.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Yes, main.css replaced skin1.css and I think skin1_c.css in version 4.2

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Managed to get rounded boxes on the original skin with V4.2 as mention earler now I have applied one of the free skins (Neon Lights - Music) with V4.2 and cannot get any curved boxes at all now
were did i go wrong
thanks

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Well, when using x-cart's custom skins in the 4.1.x version, skin1.css is replaced with skin1_c.css. They probably did something similar with the 4.2 version.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Jwait,

I noticed you said you were close in post #129 and posted a few other fixes...

Did you officially get it to work with 4.2?

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

Not really. I changed the categories to <br /> tags instead of a bulleted list, and on the "register" page during checkout just made a clone of the original dialog.tpl to use during checkout. I've attached it if you need it.

I've given up on 4.2... waiting for 5.0.

Re: Pure CSS Rounded Boxes! (no images, no tables)
 

great, mod - love it.

I seem to have a rendering issue when using google chrome browser. has anyone else come across this.

an example would be this page: http://www.coffeeshrine.com.au/saeco-via-venezia.html where you can see the red of the box heading extends the entire way down the box.

i have not seen this in any other browsers that i have tested

does anyone have a suggested fix??


thanks