Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls
 

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

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #131  
Old 02-10-2009, 06:13 PM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #132  
Old 02-11-2009, 12:22 PM
  lewaff's Avatar 
lewaff lewaff is offline
 

eXpert
  
Join Date: Jun 2007
Location: Nuneaton-England
Posts: 225
 

Default 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
__________________
Thank's
Lewis Afford
www.mobile-phone-batteries.eu X-cart v4.4.5 gold
www.mobile-phone-batteries.co.ukv4.4.5 gold
www.qualitechnic.co.uk v4.4.5 gold
Add-on: X-AOM (Advanced Order Management)
Reply With Quote
  #133  
Old 02-11-2009, 04:21 PM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

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

lewaff, see post #129 in this thread for 4.2.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #134  
Old 02-11-2009, 04:51 PM
 
pfarcus pfarcus is offline
 

Senior Member
  
Join Date: Jan 2009
Posts: 179
 

Default 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.
__________________
CDSEO PRO
4.1.11 PRO
Dynamic images by xcartmod.com
X-Cart CSSTemplate/Skin for v4.1.11 PRO
Reply With Quote
  #135  
Old 02-12-2009, 11:00 AM
  lewaff's Avatar 
lewaff lewaff is offline
 

eXpert
  
Join Date: Jun 2007
Location: Nuneaton-England
Posts: 225
 

Default 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
__________________
Thank's
Lewis Afford
www.mobile-phone-batteries.eu X-cart v4.4.5 gold
www.mobile-phone-batteries.co.ukv4.4.5 gold
www.qualitechnic.co.uk v4.4.5 gold
Add-on: X-AOM (Advanced Order Management)
Reply With Quote
  #136  
Old 02-12-2009, 12:50 PM
  lewaff's Avatar 
lewaff lewaff is offline
 

eXpert
  
Join Date: Jun 2007
Location: Nuneaton-England
Posts: 225
 

Default 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
__________________
Thank's
Lewis Afford
www.mobile-phone-batteries.eu X-cart v4.4.5 gold
www.mobile-phone-batteries.co.ukv4.4.5 gold
www.qualitechnic.co.uk v4.4.5 gold
Add-on: X-AOM (Advanced Order Management)
Reply With Quote
  #137  
Old 02-13-2009, 06:34 AM
 
iWD iWD is offline
 

Advanced Member
  
Join Date: Jul 2008
Posts: 57
 

Default 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!
__________________
iWD
X-Cart: v4.1.10
PHP: 5.2.6
Host: Hands-on Web Hosting ( Linux )
MySQL: 4.1.22
Add ons: On Sale
2TC - JB AutoShip
Reply With Quote

The following user thanks iWD for this useful post:
lewaff (02-15-2009)
  #138  
Old 02-14-2009, 07:05 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #139  
Old 02-16-2009, 05:57 AM
  hoosierglass's Avatar 
hoosierglass hoosierglass is offline
 

X-Adept
  
Join Date: Aug 2006
Location: Zionsville, IN
Posts: 974
 

Default 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
__________________
X-Cart Gold 4.7.7
Custom Work from www.luminointernet.com
www.indy-pen-dance.com
Reply With Quote
  #140  
Old 02-25-2009, 05:30 AM
 
stizz stizz is offline
 

Advanced Member
  
Join Date: Mar 2008
Posts: 51
 

Default 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}
__________________
http://www.stizz.nl X-Cart version 4.1.9 & 4.5.
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 10:13 AM.

   

 
X-Cart forums © 2001-2020