Can't enclose mainPanel div in another div?

ZLA · Post by **ZLA** » Thu May 14, 2009 2:40 pm

My main panel styling differs between the home page and other pages. But since all pages share common html structures, changing the css for one changes it for all the others. For example, if I specify a class for #mainPanel, it applies to every page which I want in most cases.

But on the home page, I want to override this class. I tried to modify default.aspx and enclose the scriptlet in a div as follows:

Code: Select all

<asp:Content runat="server" ContentPlaceHolderID="PageContent">
  <div id="homePageTest">
    <cb:ScriptletPart ID="HomePage" runat="server" Layout="Three Column" Content="Home Page" LeftSidebar="Standard Sidebar 1" RightSidebar="Standard Sidebar 2" Header="Standard Header" Footer="Standard Footer" Title="Home Page" AllowClose="False" AllowMinimize="false" />
  </div>
</asp:Content>

but the homePageTest div isn't rendered. I can insert an outer div into all of my scriptlets but then every page requires customization just so I can style the home page differently.

Can I change default.aspx somehow so it renders the extra div? Or is there another way to do this?

I hope someone can help me. Thanks in advance.

nickc · Post by **nickc** » Thu May 14, 2009 4:27 pm

ZLA wrote:...Layout="Three Column"...

The layout file is where you should make your change. Copy App_Data\Scriptlets\Default\Layout\Three Column.htm to App_Data\Scriptlets\Custom\Three Column.htm and edit that.

ZLA · Post by **ZLA** » Thu May 14, 2009 6:29 pm

Thanks Nick. It probably can be done that way. I'd have to use a custom layout for each page I wanted to style differently.

However, I still think my feature request about body element ids would be useful: viewtopic.php?f=45&t=10900. For example, it default.aspx rendered as

Code: Select all

<body id="acBody_Default onload="initAjaxProgress();">

then you could easily add the following to your stylesheet:

Code: Select all

#mainPanel {background-color: blue;} /* default background color */
#acBody_Default #mainPanel {background-color: red;} /* for home page only */
#acBody_ContactUs #mainPanel {background-color: yellow;} /* for another special page */

Thanks again.

Post by **mazhar** » Fri May 15, 2009 2:35 am

main panel would wrap contents from contents scriptlet. So I you could achieve same effect for your home page by just wrapping all Home Page.htm scriptlets contents in some div.
#mainPanel #myDiv etc

ZLA · Post by **ZLA** » Fri May 15, 2009 6:20 am

That's what I've done for now. But any styling of the main panel applies to all pages. Wrapping the home page scriptlet can't override the #mainpanel styling because the home page wrapping div is a child of the mainpanel. A custom 3 page layout with an extra div for just the home page would would take care of this but I just thought it would be good if this could be done in CSS without the custom layout.

Thanks for all the input.

Khaliq · Post by **Khaliq** » Sun May 17, 2009 11:22 pm

if i understand your question your concern is just to change your home page styles from other pages.
You should create a new .htm (homepage_layout.htm) file in Custom/layout, then copy/paste the Three Column layout contents to your newly created layout homepage_layout.htm.Now you could change or modify this layout to your desired home page layout.

You never have to touch the other files, you can make new class for main panel in css and call it in your own layout(homepage_layout.htm)

ZLA · Post by **ZLA** » Mon May 18, 2009 6:09 am

Thanks for the response Khaliq but that won't resolve the issue. I'll try to explain. I want a common #mainPanel styling to most of my pages but change it for selected pages, such as the home page.

Changing the home page layout scriptlet has no effect on that because #mainPanel occurs outside of the home page scriptlet. It is the parent and it's selector can not be change by any of its descendents. Thus I can't "make new class for main panel in css and call it in your own layout(homepage_layout.htm)". mainPanel is defined by the master, not by content scriptlet. There is no way to distinguish between #mainPanel on one page and another solely through CSS.

I do appreciate the input. Regards.

nickc · Post by **nickc** » Mon May 18, 2009 10:35 am

mainPanel is defined by the master, not by content scriptlet

Actually, mainPanel is defined in the layout scriptlet:

Code: Select all

				<td align="left" valign="top" id="mainPanel">
					[[layout:content]]
				</td>

ZLA · Post by **ZLA** » Mon May 18, 2009 10:59 am

THANK YOU NICK. Somehow I must have missed that. That's why my answers must have made all of you think I'm crazy.

Since it's a table cell, I'd add a class to it since I can't wrap it in another div. But then I could just change the layout scriptlet for the home page by itself and inherit everything else from the normal mainPanel.

Very much appreciated and thank you all for your patience.

AbleCommerce Shopping Cart Software

Can't enclose mainPanel div in another div?

Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?

Re: Can't enclose mainPanel div in another div?