X-Cart forums - CSS Rounded Corners for 4.2.x

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

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

- - CSS Rounded Corners for 4.2.x (https://forum.x-cart.com/showthread.php?t=50753)

CSS Rounded Corners for 4.2.x

Hi all

I have been working on a solution, and have compiled some code that is working well.

Here you go!

Add this to the bottom of skin1/main.css

Code:

.xrounded h1, .zrounded h1 {

margin:0; 

font-size:1.0em; /* Change menu header font size */

padding:0 8px 3px 8px; 

border-bottom:1px solid #464141;

}

.xrounded p, .zrounded p {

margin:0; 

padding:5px 0; 

font-size:10px;

line-height:125%;

}

.xrounded {

background: transparent; 

width:100%;   /* 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 #464141;

border-right:1px solid #464141;

}

.xb1 {

margin:0 5px; 

background:#464141;

}

.xb2 {

margin:0 3px;

border-width:0 2px;

}

.xb3 {

margin:0 2px;

}

.xb4 {

height:2px; 

margin:0 1px;

}

.xboxcontent {

display:block;

border:0 solid #464141; 

border-width:0 1px; 

height:auto;

background:#f8f8f9;

}

.xboxcontent ul {

  list-style: none;   /* This removes the bullets and indent from the ul style */

  padding: 10px 0px 0px 0px;

  margin: 0px;

}

.xboxcontent ul a{

  text-decoration: none;

}

div.xboxcontent div{

padding: 0px 4px 0 8px;

}

.xboxcontentmain {

display:block; 

border:0 solid #464141; 

border-width:0 1px; 

height:auto;

background:#fff;

}

div.xboxcontentmain div{

padding: 10px;

}

* html .xboxcontent {

height:1px;

}

.color_a {

background: #464141; /* Change menu header colour and text colour */

color:#fff;

}

.color_a a{

color:#fff; /* This changes the colour of the Help menu link and removes the underline */

text-decoration: none;

}

Change the code in skin1/menu_dialog.tpl to this:

Code:

<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 $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>

<div class="menu-list content{if $additional_class} {$additional_class}{/if}">{$content}<br /></div>

</div>

<b class="xbottom">

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

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

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

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

</div>

Change the code in skin1/dialog.tpl to this:

Code:

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

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

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

</div>

<b class="xbottom">

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

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

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

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

</div>