template editing 2.3.1

[Dominator69]

i would like to add corner images on categories and into other boxes

 

$this->tep_show_category($first_element);
  $data = '<div class="">' .
		  '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_CATEGORIES_BOX_TITLE . '</div>' .
		  '  <div class="ui-widget-content infoBoxContents">' . $categories_string . '</div>' .
		  '</div>';
  return $data;

 

i need a little help with the code how to do it? in 2.2 ver it was easier to replace and edit.

also where to edit to separate boxes ?

thanks in advance

[♥toyicebear]

click on basics for 2.3 design below

[Dominator69]

click on basics for 2.3 design below

i couldnt find anything how to edit the boxes

[♥toyicebear]

you can go to theme roller at jqueri ui and make a new theme for your site..this include box "design" you can have curved corners too.... if you want to have different design for different boxes you will have to edit the individual box files

[GregMurr]

i've created a new theme using jQuery and have installed the theme switcher and that is all working fine, however the ui-icon all seem to be missing. triangle-1-e, person, etc. their is a number of ui-icons files in the images folder however it is all the images together on one file and not the individual ones i need. help, thanks.

[multimixer]

The ui icon has nothing to do with the rounded corners. Ui icons are the small symbols within each buttom

 

Rounded corners are not images but generated via css, the relevant classes are eg ui-corner-top or ui-corner-bottom or ui-corner-all etc. They are all defined in the ui css file you have.

 

The boxes in left and reight column are not getting any ui-corner-xx class applied in the markup, so you need to add it. Best way to do this is via jQuery as follows

 

in your file includes/footer.php find

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
</script>

 

replace with

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-top");
</script>

 

As you see, we added a line that will add the class "ui-corner-top to every div in left or right column that has the class "ui-widget-header"

 

This will work unless you have some messy template or changed the html structure your self

[Dominator69]

The ui icon has nothing to do with the rounded corners. Ui icons are the small symbols within each buttom

 

Rounded corners are not images but generated via css, the relevant classes are eg ui-corner-top or ui-corner-bottom or ui-corner-all etc. They are all defined in the ui css file you have.

 

The boxes in left and reight column are not getting any ui-corner-xx class applied in the markup, so you need to add it. Best way to do this is via jQuery as follows

 

in your file includes/footer.php find

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
</script>

 

replace with

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-top");
</script>

 

As you see, we added a line that will add the class "ui-corner-top to every div in left or right column that has the class "ui-widget-header"

 

This will work unless you have some messy template or changed the html structure your self

 

thanks for the tip this is what i added to the footer

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-top");
$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-bottom");
$("#columnLeft div.ui-widget-content, #columnRight div.ui-widget-content").addClass("ui-corner-top");
$("#columnLeft div.ui-widget-content, #columnRight div.ui-widget-content").addClass("ui-corner-bottom");
</script>

 

how i could add the spacer separate boxes from the content? thanks in advance !

[Dominator69]

solved thx to all for help

[semper-linux]

Hi Forum,

 

I actually got it solved and have put together a little 'How to' for anyone wanting to round off corners or change box colours...........

 

 

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 :-

' <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.

[multimixer]

 

I actually got it solved and have put together a little 'How to' for anyone wanting to round off corners or change box colours...........

 

Yes, that is a possible way to do it, if you really want to modify all that files, and remodify them in case you change your mind and want something else. Much easier to do it with a single line

 

Also, be careful when doing changes to the jquery-ui-xxx.css Changes to there will affect any place in your layout. Even in your admin, in case you use the redmnd theme. And, in case you change the theme, you will need to redo all changes.

 

Much better to use the "cascading" nature of css, and add new css rules into your file stylesheet.css, for example:

#columnLeft .ui-widget-header{background:none; background-color:#f00;}

 

This will change the background color of class "ui-widget-header" but only for left column