How to adjust column width in artisteer-30verticalmenu2 ?

4/19/2011 10:20:48 AM

di0077

Total Posts 7

View Posts

How to adjust column width in artisteer-30verticalmenu2 ?

Having a problem adjusting the column width on this skin.

Adjusted the color of the leftside column by changing this css, but the width is not affected when I change vary the width properties.

art-content-layout .art-sidebar1
{
background-color: #346179;
width: 25%;
}

Thanks,

Dianne

4/19/2011 10:37:32 AM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How to adjust column width in artisteer-30verticalmenu2 ?

I just tried this and had no problem changing the width. It may be the caching on the server that's preventing you from seeing the changes. The skinning overview document will show you how to disable the caching with keys in user.config. Be sure to change them back when you are running live.

Hope that helps,

Jamie

4/19/2011 2:08:55 PM

di0077

Total Posts 7

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Hi Jamie,

Thanks for the speedy reply!

I fear that because I have been editing other portions of the skin, the ability to change the column widths is not working...

I had to move the menu from the top of the header to below the header art, also I changed the width of the horizontal menu items. Do you think that may have overidden the css of the column widths?

Thanks again,

Dianne

4/19/2011 3:07:18 PM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Well, the only thing I can think of that might prevent your proposed change from altering the column width is if there is CSS farther down that overrides the change you are making. Did you use Firebug to identify this spot to make the change? With Firebug, you can also model your changes on the fly and see if they will do what you want.

You can also temporarily switch back to the delivered version of that skin, make your change, and verify that the width changed. That would definitely rule in or out your changes as the culprit.

Jamie

4/20/2011 7:24:01 AM

Joe Audette

Total Posts 18439

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

When modifying Artisteer skins it is best to not touch the css exported by Artisteer in the style.css file. You can override things in the style-artisteer-overrides.css and other css files instead. This makes it easier to undo changes that don't workout as expected and makes it possible to edit the design and re-export the design from Artisteer without losing anything from your overrides.

I don't include the Artisteer .artx files with the skin mainly because of the size it would add to the package download, but I'm thinking of making them available in a separate download. This way users who have Artisteer could edit the designs using Artisteer.

Best,

Joe

4/20/2011 12:18:46 PM

di0077

Total Posts 7

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Again thanks sooo much for trying to help me out! I will totally buy you several beers if we can figure this out!

I think I found where the problem is originating from, but not sure how to correct it... I neglected to tell you, lol that I had also changed the layout.master. I added a content pane above and one below the three regular columns. I noticed that when I removed the content above and below I could then adjust the left, center and right columns.

How would you have added the top pane and bottom pane in this particular skin (artisteer-30verticalmenu2) This is how I changed the code for the layout.master

      <asp:Panel ID="divLeft" runat="server" CssClass="art-layout-cell art-sidebar1 leftside" Visible="True" SkinID="pnlPlain">
      <portal:PageMenu id="PageMenu1" runat="server" StartingNodeOffset="2" DynamicDisplayLevels="1" UseTreeView="true" IsSubMenu="true" TreeViewShowExpandCollapse="false"   />
       <asp:ContentPlaceHolder ID="leftContent" runat="server">
       </asp:ContentPlaceHolder>
      </asp:Panel>

      <asp:Panel ID="divCenter" runat="server" Visible="True" CssClass="center-rightandleftmargins"
       SkinID="pnlPlain">
       <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
       <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
       <a id="startcontent"></a>
       <asp:ContentPlaceHolder ID="mainContent" runat="server">
       </asp:ContentPlaceHolder>
      </asp:Panel>

      <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="art-layout-cell art-sidebar2 rightside" SkinID="pnlPlain">
       <asp:ContentPlaceHolder ID="rightContent" runat="server">
       </asp:ContentPlaceHolder>
      </asp:Panel>
        </div>

    <div class="art-content-layout-row">
    <asp:Panel ID="divAltContent2" runat="server" CssClass="altcontent2">
       <asp:ContentPlaceHolder ID="altContent2" runat="server"></asp:ContentPlaceHolder>
      </asp:Panel>
    </div>
</div>

Thanking you in advance! Dianne

4/20/2011 12:39:59 PM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Actually, I'm not sure if mojoPortal is set up to be able to use the alternate content panes in Artisteer-derived skins. I know you can't create those alternate content panes when designing with Artisteer (it's just menu, header, columns, footer), so you're kind of in uncharted waters on this one. To complicate things, there is also a lot of "behind the scenes" markup being emitted by mojoPortal for Artisteer, so Joe can probably comment better on this one than I can.

Jamie

4/20/2011 12:45:40 PM

di0077

Total Posts 7

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Leave it up to me to go into uncharted waters! lol

4/20/2011 1:13:52 PM

Joe Audette

Total Posts 18439

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

The Artisteer designs don't expect these extra content regions and don't have any style for them, so it will most likely require some additional custom CSS in other CSS files (I would not touch style.css)

I don't have an easy magic answer for it, I would try different things to see what happens. First I would try removing the extra <div class="art-content-layout-row"> that you are wrapping around the alternate panels as I don't think that is going to help.

If they don't work well inside the <div class="art-content-layout">, then I would try moving them above and below that div

Hope it helps,

Joe

4/21/2011 10:42:42 AM

di0077

Total Posts 7

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Hi

Thank you so much for your help with this!

I adjusted the layout master and I now have a top pane, a bottom pane and three columns that are adjustable!

The next hurdle for this website layout is the following:

Is it possible to make the three columns adjust to different widths on different pages? For example the home page has a top pane, and three columns below. These three columns are a different size on the landing pages. Is it possible to set the width of the columns a different size on two pages?

Thanks again!

Dianne

4/21/2011 11:02:56 AM

Joe Audette

Total Posts 18439

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Hi Dianne,

Thanks for the beers! Much appreciated.

I actually wrote a new document just a few days ago about How To Make a Side Column Wider on Some Pages.

Hope it helps,

Joe

4/27/2011 10:28:08 AM

di0077

Total Posts 7

View Posts

Re: How to adjust column width in artisteer-30verticalmenu2 ?

Thanks Joe! I have adjusted the columns to be different sizes on different pages!

Now I need to redesign the survey tool to a specific look for the client. I see some of the css while I am in firebug but not sure how to get at all of it.

I need to move the form labels and align things differently on the page. Is this possible and if so where would you suggest I start.

Thanks again,

Dianne