Can't get rounded corners

[semper-linux]

Hi Forum,

 

Using OSC v2.3.1. - Site :- www.naturally-orkney.com

 

 

I would like rounded corners on the boxes so I modded .../boxes/bm_whats_new.php to try out round corners on the "What's new" box.

 

No round corners - original square box.

 

I've got rounded corners on my homepage on another site using this method and it works OK. I do have featured products installed on this (second) site but can't see why that should make a difference.

 

 

Any help greatly appreciated.

 

semper-linux

[sky_diver]

They certianly did not keep CSS flexibility in mind when redoing the infoBoxes. I have however created a simple way to override the current classes. Take this snippet and place it at the bottom of your stylesheet.css file:

 

#columnLeft .ui-widget, #columnRight .ui-widget {
margin:3px 0 5px 0;
display: block;
text-shadow: 0 1px 0 #EAEAEA;
padding: 0 0 12px 0;
}
#columnLeft .ui-widget-header, #columnRight .ui-widget-header {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(204,204,204) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(204,204,204))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* IE10+ */
background: linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* W3C */
border: 1px solid #aaa;
padding: 0 10px;
-moz-box-shadow:inset 0 1px 0 #fff;
   -webkit-box-shadow:inset 0 1px 0 #fff;
   box-shadow:inset 0 1px 0 #fff;
   -moz-border-radius-topleft: 6px;
   -moz-border-radius-topright: 6px;
   -webkit-border-top-left-radius: 6px;
   -webkit-border-top-right-radius: 6px;
   -khtml-border-top-left-radius: 6px;
   -khtml-border-top-right-radius: 6px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
}
#columnLeft .ui-widget-content, #columnRight .ui-widget-content {
background: #fafafa;
   padding: 10px;
border-top:none;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   -webkit-border-bottom-left-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
   -khtml-border-bottom-left-radius: 6px;
   -khtml-border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
}
#columnLeft .infoBoxHeading, #columnRight .infoBoxHeading {
height:22px;
color: #444;
padding:6px 0 0 6px;
font-size:14px;
}

 

You can modify it from there. Try not to tell anyone, there are many here that would rather this information remain locked in a vault at bottom of the Atlantic surrounded by blood-thirsty sharks. Information that lets you style your shop just should not be let go without sponsorship.

 

Please Note * Renders well in FF, Opera, Safari, Chrome, and IE9+, any IE under 9 will show squared corners. But the overall look is still present.

[♥toyicebear]

Or just go to jqueri ui's themeroller and make a new theme to use... you can change colors, backgrounds, textures and add curved corners ++++

[multimixer]

Or just take a look here about how to add rounded corners with a single line

 

Other option, if you want some special styles only for boxes in the columns and not for the complete store, then create a new ui theme with themeroller, but set a css "scope" to it, in this case eg #columnLeft, so any rules will be applied only to left column

 

@sky_diver: come on ....

[semper-linux]

Hi Forum,

 

I got this working and have made a little 'How to' for anyone that's interested.

 

PART 1 - How to round the box corners.

 

Open :- catalog/includes/modules/boxes/"box_name".php - replace "box_name" with the name of the box you wish to change.

 

Find this code

 

' <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_INFORMATION_BOX_TITLE . '</div>' .

' <div class="ui-widget-content infoBoxContents">' .

 

add in 'ui-corner-top' and 'ui-corner-bottom' to give......

 

' <div class="ui-widget-header ui-corner-top infoBoxHeading">' . MODULE_BOXES_INFORMATION_BOX_TITLE . '</div>' .

' <div class="ui-widget-content ui-corner-bottom infoBoxContents">' .

 

The mod is similar for all the boxes.

 

 

 

PART 2 - How to round the corners on the Breadcrumb bar.

 

Open :- catalog/includes/header.php

 

Find :-

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header infoBoxHeading"><?php echo ' ' . $breadcrumb->trail(' » '); ?></div>

</div>

 

add in 'ui-corner-top ui corner-bottom' to give.........

 

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header ui-corner-top ui-corner-bottom infoBoxHeading"><?php echo ' ' . $breadcrumb->trail(' » '); ?></div>

</div>

 

 

 

Part 3 - How change the box header colours

 

Open :- catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

 

Find :-

.ui-widget-content { border: 1px solid #XXXXXX; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }

.ui-widget-content a { color: #222222; }

.ui-widget-header { border: 1px solid #XXXXXX; background: #XXXXXX; url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

.ui-widget-header a { color: #ffffff; }

 

(Note :- the XXXXXX values will be actual hex values in your code)

 

Change the 3 colours given as #XXXXXX to any HTML colour code value you wish

The first colour is for the Content box border.

The second colour is for the Header box border.

The third colour is for the Header box background.

 

******* VERY IMPORTANT *******

Put a semi-colon immediately after the colour code for the Header background (third colour) as above.

If you leave the semi-colon out, the Header background will remain as the original as given in the URL.

 

 

That's about it.

Thanks for the posts.

 

semper-linux