Bulk Area - Silver Theme V10

[Wizzo]

Hello

Can anyone help, I am trying to get the bulk area on my theme to fit between my 2 sidebars.

At the moment the code is

#silver-bulk {
float: right;
width: 718px;
margin: 10px 10px 10px 0;
background: url('silver-theme-bulk-bg.gif');
display: inline;
}

#silver-bulk-bottom {
background: url('silver-theme-bulk-bottom.gif') no-repeat bottom;
}

#silver-bulk-top {
background: url('silver-theme-bulk-top.gif') no-repeat top;
padding: 10px;

Which is the standard unchanged code.

If I changed my width to anything below 718 I get the whole box broken up and none of the sides meet.

Is this the only place I need to be changing to adjust the table or am I missing something.

Thanks

[cren]

Hi Wizzo,

If you change the widths you will probably also need to change the image widths.

ie:silver-theme-bulk-bg.gif' is fixed at 718 so you could reduce this (and the other images that make up the bulk area) using photoshop or similar. (You could also remove the images from the css file completely and use css3 to make rounded corners/drop shadows etc)

Hope that helps.

[Wizzo]

Thanks Cren

Have removed the offending graphics, think I should have checked those first, D'oh!

Will leave the CSS3 for the moment have only just started looking at so will probably add it in later.

Thanks again

Wizzo

[cren]

Hi Wizzo,

Glad it helped. If you want to play with the css this is what I have done to use rounded corners with a drop-shadow without using images (It will therefore stretch to whatever size is required):

Change for the Product sections side box using css.

Find the following code:

   	<div class="silver-sidebar-list">
		<div class="silver-sidebar-list-bottom">
		<div class="silver-sidebar-list-top" id="silver-section-list">
			<h1>Product Sections</h1>
			<ul>
			<actinic:block type="TopLevelSectionList" ><li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>
			<div style="clear: both;"><img src="theme_shim.gif" height="1" alt="spacer"/></div>
		</div>
		</div>
		</div>

and replaced with this (Make sure to copy & paste the original to a txt file in case you need to revert back)(or do a snapshot):

   	<div id="rounded-corner-box">
			<h1>Product Sections</h1>
			<ul>
			<actinic:block type="TopLevelSectionList" ><li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>
			<div style="clear: both;"><img src="theme_shim.gif" height="1" alt="spacer"/></div>
		</div>

I then added the following to the silver theme css:

	#rounded-corner-box {
	margin:4px 2px 8px;
	padding:2px;
	border: 1px solid #71aa75;
		-moz-border-radius: 5px;
	border-radius: 5px;
		-moz-box-shadow: 2px 2px 2px #999;
		-webkit-box-shadow: 2px 2px 2px #999;
	box-shadow: 2px 2px 2px #999;
}

Then change the styling for the elements inside the box:
(Either find the following code in the silver theme css file)

#rounded-corner-box ul, #silver-brochure-list ul {
	padding: 0;
	margin: 0 1px;
	list-style: none;
   background: url('silver-theme-section-list-gradient.jpg') repeat-x;
	border-top: dotted 1px #858585;
}

#silver-section-list ul li, #silver-brochure-list ul li {
	padding: 0;
	margin: 0;
}

#silver-section-list ul li a, #silver-brochure-list ul li a {
	display: block;
	border-bottom: dotted 1px #858585;
	padding: 5px 11px;
	margin: 0;
	color: <actinic:variable name="TextColor" />;
}

#silver-section-list ul li a:hover, #silver-brochure-list ul li a:hover {
	text-decoration: none;
	color: <actinic:variable name="LinkColor" />;
}

#silver-section-list h1 {
	text-decoration: none;
	color: <actinic:variable name="Palette2" />;
}

and change to:

#rounded-corner-box ul, #silver-brochure-list ul {
	padding: 0;
	margin: 0 1px;
	list-style: none;
   background: url('silver-theme-section-list-gradient.jpg') repeat-x;
	border-top: dotted 1px #858585;
}

#rounded-corner-box ul li, #silver-brochure-list ul li {
	padding: 0;
	margin: 0;
}

#rounded-corner-box ul li a, #silver-brochure-list ul li a {
	display: block;
	border-bottom: dotted 1px #858585;
	padding: 5px 11px;
	margin: 0;
	color: <actinic:variable name="TextColor" />;
}

#rounded-corner-box ul li a:hover, #silver-brochure-list ul li a:hover {
	text-decoration: none;
	color: <actinic:variable name="LinkColor" />;
}

#rounded-corner-box h1 {
	text-decoration: none;
	color: <actinic:variable name="Palette2" />;
}

Or just add the above code to end of the css file to preserve original styles. (ie:dont replace the existing css rules.)

The rounded corners wont work in IE8 and below without using CSSPIE but IE9 should support this.

In IE8 and below you will get the rest of the styling but the corners will simply be square.

Hope it helps.