X-Cart forums - Pure CSS Rounded Boxes! (no images, no tables)

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Pure CSS Rounded Boxes! (no images, no tables) (https://forum.x-cart.com/showthread.php?t=33828)

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)

Quote:

Originally Posted by JWait

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)

Code:

{*

$Id: menu_dialog.tpl,v 1.4 2008/11/24 09:23:19 max Exp $

vim: set ts=2 sw=2 sts=2 et:

 Mods - replaced entire contents to make rounded boxes *}

<div class="xrounded{if $additional_class} {$additional_class}{/if}">

<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 $additional_class} {$additional_class}{/if}">

<h1 class="color_a" align="center">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>

<div class="content{if $additional_class} {$additional_class}{/if}">{$content}</div>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>

<b class="xb2"></b><b class="xb1"></b></b>

</div>

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

Code:

{*

$Id: dialog.tpl,v 1.8 2008/11/26 06:31:47 cray Exp $

vim: set ts=2 sw=2 sts=2 et:

 Mods - replaced entire contents to make rounded boxes *}

{if $printable ne ''}

{include file="dialog_printable.tpl"}

{else}

<div class="xrounded{if $additional_class} {$additional_class}{/if}">

<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 $additional_class} {$additional_class}{/if}">

<h1 class="color_a{if $printable ne 'Y'} title-with-sort-row{/if}">{$title}</h1>

 

<div class="dialog-search-sort-bar">

        {if $selected eq '' && $direction eq ''}

        {include file="customer/search_sort_by.tpl" selected=$search_prefilled.sort_field direction=$search_prefilled.sort_direction url=$products_sort_url}

        {else}

        {include file="customer/search_sort_by.tpl" url=$products_sort_url}

        {/if}

      </div>

<div class="content{if $additional_class} {$additional_class}{/if}">{$content}</div>

 

 

</div>

<b class="xbottom">

<b class="xb4"></b>

<b class="xb3"></b>

<b class="xb2"></b>

<b class="xb1"></b>

</b>

</div>

{/if}

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.

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)

Quote:

Originally Posted by lewaff

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

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}&cat={$cat}&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}&cat={$cat}&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}&cat={$cat}&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}
 
{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"> </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}