Left/right side bar panels

[RPavlik]

Hello,

I am a novice AbleCommerce user with limited coding background. After an upgrade to RC3, my left and right sidebar widths changed, squeezing the content. I thought I found where to change the size (below under width) but nothing happens on screen after refresh.

Also, Mozilla shows my site differently than IE. I would think that AbleCommerce would have uniformity among different browsers.

Am I in the right place to resize my sidebars? (store.behavior.org)

Also, for a site with little customization, how much time should be spent on an upgrade?

Thank you!
Rebekah

Where I changed my sidebar widths within Themes Manager:

style.css

/* container for the left sidebar content */
#leftSidebarPanel
{
display: block;
width: 200px;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #EFEFEF;
border: 1px solid #D4D4D4;
}

[jmestep]

That should change the size of the left nav. When you did the upgrade, did you use your existing style.css, or did it get replaced?

[solgraphix]

i have a problem

for some reason i cant widen then RightSideBar layout...i have included some screen shots for you to see, and as you can see in the CSS code, i have the width set to 400px and it still wont budge...so im not sure if i have it in the wrong place or its a bug? hmmm so please let me know THX

[mazhar]

It would be lot more helpful if you provide your website URL here

[solgraphix]

That should change the size of the left nav. When you did the upgrade, did you use your existing style.css, or did it get replaced?

I just started like three days ago, so i dont think it was changed at all....what do you think it could be? should i submit it as a bug?

[solgraphix]

It would be lot more helpful if you provide your website URL here

its available via IP currently - http://216.139.229.138/

[mazhar]

In the CSS locate the following style

Code: Select all

#mainPanel {style.css (line 322)
padding:10px;
width:100%;
}

and disable this width.

Code: Select all

#mainPanel {style.css (line 322)
padding:10px;
/*width:100%;*/
}

[mazhar]

Try to use the FireFox's FireBug plugin for this sort of problems. It will be very helpful for you.

[solgraphix]

In the CSS locate the following style

Code: Select all

#mainPanel {style.css (line 322)
padding:10px;
width:100%;
}

and disable this width.

Code: Select all

#mainPanel {style.css (line 322)
padding:10px;
/*width:100%;*/
}

PERFECT THX that work awesome

[RPavlik]

I wrote the original message about sidebars. I put this project aside & now back. I changed the mainPanel section in css to reflect the last suggestion:

/* container for the main panel content */
#mainPanel
{
padding: 0 4px;
/*width:100%;*/
}

My rightsidebar & leftsidebar widths are either 300 or 400 px.

/* container for the right sidebar content */
#rightSidebarPanel
{
width:300px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #FEF5EE;
border: 1px solid #F99034;

After upgrade AC7 to RC2, the sidebars got resized. My attempts to resize them through css aren't working. Any suggestions?

Thank you!!!

Rebekah

[mazhar]

I wrote the original message about sidebars. I put this project aside & now back. I changed the mainPanel section in css to reflect the last suggestion:

/* container for the main panel content */
#mainPanel
{
padding: 0 4px;
/*width:100%;*/
}

My rightsidebar & leftsidebar widths are either 300 or 400 px.

/* container for the right sidebar content */
#rightSidebarPanel
{
width:300px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #FEF5EE;
border: 1px solid #F99034;

After upgrade AC7 to RC2, the sidebars got resized. My attempts to resize them through css aren't working. Any suggestions?

Thank you!!!

Rebekah

Do you have some online URL to the page, if so please post it here.

[RPavlik]

thank you!

http://store.behavior.org

See "Categories" and "Features" on left/right. They were the correct size before the upgrade.

[mazhar]

Try the following code

Code: Select all

#leftSidebarPanel
{
width:200px; /*Change the width from 300 to 200*/
....
...
...
} 

#mainPanel {style2.css (line 360)
padding:0 4px;
/*width:100%;*/
}

#rightSidebarPanel
{
width:200px;width:200px; /*Change the width from 300 to 200*/
.....
.....
.....
}

[RPavlik]

I finally discovered I am most likely in the wrong file to make the width changes to css.

I am using Tiger Lilly Themes in my AC store.

I have changed the style.css files under the following paths: App_Themes/TigerLilly and App_Themes/AbleCommerce_RC3_version.

Where else should I change widths and disable mainPanel width???

store.behavior.org

[mazhar]

If you are using TigerLilly then you just need to change the style.css file under App_Themes/TigerLilly/

[RPavlik]

I changed the file within App_Themes/Tiger Lilly. I will attach the file as it was changed. I recently made a change to our order form based on code for another problem & it worked, so I believe I am in the correct directory within our server.

So, for the 8th time, at least, I made the changes to sidebar (300 px & 200 px) and disabled with 100% width within MainPanel css options. Due to an IE problem I am working with Mozilla Firefox now as an internet explorer application. I was excited to see my lefthand sidebar was indeed 300 px. HOWEVER, a test on IE came up nil. Same problems all over.

Suggestions? (Again, the URL is http://store.behavior.org)

Thanks! Rebekah