X-Cart forums - Rounded boxes

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

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Rounded boxes (https://forum.x-cart.com/showthread.php?t=38338)

I have the following menu.tpl..

Quote:

{if $usertype eq "C"} {* Flexy_Rectangles *}
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
{if $menu_mode ne ""}
<td colspan="2" class="{$menu_mode}MenuBorder"><img src="{$ImagesDir}/custom/{$menu_mode}menu_title_border_bg.gif" width="7" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" class="{$menu_mode}MenuTitle">

<table cellpadding="0" cellspacing="0">
<tr>
<td style="BACKGROUND-IMAGE: URL({$ImagesDir}/custom/{$menu_mode}menu_title_middle_bg.gif)"><img src="{$ImagesDir}/spacer.gif" width="7" height="1" alt="" /></td>
<td height="25"> </td>
<td><img src="{$ImagesDir}/custom/menu_head_arrow.gif" width="5" height="23" alt="" align="middle" /></td>
<td> </td>
<td nowrap="nowrap" height="25" width="100%">
{if $link_href}
<a href="{$link_href}" class="{$menu_mode}MenuTitleLink">{$menu_title}</a>
{else}
<font class="{$menu_mode}MenuTitle">{$menu_title}</font>
{/if}
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td colspan="2" class="{$menu_mode}MenuBorder"><img src="{$ImagesDir}/custom/{$menu_mode}menu_title_border_bg.gif" width="7" height="2" alt="" /></td>
{else}
<td style="BACKGROUND-IMAGE: URL({$ImagesDir}/custom/menu_head_bg.gif)" colspan="2" class="MenuTitleBg">

<table cellpadding="0" cellspacing="0">
<tr>
<td> <img src="{$ImagesDir}/custom/menu_head_arrow.gif" width="5" height="23" alt="" align="middle" /> </td>
<td nowrap="nowrap">
{if $link_href}
<a href="{$link_href}" class="MenuTitleLink">{$menu_title}</a>
{else}
<font class="MenuTitle">{$menu_title}</font>
{/if}
</td>
</tr>
</table>

</td>
{/if}
</tr>
<tr>
<td class="VertMenuBox{$menu_box_color}" {if $menu_box_color}style="BACKGROUND-IMAGE: URL({$ImagesDir}/custom/right_side_bg.gif); BACKGROUND-REPEAT:repeat-y;"{/if}> </td>
<td width="100%" class="VertMenuBox{$menu_box_color}">

<table cellpadding="5" cellspacing="0" width="100%">
<tr>
<td>{$menu_content}<br /></td>
</tr>
</table>

</td>
</tr>
</table>
{else} {* Flexy_Rectangles *}
<table cellspacing="1" width="100%" class="VertMenuBorder">
<tr>
<td class="VertMenuTitle">
<table cellspacing="0" cellpadding="0" width="100%"><tr>
<td>{$link_begin}<img src="{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}" class="VertMenuTitleIcon" alt="{$menu_title|escape}" />{$link_end}</td>
<td width="100%">{if $link_href}<a href="{$link_href}">{/if}<font class="VertMenuTitle">{$menu_title}</font>{if $link_href}</a>{/if}</td>
</tr></table>
</td>
</tr>
<tr>
<td class="VertMenuBox">
<table cellpadding="{$cellpadding|default:"5"}" cellspacing="0" width="100%">
<tr><td>{$menu_content}<br /></td></tr>
</table>
</td></tr>
</table>
{/if} {* Flexy_Rectangles *}

I somehow want to add the following code to get rounded boxes, Every where i seem to add it causes some sort of errors..

Quote:

<div class="xrounded">
<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">
<h1 class="color_a">{if $link_href}<a href="{$link_href}">{/if}{$menu_title}{if $link_href}</a>{/if}</h1>
<div><p>
{$menu_content}</p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

If I just replaced the whole menu.tpl with the above code, it sort of works. I get nice rounded boxes but the text in the box is too big for the box.

Re: Rounded boxes

Check, what are the settings for text in the "skin1.css" to:
<div>, <p>, xboxcontent, h1 color_a, xb3 color_a, xb4 color_a and ...?

Re: Rounded boxes

I am having the same problem with the rounded boxes. It looks nice but the text in the dialog box runs over. I have tried to figure out exactly what to change in the skin1.css file but nothing works. How do I make the dialog box wider?

Re: Rounded boxes

Quote:

Originally Posted by Yurij

Check, what are the settings for text in the "skin1.css" to:
<div>, <p>, xboxcontent, h1 color_a, xb3 color_a, xb4 color_a and ...?

Heres the css

Quote:

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.2em;
padding:0 8px 3px 8px;
border-bottom:1px solid #d0d0d0;
}
.xrounded p, .zrounded p {
margin:0;
padding:5px 0;
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent;
width:170px; /*Adjust the width here*/
float:left;
margin:0 0 15px 0;
line-height:125%;
}
.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:#fff;
border-left:1px solid #d0d0d0;
border-right:1px solid #d0d0d0;
}
.xb1 {
margin:0 5px;
background:#d0d0d0;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
border-left:1px solid #d0d0d0; border-right:1px solid #d0d0d0; border-top:0px solid #d0d0d0; border-bottom:0px solid #d0d0d0; display:block;
height:auto;
background:#fff
}
div.xboxcontent div{
padding: 0 4px 0 8px;
}
* html .xboxcontent {
height:1px;
}
.color_a {
background: #A5D3FF; /* Change the top part color here*/
color:#000;
}
.xroundedthumb h1 {
margin:0;
font-size:1.2em;
padding:0 8px 3px 8px;
}
.xroundedthumb p {
margin:0;
padding:5px 0;
font-size:10px;
line-height:125%;
}
.xroundedthumb {
background: transparent;
width:100%;
float:left;
margin:0 0 15px 0;
line-height:125%;
}
.sidebox {
margin: 0 auto;
width: 28em;
background: url('images/sbbody-r.gif') no-repeat bottom right;
font-size: 100%
}
.boxhead {
background: url('images/sbhead-r.gif') no-repeat top right;
margin: 0;
padding: 0;
text-align: left
}
.boxhead h2 {
background: url('images/sbhead-l.gif') no-repeat top left;
margin: 0;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; padding-left:30px; padding-right:30px; padding-top:22px; padding-bottom:5px
}
.boxbody {
background: url('images/sbbody-l.gif') no-repeat bottom left;
margin: 0;
padding-left:30px; padding-right:30px; padding-top:5px; padding-bottom:31px
}

Re: Rounded boxes

Quote:

Originally Posted by tamicampos

I never got to the bottom of it.

I assume its something to do with the fact Im using a add on template, rather then the original x-cart skin.

Re: Rounded boxes

Hi homeworldz,

Is this currently implemented on your site? As I cannot see it. If you can provide a direct link or a temporary html copy uploaded to your site with the changes done (ie. copy the source into a blank .html doc). I/we maybe able to help.

Also, you may have to do a few changes to your htaccess if your store is live. At the moment if you type in your domain without the www. in front, it produces a 404 "Error not found!"

Re: Rounded boxes

I've installed it back onto the site, If you want to take a look.

Re: Rounded boxes

Unfortunately I can't see it in FF or IE. The only time I can see the text overflowing outside of the element is on your cart page where it is still in quirks mode from the <script> tag being outside of the doctype.

Is there a specific page where it breaks?

Re: Rounded boxes

Its strange as it now seems to be ok.

Yesterday I had the ultimate mini cart installed, which seems to have cured the problem.

I have a problem at the moment where I cant log into my shop in internet explorer. it takes the password for user and admin but dosnt progress passed that. Firefox works fine.

The only box that now expands to big for the column is the auth box.

Another problem I now see is using the advanced mini cart. When adding products to the cart the top 3 boxes move down but best sellers and blow dosnt so they all overlap.

I've addmitted defeat for the time being on the rounded box and reverted to the original.

I need to get the script tag back inside the head some how. Any ideas ?

Re: Rounded boxes

No ideas where that tag could be - where did it come from? was it from a module you installed?

If you could search through your site using a program it should be easy enough. For instance, download the site and make a local site within Dreamweaver... search for the script that way.

Also your advanced minicart works well but I couldn't make it update any quantities - this happened in the cart page too... which appears to be separate from the mod.

Re: Rounded boxes

Think I've sorted the tag.

I was using Ajax username checker. I've removed the code from cart.php and auth.php which seem to have fixed that problem.

Not sure why that caused a problem as the install.txt was....

2) In register.php and cart.php ...
After...
require "./auth.php"
Add...
require "./username_check.php";

Once I removed that, it seemed ok.

I'll check the update quantities.

Re: Rounded boxes

I think the quantities is ok.

Try using a product such as the musical travel swing.

Its possible that the item you were testing with was the only one in stock.

Re: Rounded boxes

Nice work!

Cart works and script gawn ;D