Rounded box corners in V2.3.1

[Guest]

Hi, does anyone know how to get rounded corners on the boxes? In version 2.2a it came as default but I can't work out how to do it in this version - the simplest things are stumping me becuase of the added 960 grid and redmond theme...any help would be appreciated.

 

thanks :)

[PupStar]

Hi, does anyone know how to get rounded corners on the boxes? In version 2.2a it came as default but I can't work out how to do it in this version - the simplest things are stumping me becuase of the added 960 grid and redmond theme...any help would be appreciated.

 

thanks :)

 

This example is relevant to catalog/includes/modules/boxes/bm_information.php

 

Find this code

 

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

 

and change it to

 

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

 

Obviously pick the relevant lines in all the other boxes.

 

Mark

[Guest]

This example is relevant to catalog/includes/modules/boxes/bm_information.php

 

Find this code

 

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

 

and change it to

 

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

 

Obviously pick the relevant lines in all the other boxes.

 

Mark

 

Thanks very much for your quick reply! :D I'll give that a go. Do you know where the relevant images are in the files? - I can only find 'corner-left' and 'corner-right' in the images directory, and none in the Redmond directory. I'm changing the colour scheme of osc so would need to re-colour any corner images.

 

Thanks very much:)

[ErikMM]

This example is relevant to catalog/includes/modules/boxes/bm_information.php

 

Find this code

 

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

 

and change it to

 

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

 

Obviously pick the relevant lines in all the other boxes.

 

Mark

 

The code above works if you still have a header...or the box continues around the title of the box.

 

If you eliminated the header portion of the box (i.e removed the box/line that wraps around the box title) as I have then the following needs to be done:

 

one line to change

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

modify like so:

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

and as said above "Obviously pick the relevant lines in all the other boxes."

[ErikMM]

Thanks very much for your quick reply! :D I'll give that a go. Do you know where the relevant images are in the files? - I can only find 'corner-left' and 'corner-right' in the images directory, and none in the Redmond directory. I'm changing the colour scheme of osc so would need to re-colour any corner images.

 

Thanks very much:)

I don't believe they are images...so they should change to whatever the rest of the box line color is.

 

To modify box colors you can go to: catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

 

I think there is a way to do it in catalog/stylesheet as well, but I used Redmond. It may be better to avoid Redmond changes. However, being that I did not make my changes there I can only speak of how I did it in the Redmond stylesheet.

 

In catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css, the changes to the border are made here:

.ui-widget-content {border: 1px dashed #3F9E41;} This makes a green dashed box border on ALL boxes throughout the site.

 

I'm sure there is a way to make different boxes different colors, but I have not wanted to do that so...

[ErikMM]

The code above works if you still have a header...or the box continues around the title of the box.

 

If you eliminated the header portion of the box (i.e removed the box/line that wraps around the box title) as I have then the following needs to be done:

 

one line to change

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

modify like so:

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

and as said above "Obviously pick the relevant lines in all the other boxes."

the "cart" box is a little different

 

cat/includes/mod/boxes/bm_shopping_cart

 

if you eliminated the line around the header as I did then the change is made like so:

} else {
       $cart_contents_string .= '<div class="ui-widget-content ui-corner-top ui-corner-bottom infoBoxContents">' . MODULE_BOXES_SHOPPING_CART_BOX_CART_EMPTY . '</div>';
     }

 

If you still have the line around the header title then I imagine the "ui-corner-top" will go to/after the header line here:

$data = '<div class="ui-widget infoBoxContainer">' .
             '  <div class="ui-widget-header infoBoxHeading"><a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . MODULE_BOXES_SHOPPING_CART_BOX_TITLE . '</a></div>' .
             '  ' . $cart_contents_string .
             '</div>';

[ErikMM]

How is the change to the product listing box done in 2.3.1?

 

go to catalog/includes/modules/product_listing.php

 

find:

$prod_list_contents = '<div class="ui-widget infoBoxContainer">' .
                       '  <div class="ui-widget-header ui-corner-top infoBoxHeading">' .

It ALREADY has a rounded top...unless you eliminated the box around the header title like I did. If so, then find this (already corrected to have rounded top and bottom):

$prod_list_contents .= '  <div class="ui-widget-content ui-corner-top ui-corner-bottom productListTable">' .

[Guest]

Thanks very much ErikMM for your reply and the additional information :) I appreciate you taking the time to post your 'How to' with V2.3.1 which I have to finish reading soon.

 

So far I've been able to work out remove the glossy box header background and change the background colour of the info boxes by commenting out some lines in the jquery-ui-1.8.6.css file . I've yet to try the rounded corners advice , I'll try that later in the week, along with other stuff like trying to figure out if I can add another div for some links under the header navigation and how to put some white space between the info boxes in the columns - was easy using V2.2 and CSS. It just seems so much harder to customize the site using V2.3.1...

[♥toyicebear]

The easy way to change, buttons, header line/links and boxes is to go to: http://jqueryui.com/themeroller/

 

There you can eighter download a pre-made theme or create one yourself and download it.

 

Add the new theme folder into: /ext/jquery/ui

 

Then change the stylesheet info to the new theme in this file: includes/template_top.php

[ErikMM]

Thanks very much ErikMM for your reply and the additional information :) I appreciate you taking the time to post your 'How to' with V2.3.1 which I have to finish reading soon.

 

So far I've been able to work out remove the glossy box header background and change the background colour of the info boxes by commenting out some lines in the jquery-ui-1.8.6.css file . I've yet to try the rounded corners advice , I'll try that later in the week, along with other stuff like trying to figure out if I can add another div for some links under the header navigation and how to put some white space between the info boxes in the columns - was easy using V2.2 and CSS. It just seems so much harder to customize the site using V2.3.1...

It's actually easier with CSS, in my opinion. As the post above says, try "themeroller" if you want, but I don't know that it will do "EVERYTHING" you want. There were some things or looks I wanted that it would not do for me so I opted to do it myself. Realize that Themeroller will take away any jquery changes you make (if you made changes to jquery), that's why I recommended catalog/stylesheet CSS changes instead...however, that's me saying don't do as I do. I've made changes in both stylesheets. I've kept track of what, how, and where for 99% of them.

 

more themroller help: #9 here: http://www.oscommerce.com/forums/topic/368458-231-a-how-to-road-mapno-questions-just-how-tos-please/page__view__findpost__p__1552434

 

and this as well: http://www.oscommerce.com/forums/topic/368458-231-a-how-to-road-mapno-questions-just-how-tos-please/page__view__findpost__p__1558399

[Guest]

How is the change to the product listing box done in 2.3.1?

 

go to catalog/includes/modules/product_listing.php

 

find:

$prod_list_contents = '<div class="ui-widget infoBoxContainer">' .
                       '  <div class="ui-widget-header ui-corner-top infoBoxHeading">' .

It ALREADY has a rounded top...unless you eliminated the box around the header title like I did. If so, then find this (already corrected to have rounded top and bottom):

$prod_list_contents .= '  <div class="ui-widget-content ui-corner-top ui-corner-bottom productListTable">' .

 

I tried these suggestions and nothing happened - no rounded corners.I don't quite understand how it would without having using images for the corners (like you do in V2.2).I know that CSS3 can do rounded corners or something. But anyway, still would like to know how to get rounded corners - I tried it on the categories box, and I'm not using any kind of image for the header background, just colour from the stylesheet.css. Any help would be appreciated. I assumed there would be some rounded corner .gifs or something but can't find them.

[ErikMM]

I tried these suggestions and nothing happened - no rounded corners.I don't quite understand how it would without having using images for the corners (like you do in V2.2).I know that CSS3 can do rounded corners or something. But anyway, still would like to know how to get rounded corners - I tried it on the categories box, and I'm not using any kind of image for the header background, just colour from the stylesheet.css. Any help would be appreciated. I assumed there would be some rounded corner .gifs or something but can't find them.

The images don't exist.

 

I made the changes and it worked. Posted the exact code I used. Try refreshing your pages etc.

 

Are you using a template by chance?

 

Oh, the quote you used in the post above this one is to change the product listing box, not categories box. If you want to change the category box then see this by pupstar: http://www.oscommerce.com/forums/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564286

 

This is a very simple and straight forward fix/change as no images are required, just a minor code change/addition. I changed all my boxes in minutes.

[Guest]

The images don't exist.

 

I made the changes and it worked. Posted the exact code I used. Try refreshing your pages etc.

 

Are you using a template by chance?

 

Oh, the quote you used in the post above this one is to change the product listing box, not categories box. If you want to change the category box then see this by pupstar: http://www.oscommerce.com/forums/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564286

 

This is a very simple and straight forward fix/change as no images are required, just a minor code change/addition. I changed all my boxes in minutes.

 

I didn't make my previous post very clear - I had indeed done pupstar suggested in his post editing the bm_categories.php and had refreshed, and am not using a template. Just background colour in the header in the stylesheet.css - I've just tried it again but it just isn't working. There is only one place in the script which has 'div's so I added it there, so here's the code as I tried:

 

$data = '<div class="ui-widget infoBoxContainer">' .
             '  <div class="ui-widget-header ui-corner-top infoBoxHeading">' . MODULE_BOXES_CATEGORIES_BOX_TITLE . '</div>' .
             '  <div class="ui-widget-content ui-corner-bottom infoBoxContents">' . $categories_string . '</div>' .
             '</div>

 

If it has worked for you , I don't get why it's not working if it's just a simiple code change. Could there be some other factor (can't think what though)? Very puzzling.

[Guest]

Well I finally figured out what that 'factor' was so I thought I'd post my results in case it helps anyone else in the future. I had commented out parts of the jquery-ui-1.8.6.css which stopped the rounded corners showing. It was a case of trial and error to see what lines of script had what effect.

 

I changed the following lines to enable the round corners to show using custom colors and colours assigned in stylesheet.css (and the addition of the ui-corner-top etc. as posted above), it seems to work okay. The changed portions of script are as follows:

 

Under Component Containers

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

 

.ui-widget-header { border: 1px solid #baa2d0 ; background: #cc99f0 /*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;*/ }

 

Under Interaction States

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {/* border: 1px solid #c5dbec; /*background: #dfeffc*/ url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #2e6e9e;*/ }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { /*border: 1px solid #79b7e7;*/ background: #f5f8f9 /*url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #e17009; */}

 

Thanks to everyone who replied to my original post with help:)

[Franalo]

Hi ErikMM. I've tried what you suggested about rounding the chart box, but nothing happens. It worked with the other boxes but "What's New" and "Shopping Cart" don't change. I haven't eliminated the line around the header, and i'm a litle lost. I'd apreciate some help here.

 

Thank you very much for your time and your work!!!

[ErikMM]

Hi ErikMM. I've tried what you suggested about rounding the chart box, but nothing happens. It worked with the other boxes but "What's New" and "Shopping Cart" don't change. I haven't eliminated the line around the header, and i'm a litle lost. I'd apreciate some help here.

 

Thank you very much for your time and your work!!!

I imagine you will have to go to right files to make the changes: catalog/includes/modules/boxes/bm_whats_new.php and bm_shopping_cart.php etc.