Increasing width of sidebar component?

Question

I am working on customer portal.

I have created Narrow (left) Home page component. I want to increase it's width.

How can i do this.?

Answer 1

1. create an HTML file and insert it into your org as a Document:

   <style>
     table#bodyTable td#sidebarCell {
       width:400px; /* override the default sidebar width of 200px */
     }
   
     table#bodyTable td#sidebarCell div.sidebar {
       width:auto; /* allow narrow components to occupy the newly available space */
     }
   </style>
   

2. go to Setup > Customize > Customer Portal > Settings

3. under Look and Feel > Header, select your document :-)

The chained #id selectors may appear superfluous at first. They are necessary to increase the specificity of the selector, so that your rule overrides the built in styles. Avoid !important.

Answer 2

<iframe src="/apex/Page" allowtransparency="true"  marginwidth="0" marginheight="0" 
    hspace="0" vspace="0"  ="" scroll="No" align="top" frameborder="0" height="180px" 
    width="350px">
</iframe>
<style type="text/css">
  h2 {color:white !important;}
  .sidebarCell {width:250px !important;} 
  #sidebarDiv{width:250px !important;} 
</style>

I implemented this by overriding style of sidebar component.