Stuck on sidebox customization

[Shane78]

Hi...

I need help on how to customize my sideboxes. I know how to completely re-design sideboxes via CSS. But what I am after is making one sidebox look completely different.

I have tried by experimenting with blank sidebox 2.0 but I have failed miserably!
I came across a post saying to add a div tag to the blank sidebox but I have no idea where to start. What file(s) to edit and where and what to edit!

I want to be able to style everything, header text/background, sides, bottom, content etc differently to my main global styles for all sideboxes... but I dont know how. Is there a thread/tutorial/url already covering this somewhere?

At the moment i'd like to crack the blank sidebox mod, eventually by learning how to style this mod be able to style all my sideboxes to look different.

Cheers
Martin

(p.s. im ok with CSS and have already gone thru w3schools tutorials, but when i see files with php mixed in.. it confuses me)

[stevesh]

Ignore the PHP parts of the Blank Sidebox mod and enter your content in the place(s) designated. Wrapping all your content in a <div> with a unique id, and styling that id in the main stylesheet is a good idea. The header, etc. already have id's named.

[Shane78]

I have guessed it is the tpl_blank_sidebox i need to edit (?)

but what do i add and where?

<?php
/**
 * blank sidebox - allows a blank sidebox to be added to your site
 *
 * @package templateSystem
 * @copyright 2007 Kuroi Web Design
  * @copyright Portions Copyright 2003-2007 Zen Cart Development Team
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: blank_sidebox.php 2007-05-26 kuroi $
 */

  $content = '';
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';

  // Replace the text and HTML tags between the apostophes on lines 19 and 20.
  // Use as many or as few lines using this model as you need for your custom content.
  // If you have a multilingual site define your text in the languages/YOUR_LANGUAGE/extra_definitions/blank_sidebox_defines.php and include it as shown in line 19.
  // If your site is monolingual, you can put the text right here as shown on line 20 (and nobody will know!)
  $content .= '<p>' . TEXT_BLANK_SIDEBOX . '</p>';
  $content .= '<p>You can include text, links, images, HTML markup and even PHP code</p>';

  $content .= '</div>';
?>[B][/B]

Yes i need some serious handholding of a ZC / CSS God to help me learn this.

[stevesh]

In blank_sidebox_defines.php:

define('TEXT_BLANK_SIDEBOX', 'Replace this text with your HTML content.');


In tpl_blank_sidebox.php:

// If your site is monolingual, you can put the text right here as shown on line 20 (and nobody will know!)
$content .= '<p>' . TEXT_BLANK_SIDEBOX . '</p>';
$content .= '<p>You can include text, links, images, HTML markup and even PHP code</p>';

[gjh42]

You say you "know how to completely re-design sideboxes via CSS"... redesigning one sidebox works just the same, except you use the individual sidebox id to limit the effects to that sidebox. Say you want to change the look of the categories box - you can style

#categories {}
#categoriesHeading {}
#categoriesContent {}

and any sub-elements of those, in the same way you would style

.leftBoxContainer {}
.sideBoxHeading {}
.sideBoxContent {}

[Shane78]

Hi,

cheers Stevesh, that was my next question, to make sure i was editing text in the corect place, lol

Hi, gjh42, yeah that's what i want to do... Im a graphic designer by trade but the UK recession has forced me to do more than make pretty pictures, so sorry for the stupidly simple question on this topic.

I have worked out how to change the heading section by applying

#blanksideboxHeading {
STYLE STUFF
}

but what i have failed to change is the bottom, sides, background, padding etc of said side box.
I came across a post that said i had to add a DIV id to the code to define the new styles for said sidebox. But it is where to add that DIV and in what files. Everything i have tried hasn't worked so i can only guess im doing it wrong or it is being overridden by the main styles for the sideboxes.

even adding CSS for .sideBoxContent hasnt worked for me and i see that is defined on line 13 in the above posted code.

lol... or have they already been defined and i haven't used my brain properly?

All i want to do is have the sidebox contain a image with no borders, heading, padding etc

[gjh42]

'<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';

This sets an id for the individual sidebox content, replacing any dashes - in the sidebox name with underscores _ .

.sideBoxContent will already be used in your stylesheet, so adding another rule for it will cause either the new rule or the existing rule to be ignored. The last one in the file will control for any properties that are shown in both.