Styling Categories Box OSC 2.3.4

[apmuskel]

Ive been running a shop on an old OSC version.

In that version it was pretty easy to restyle the boxes using this method: http://www.clubosc.com/how-to-make-just-1-infobox-a-different-style.html

 

Now I am setting up a new shop using 2.3.4 and see that I cant make the changes I whant to on the categories box with the same method...

 

I am trying to make the font a bit bigger and the line hight bigger.

 

Any tips on where to look?

[♥Tsimi]

Hi

 

In the osC 2.3.4 the boxes are modules and you can find them inside the catalog/includes/modules/boxes/ folder.

In your case you are looking to change the categories box so open the bm_categories.php file and look for this piece of code

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

Now you have three choices here.

 

1. You change the css definitions for the classes that are already given like infoBoxContainer, infoBoxHeading and infoBoxContents. That would affect all boxes.

2. You add a new css class and add the definitions to your stylesheet.css

3. Same as number 2 but you create a new css file to keep your custom code changes separate from stock osC data.

 

Recommended would be number 3.

 

Create a css file and name it users.css

Then open your catalog/includes/template_top.php file and look for this code

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

add right after it (it is important to add the following code line "below" the code mentioned above!)

<link rel="stylesheet" type="text/css" href="users.css" />

Now back to your bm_categories.php file

 

add a new class to the infoBoxHeading part. For example like this

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

now open your users.css and add (change what ever you like here)

.mynewclass {
 font-size: 18px;
 line-height: 2;
}

[apmuskel]

Thx alot Tsimi!

Great help!

 

A bit more tricky now in 2.3.x I guess for me that isnt to good with php