Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » SlideMenu theme

SlideMenu theme Options
Previous Topic · Next Topic
Paul Creedy
Posted: Monday, February 11, 2008 6:59:27 AM
Rank: Advanced Member
Groups: Member

Joined: 6/5/2007
Posts: 76
I'm applying the Win XP theme to a slidemenu.

I would like to somehow take the formatting off the page and put it into a skn or theme for the web site so it will work with page theming.

Any pointers on how best to do that?
Back to top
 
eo_support
Posted: Monday, February 11, 2008 7:04:34 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Paul,

Everything is in the help file. Please take a look of those first!

Thanks
Back to top
 
Paul Creedy
Posted: Monday, February 11, 2008 7:32:13 AM
Rank: Advanced Member
Groups: Member

Joined: 6/5/2007
Posts: 76
Thanks but the help file only shows this for .net 2 theme support:

quote:
Specifically when you define a .NET 2.0 page theme, both ControlSkinID and CssFile properties acquire values from the theme based on the value of the control's SkinID. These two properties are then interpreted by EO.Web navigation controls at rendering time to render the appearance defined in the skin or CSS file.

I can't find any details about what or how to put into my existing: App_Themes css and skin files to control the appearance. A working example using an actual App_Theme would be useful.
Back to top
 
eo_support
Posted: Monday, February 11, 2008 7:37:48 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Paul,

As exactly it has explained...a slide menu with ControlSkinID (and/or CssFile) set would be what you put there. A skin file is always a file that contains a "template", so the questions is not what you put there, the question is what properties on the template control matter.

Thanks
Back to top
 
Paul Creedy
Posted: Monday, February 11, 2008 7:56:47 AM
Rank: Advanced Member
Groups: Member

Joined: 6/5/2007
Posts: 76
Are we talking about the same thing?

I'm not refering to the slidemenus own css or skin file, I'm mean the standard .NET 2.0 theming method. Whereby you put css or controls into a theme in the App_Theme directory so that a page can then load in that theme for the page.

For example in my own theme skin file for the site I have:
<asp:FormView runat="server" Font-Size="10pt" />

Which makes all forms on pages that use that theme tp have a font size of 10pt.

Therefore if it's supported I need to know what to put into my existing css and skin theme for the website, so that the menu adopts the theme.
Back to top
 
eo_support
Posted: Monday, February 11, 2008 8:18:37 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Paul,

I believe we are talking about the same thing. You would put a "template control" in your skin file, just as you put:

Code: HTML/ASPX 
<asp:FormView runat="server" Font-Size="10pt" />


Here you defined a FormView "template", who’s Font-Size will be copied to other FormView controls that references this skin. So naturaly for slide menu, you can put something like this:

Code: HTML/ASPX 
<eo:SlideMenu runat="server" CssFile="some_file" />


In this case the CssFile property will be copied to other SlideMenu controls that reference this skin.

What I was trying to tell you is, not every property will be copied to the target control. For example, setting "Visible" property on your FormView in your skin file is probably useless. For SlideMenu, you generally should only set ControlSkinID and CssFile in your skin file. Setting other properties will give you unnecessary trouble because slide menu has hieratical menu items, which standard ASP.NET skin implementation can not handle well. That's also exactly why we have a separate ControlSkinID property in addition to the standard ASP.NET SkinID property.

The way ControlSkinID works is rather complicated. Again the help file has all the details if you are interested. I would recommend you to set CssFile property. You basically configure the slide menu to use CSS classes (instead of setting all the .CssText properties), then prepare multiple .css files with different defintions for the same set of CSS classes. You can then switch .CssFile property based on your skin file.

Thanks
Back to top
 
Paul Creedy
Posted: Monday, February 11, 2008 8:19:55 AM
Rank: Advanced Member
Groups: Member

Joined: 6/5/2007
Posts: 76
Think I got it.

For those who want to do similar here is what I did.

1. Declare the control in the web.config so that themes will compile it without errors. If you just register it on the page you'll get errors in the themes skin file.

<pages>
<controls>
<add assembly="EO.Web" namespace="EO.Web" tagPrefix="eo" />
</controls>
</pages>


2. In your theme skin file add the following code to make the SlideMenu Outlook theme:

<eo:SlideMenu runat="server" ControlSkinID="None" SlidePaneHeight="170" KeepExpandedOnClick="True" Width="200px" SingleExpand="False"><LookItems>
<eo:MenuItem ItemID="_TopGroup">
<SubMenu Style-CssText="border-right: #002d96 1px solid; border-top: #002d96 1px solid; font-weight: bold; font-size: 11px; border-left: #002d96 1px solid; cursor: hand; font-family: tahoma"></SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="31" ItemID="_TopLevelItem" HoverStyle-CssText="border-bottom: #002d96 1px solid" LeftIcon-Padding-Left="6" NormalStyle-CssText="border-bottom: #002d96 1px solid" Image-Mode="ItemBackground" Image-ExpandedUrl="00000502" Image-HoverUrl="00000501" Image-Url="00000500">
<SubMenu Style-CssText="padding-right: 10px; padding-left: 10px; font-size: 11px; padding-bottom: 2px; padding-top: 2px; border-bottom: #002d96 1px solid; font-family: tahoma"></SubMenu>
</eo:MenuItem>
<eo:MenuItem ItemID="_Separator" IsSeparator="True"></eo:MenuItem>
<eo:MenuItem Height="20" ItemID="_Default" HoverStyle-CssText="font-weight: normal; text-decoration: underline" LeftIcon-Padding-Right="5" NormalStyle-CssText="font-weight: normal; text-decoration: none"></eo:MenuItem>
<eo:MenuItem Height="20" ItemID="plain_text" Text-NoWrap="False" LeftIcon-Padding-Right="5" NormalStyle-CssText="font-weight: normal;"></eo:MenuItem>
</LookItems>

<TopGroup><Bindings>
<eo:DataBinding DataField="@LeftIcon" Property="LeftIcon_Url"></eo:DataBinding>
</Bindings>
</TopGroup>
</eo:SlideMenu>


3. Now on the page that displays the menu, remove all formatting:
Note that I'm using an external xml source for the menu items

<eo:SlideMenu ID="SlideMenu1" runat="server" Width="200px" DataSourceID="XmlDataSource1" ControlSkinID="None" SlidePaneHeight="170" KeepExpandedOnClick="True" SingleExpand="False">
<LookItems>
<eo:MenuItem ItemID="_TopGroup">
<SubMenu>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem>
<SubMenu>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem>
</eo:MenuItem>
<eo:MenuItem>
</eo:MenuItem>
</LookItems>
<TopGroup>
<Bindings>
<eo:DataBinding DataField="@LeftIcon" Property="LeftIcon_Url" />
</Bindings>
</TopGroup>
</eo:SlideMenu>
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.