X-Cart forums

[BodyBalance]

Hello everyone. I have what seems like it should be a simple task but I cannot figure it out.

I would like my left navigation bar to be one solid color (not individual sections). Also, I would like it to run the entire length of the page even where there is not text. Finally, I don't want the color to go above my logo on the top.

Can anyone provide me any assistance with this? I placed a background image there but it runs above my logo and that doesn't seem like the best way to do it.

Thanks in advance!

[kube]

Hi BodyBalance,

This lot below is regarding a fresh 4.1.9 install with no modules installed that interfere with the side columns...

For your left column to have the entire length in one colour; in skin1/skin1.css...

locate...
.VertMenuLeftColumn {

and inside it add...
background-color:#FF0000; /* background in red*/

For changing the colour of the individual menu boxes; add this separately in skin1/skin1.css ...
.VertMenuRightColumn TD.VertMenuBox, .VertMenuLeftColumn TD.VertMenuBox {
background-color:#00FF00; /* background in green */
}

Or similarly, depending on your usage of the individual menus boxes, a simpler way...
Locate VertMenuBox and add the background-color property there...
.VertMenuBox {
background-color:#00FF00; /* background in green */
}

For background images use the css background-image property (here I am using the logo as an example)...
.VertMenuBox {
BACKGROUND-IMAGE: url(images/xlogo.gif);
}

For more info regarding the background image property read up here...
http://www.w3schools.com/css/css_background.asp

Hope this helps & remember to back up ;D
Doms

[BodyBalance]

Thanks for the quick reply Doms. That worked great.

There is still one slight problem with it though. On the top; there is a gap between the left navigation and the search bar. Also, on the bottom there is a very very small gap (probably 1px) between the navigation and footer.

I have tried looking through all of the files to find what is causing these gaps but I can't seem to locate it. Would you happen to know what it is?

Thanks

[kube]

Hi BodyBalance,

For the top gap, which is a little difficult as there a few things that can affect that area but hopefully this should do the trick, get your skin1/head.tpl and locate...

{if $main ne "fast_lane_checkout"}
<tr>
	<td colspan="2" valign="middle" height="32">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>

and {* comment out *} the attributes valign="middle" & height="32" from the outer lying TD like so...

{if $main ne "fast_lane_checkout"}
<tr>
	<td colspan="2"{*** this is commented out ---> valign="middle" height="32"***}>
<table cellspacing="0" cellpadding="0" width="100%">
<tr>

then inside skin1/skin1.css find the class .PrintableRow and make a couple changes like so...

.PrintableRow {
	WIDTH: 100%;
	VERTICAL-ALIGN: middle;
	PADDING-RIGHT: 186px;
	HEIGHT: 32px; /* <--- change this to 32px */
	background-color:#00FF00; /* <--- and add this (colour green)*/
}

For the bottom gap locate skin1/rectangle_bottom.tpl and {* comment out *} the part which contains the ELSE statement with the IMG tag, like below...

{if $active_modules.Users_online ne ""}
<tr>
	<td>{include file="modules/Users_online/menu_users_online.tpl"}</td>
</tr>
{*** {else} <--- notice the comment begins before the else statement.
<tr>
	<td><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" />111</td>
</tr> ending comment after ending TR tag --> ***}
{/if}

Hope this helps.
Doms

[BodyBalance]

Thanks for the help Kube. That fixed my bottom gap but unfortunately my top gap is still there. Any other suggestions?

::EDIT:: I just realized that it does fill in the printable bar on some pages, but not all. However it fills the entire bar and not just the left side. Also there is a slight gap on the left side.

[BodyBalance]

I decided against making the top line match the side bar. I would like to keep that white. However there seems to be a double gap there now. I have the search bar commented out because I will not be needing that so all I have is the language selection up there. There is a 2 line gap up there now though.

[kube]

We might need to see some source or a link, as there could be a number of things that affect that area.

Does the gap still appear even with valign="middle" & height="32" removed? Or did you put it back?

[BodyBalance]

I just tried removing those 2 things you just mentioned but it didn't make a difference. The link to the website is www.bodybalancesystemonline.com/xcart

Which codes would you like me to post?

[kube]

hmm okay...

in skin1/head.tpl try {* commenting out *} the second instance of this code within it (at present there should be two of them)...

<tr> 
	<td colspan="2" class="HeadThinLine"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td>
</tr>

The second instance should be right above this line...

{******** Remove this line to display how much products there are online ****

then locate the IF/ELSE statement that contains the HeadTopPad and PrintableRow classes and {* comment it out *}...

{if $main ne "fast_lane_checkout"}
<tr>
	<td colspan="2" valign="middle" height="32">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
	<td class="HeadTopPad"><img src="{$ImagesDir}/spacer.gif" alt="" /></td>
{if (($main eq 'catalog' && $cat ne '') || $main eq 'product' || ($main eq 'comparison' && $mode eq 'compare_table') || ($main eq 'choosing' && $smarty.get.mode eq 'choose')) && $config.Appearance.enabled_printable_version eq 'Y'}
	<td class="PrintableRow" align="right">{include file="printable.tpl"}</td>
{/if}
</tr>
</table>
	</td>
</tr>
{else}
{* Fast Lane Checkout page *}
<tr>
	<td colspan="2" class="FLCTopPad"><img src="{$ImagesDir}/spacer.gif" alt="" /></td>
</tr>
{/if}

Remember that contains your printable pages, as you know, so record somewhere that you acknowledged its removal.

Tell us how you got on.

Hope this helps.

[BodyBalance]

You are awesome Kube! Thank you so much for your fast assistance. It worked wonderful.