Sidebar / Sidebox in Prime theme, how do you do it?

[DeDanan]

Hi All,

I am looking to information sidebars / sidebox to the left hand side of the prime theme.
I contacted actinic help desk and they were unable to tell me how to turn them on.

I read elsewhere in the forum: I'm using the Smart Theme. How can I add extra boxes in my sidebars? But I can not see how to turn on the side bar function. And the guy at the help desk can’t tell me either so I hope some of you can point me in the right direction.

I do not wish to show “related products” or “also bought” just some information a picture and a link to a new page.

Regards,

DeDanan.

[Bruce King]

Hi,

You can use something like this...

Look for <div id="prime-right-bar">

Then add the following within that area..

<div class="sidebox">
<div class="boxhead"> Box Header Here</div>
<div class="boxbody">
Box text content here
</div>
</div>

If you want to have something similar to the smart theme then create a layout with this code. Please note that the code provided below already exists as layouts in the Library under 'Custom Sidebar Boxes'.

For Left side box

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22LEFTBARTEXT%22%20%2f%3e%20%21%3d%20%22%22%29%20OR%20%28%3cactinic%3avariable%20name%3d%22LEFTBARTITLE%22%20%2f%3e%20%21%3d%20%22%22%29" >
<table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
      <td valign="top" width="10%" bgcolor="<actinic:variable name="Palette2" />"><img src="theme_tab2_left.gif" /></td>
      <td bgcolor="<actinic:variable name="Palette2" />" width="80%" height="20"><span class="boxheading"><actinic:variable name="LEFTBARTITLE" /></span></td>
      <td valign="top" width="10%" align="right" bgcolor="<actinic:variable name="Palette2" />"><img src="theme_tab2_right.gif" /></td>
   </tr>
   <tr>
      <td colspan="3" class="thinborder2" style="padding: 3px;">
         <actinic:variable name="LEFTBARTEXT" />
      </td>
   </tr>
</table>
</actinic:block>

and this for right sidebox:

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22RIGHTBARTEXT%22%20%2f%3e%20%21%3d%20%22%22%29%20OR%20%28%3cactinic%3avariable%20name%3d%22RIGHTBARTITLE%22%20%2f%3e%20%21%3d%20%22%22%29">
	<table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
      <td valign="top" width="8%" bgcolor="<actinic:variable name="Palette2" />"><img src="theme_tab2_left.gif" /></td>
      <td bgcolor="<actinic:variable name="Palette2" />" width="84%" height="20"><span class="boxheading"><actinic:variable name="RIGHTBARTITLE" /></span></td>
      <td valign="top" width="8%" align="right" bgcolor="<actinic:variable name="Palette2" />"><img src="theme_tab2_right.gif" /></td>
   </tr>
   <tr>
      <td colspan="3" class="thinborder2" style="padding: 3px;">
         <actinic:variable name="RIGHTBARTEXT" />
      </td>
   </tr>
</table>
</actinic:block>

You can then use 'Settings | Site Options | General' to input the values for these boxes. You will also have to insert the layout selector in the appropriate places in the left and right sidebar.

You can create additional boxes by doing the following...

1) Go to 'Library | Variables' and expand 'Site' by clicking on the +
2) Make copies of the following variables
a) LEFTBARTEXT
b) LEFTBARTITLE
c) RIGHTBARTEXT
d) RIGHTBARTITLE
... and name them appropriately ( these will then appear in 'Settings | Site Options | General' )
3) Make new layouts using the code provided above or by copying the existing layouts in the library and renaming them to suite your requirement.
4) Edit the layout and substitute the variables mentioned in point 2 with the new ones you have created so that the values you enter against them in 'Settings | Site Options | General' appear in the correct places

Hope that helps

Kind regards,

[DeDanan]

Hi Bruce,
Thank you for your reply.
Before I tried your suggestion I had a look at my 'Settings | Site Options | General' section and it had the boxes “Heading for right box” and “Text for right box” already and I thought great... but when I entered test text in them nothing happens!
It looks like the code is already there but I am not sure. Do I still have to add a new layout as you describe? Or is there some way to “turn on “the ones I have?
Regards
DeDanan

[Darren B]

You can then use 'Settings | Site Options | General' to input the values for these boxes. You will also have to insert the layout selector in the appropriate places in the left and right sidebar.

The boxes under settings are in Actinic, some sites use it some dont, if you want to use them then you need to follow Bruces instructions, to create the boxes you require. Then the text you enter in these boxes will appear on your pages

[DeDanan]

Thank you Darren,

I have tried the two suggested
The first way inserts the box at the bottom under the footer I have uploaded it.

I would prefer to get the second way working but I can not find where to insert the layout . I created the layout in Design, Library, Layouts, Page areas.

When I am in the design area I can not see any right area to edit. And if I right click and select insert layout I can not find the layout in the layout selectors dialogue box.
the code from the page is attached
Any suggestions?

[DeDanan]

the web site is http://www.sto-it.ie/index.html
thanks

[Bruce King]

Jim,

What have you named the layout's ??

Regards,

[Bruce King]

Try this code, I have inserted the layout selectors into the code you provided. It completely slipped my mind that the layouts are already there and only need to be inserted. The instructions on creating the layouts however was for anyone searching for relevant information.

The selectors are in the library under 'Custom Sidebar Boxes' .

I have also edited the post above to reflect this and a few other amendments.

Kind regards,

[DeDanan]

Hi Bruce,
It will be a little later today before I can try your solution.
Thanks again,
Regards
Jim

[DeDanan]

Still no joy
There must be a fault in my version somewhere. Again I have tried both methods,
1. Cut and pasted the modified code (codeActinic.txt)
and
2. 1) Go to 'Library | Variables' and expand 'Site' by clicking on the +
2) Make copies of the following variables
a) LEFTBARTEXT
b) LEFTBARTITLE
c) RIGHTBARTEXT
d) RIGHTBARTITLE
... and name them appropriately ( these will then appear in 'Settings | Site Options | General' )
3) Make new layouts using the code provided above or by copying the existing layouts in the library and renaming them to suite your requirement.
4) Edit the layout and substitute the variables mentioned in point 2 with the new ones you have created so that the values you enter against them in 'Settings | Site Options | General' appear in the correct places
In both cases I get the same result the box gets placed in the bottom left corner of the page under the footer http://www.sto-it.ie/
I have tried to find a place in the code to place the variable that will put the box in the right hand side under the header but no luck.
How do I place the variable so that it will appear in the right location?

Jim

[DeDanan]

UPDATE
I have now got it in the right location. For some reason the “<div id="prime-right-bar">” was below the footer... now it is moved and the location works.

Only problem I have now is the colour of the text in the box title does not match the site colour! But I am getting there.


Thanks again for your help.

[DeDanan]

Done, (for now)
Below I have added the code I used to get a sidebox working with the prime theme.
I entered the code in design mode to the “content page” this code has an image, a link and text of a different colour. So I hope it may be useful to someone.

For those of you good at code if you see ways to improve this code please do so as I am a novice at it.

Regards,

Jim

<!-- Side Box Easy Pay BEGIN -->
<div class="sidebox"><div class="boxhead"><h2><span style="color:#cc0000">Easy Pay</span></h2></div>
<div class="boxbody">	<a href="http://www.sto-it.ie/acatalog/Sto-It_Finance.html"><h2 align="center"><img src="easypayman.jpg" border="0"></h2></a>
<a href="http://www.sto-it.ie/acatalog/Sto-It_Finance.html"><h2 align="center">Application</h2></a> 

You can spread the cost with our easy pay finance option. <br /><br />Applying for Finance Online is Quick and Easy. 

</div></div><br /><br />
<!-- Side Box Easy Pay END -->

P.S. Obviously you will substitute my text and images for your own.

[jont]

Jim,

just a couple of suggestions to your code:

1. add the alt="description" to the <img>

2. don't use inline styles - dump them into a .class in actinic.css so if you change your mind you are only having to upload the 1 file (actinic.css) and not every page on your site eg:

<h2><span style="color:#cc0000"> to

<h2 class="boxHeading">

.boxHeading {
color: #cc0000;
}