This is a migrated thread and some comments may be shown as answers.

RAD PANEL BAR SKIN OBJECT

26 Answers 240 Views

Designs, skins, themes

This is a migrated thread and some comments may be shown as answers.

26 Answers, 1 is accepted

answered on 04 Aug 2007, 09:04 AM

Hello Peter,
I have still not got solution to my problem I referred to you, I am waiting for your reply on the same.
As you must have noticed in my skin source that it is based on pure TableLess layout, I was just wondering that does your skin object requires only Table Layout Skins?
I also tried using your skin object in my Table based skin and it works but with a little problem i.e. even upon logging out it shows Admin and Host tabs.
Please reply soon as I have to decide whether to buy your control and incorporate in my application or try some other control as my requirement is to implement in Div Layout skin only.
Thanks,
Sandeep.

answered on 07 Aug 2007, 09:07 AM

Hello Sandeep,

First of all, apologies for the long delay. I must admit this case took us a while to find out what was happening. The cause of the problem is very subtle and hard to notice. We managed to reproduce the problem locally. It turned out that the div which holds RadPanelbar has visibility=false:

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> 

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %> 

<%@ Register TagPrefix="dnn" TagName="RADPANELBAR" Src="~/DesktopModules/RadPanelbar/RadPanelbar.ascx" %> 

<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %> 

<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %> 

<link href="<%= SkinPath %>skin.css" rel="stylesheet" type="text/css">  

<div id="BGTable" align="center">  

 <div id="join" style="height:15px;"> <a class="linkpane" href="http://www.attorneys.com/pc/"><font color="#FFFFFF"><b>Attorneys:</b></font><b>Join Our Network</b> </a> </div> 

  <div id="wrap" align="center">  

    <div id="header">  

      <div id="logo"><dnn:LOGO runat="server" id="dnnLOGO" /></div>  

      <div id="HeaderPane" runat="server" visible="false"></div> 

    </div> 

    <div id="canvas">  

      <div id="nav">  

        <div id="LeftPane" runat="server" visible="false" class="LeftPane"><dnn:RADPANELBAR ExpandMode="MultipleExpandedItems" runat="server"  id="dnnRADPANELBAR" Width="163px" Skin="Dnn" SkinsPath="*SkinPath*/Panelbar/" Visible="true"   /></div>  

        <div id="ContentPane" runat="server" visible="false" class="CenterPane"></div> 

      </div> 

    </div> 

    <div id="footer">  

      <div id="copy"><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="dnnFooter" /></div>  

      <div id="linkpane" class="FooterPane" runat="server" visible="false"></div> 

      <div id="loginPane"><dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="skinHeaderText" /></div>  

    </div> 

  </div> 

</div>

If you set visibility=true for the LeftPane div, you will be able to see the left RadPanelbar navigation.

We hope that despite the long delay we still managed to reply just in time for you to make the decision whether to use RadPanelbar or not.

Don't hesitate to contact us if you have any other questions. We will be glad to assist you.

Best wishes,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 07 Aug 2007, 11:59 AM

Hello Sandeep,

I am glad that you are happy with our reply. We will try to keep it this way. :)

Now to your second question - you can consider using the following properties:

EnableAdminMenus - A Boolean parameter, specifying whether or not to show the admin(Admin and Host) pages in the panel.

EnableUserMenus - A Boolean parameter, specifying whether or not to show the normal(non-admin) menu pages in the panel.

For a complete list of RadPanelbar's DNN properties and their description, you can see the following help topic:
API reference (skinning whitepaper)

Again, feel free to let us know if you need assistance with your project.

Cheers,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 08 Aug 2007, 11:07 AM

hi
thank you very much for your immediate response.
and its working now.
Now i want to know more in detail about the RadPanelBar skin object.

I have referred your radpanelbak skin also and have seen all the classes from the style.css. Its good also.

i have menus in the following scenario.

Parent1
--Sub11
--Sub12
--Sub13
Parent2
--Sub21
--Sub22
--Sub23
Parent3
--Sub31
--Sub32
--Sub33

I want to change like this.

All the parent menu should have a single stable image(Say nav_page.gif) and is not clickable that can de dont in dnn bu disabling the tab and no hover effect for these parent tab.
All the sub menu should have a single image (Say navOff.gif) and on the hover there should be a different image(Say navOn.gif).

I have used all these classes like

/* panelbar wrapper */
.RadPanelbar_Dnn
{
    background: white;
    white-space: nowrap;
    width: 163px !important;
}

.RadPanelbar_Dnn .text
{
    padding-left:30px;
    font: normal 11px Arial, Verdana, Sans-serif;


}

.RadPanelbar_Dnn .image
{
    margin: 4px 16px;
}

.RadPanelbar_Dnn .rootGroup .text, .RadPanelbar_Dnn .rootGroup .selected .text
{
    line-height: 25px;
}

.RadPanelbar_Dnn .rootGroup .link
{

    background-image:url('Img/nav_page.gif');
    background-position:top left;
    background-repeat:no-repeat;
    background-color:#000;
}

.RadPanelbar_Dnn .rootGroup .link:hover
{

background-image:url('Img/nav_page.gif');
    background-position:top left;
    background-repeat:no-repeat;
    background-color:#000;
}

.RadPanelbar_Dnn .group .text
{
    padding-left: 20px;

/*    background: url('Img/ListItem.gif') no-repeat 10px center; */
}

.RadPanelbar_Dnn .group .link
{
    color: #004d00;
    background: url('Img/navOff.gif') no-repeat top left;
    border-bottom:1px solid #fadcdc;
}

.RadPanelbar_Dnn .group .link:hover
{
    color: #910000;
    background: url('Img/navOn.gif') no-repeat top left;
}

.RadPanelbar_Dnn .rootGroup .selected
{
    background-image:url('Img/navOn.gif');
    background-position:top left;
    background-repeat:no-repeat;
    background-color:#ffffff;
}

.RadPanelbar_Dnn .group .selected
{
    text-decoration: underline;
    font-weight: normal;

    color: black;
    background-color:#ffffff;
}

Please guide me and explain me all the css also andsend me the updated css file also.

Thanks

answered on 08 Aug 2007, 11:42 AM

please tell me the name of the classes that is for Parent Page and for the Sub page from:--

/* Default RadPanelbar 4 DNN skin */

/* panelbar wrapper */
.RadPanelbar_Dnn
{
    background: white;
    white-space: nowrap;
    width: 163px !important;
}

.RadPanelbar_Dnn .text
{
    padding: 0px 12px;
    font: normal 11px Arial, Verdana, Sans-serif;
}

.RadPanelbar_Dnn .image
{
    margin: 4px 16px;
}

.RadPanelbar_Dnn .rootGroup .text, .RadPanelbar_Dnn .rootGroup .selected .text
{
    line-height: 23px;
}

.RadPanelbar_Dnn .rootGroup .link
{
    background: white url('Img/HeaderBg.gif') no-repeat;
    color: #ffffff;

}

.RadPanelbar_Dnn .rootGroup .link:hover
{
    background: white url('Img/SelectBg.gif') no-repeat;
    color: #877560;
}

.RadPanelbar_Dnn .group .text
{
    padding-left: 20px;
    background: url('Img/ListItem.gif') no-repeat 10px center;
}

.RadPanelbar_Dnn .group .link
{
    color: #736704;
    background: url('Img/GroupBg.gif') repeat-y;
}

.RadPanelbar_Dnn .group .link:hover
{
    color: #492b09;
    background: url('Img/GroupBg.gif') repeat-y;
}

.RadPanelbar_Dnn .rootGroup .selected
{
    background: white url('Img/SelectBg.gif') repeat-x;
}

.RadPanelbar_Dnn .group .selected
{
    text-decoration: underline;
    font-weight: normal;
    background: url('Img/GroupBg.gif') repeat-y;
    color: black;
}

as
I am not able to apply all the css properties as per my requirement that i have sent you already.

Waiting for your reply.

answered on 09 Aug 2007, 05:53 AM

hi,
I am waiting for your reply.
still I am not able apply all the css styles for the classes for the RadPanel Nar

Followings are your skin classes:-

/* panelbar wrapper */
.RadPanelbar_Dnn
{
    background: white;
    white-space: nowrap;
    width: 163px !important;
}

.RadPanelbar_Dnn .text
{
    padding: 0px 12px;
    font: normal 11px Arial, Verdana, Sans-serif;
}

.RadPanelbar_Dnn .image
{
    margin: 4px 16px;
}

.RadPanelbar_Dnn .rootGroup .text, .RadPanelbar_Dnn .rootGroup .selected .text
{
    line-height: 23px;
}

.RadPanelbar_Dnn .rootGroup .link
{
    /*background: white url('Img/HeaderBg.gif') no-repeat;*/
    color: #ffffff;

}

.RadPanelbar_Dnn .rootGroup .link:hover
{
    /*background: white url('Img/SelectBg.gif') no-repeat;*/
    color: #877560;
}

.RadPanelbar_Dnn .group .text
{
    padding-left: 20px;
    /*background: url('Img/ListItem.gif') no-repeat 10px center;*/
}

.RadPanelbar_Dnn .group .link
{
    color: #736704;
    /*background: url('Img/GroupBg.gif') repeat-y;*/
}

.RadPanelbar_Dnn .group .link:hover
{
    color: #492b09;
    /*background: url('Img/GroupBg.gif') repeat-y;*/
}

.RadPanelbar_Dnn .rootGroup .selected
{
/*    background: white url('Img/SelectBg.gif') repeat-x;*/
}

.RadPanelbar_Dnn .group .selected
{
    text-decoration: underline;
    font-weight: normal;
/*    background: url('Img/GroupBg.gif') repeat-y;*/
    color: black;
}

Plase tell me which class is for the parent tab and which is for the child tab.

Waiting for your immediate response.

Thanks

answered on 13 Aug 2007, 01:56 PM

Hello Sandeep,

Please find attached a sample code snipper that demonstrates the needed approach.

ASPX:

<html xmlns="http://www.w3.org/1999/xhtml">  

<head id="Head1" runat="server">  

    <title>Untitled Page</title> 

    <script type="text/javascript">  

    function test(sender, eventArgs)  

    {  

        if (eventArgs.Item.Expanded == true)     

        {  

            return false;  

        }  

    }  

    </script> 

</head> 

<body> 

    <form id="form1" runat="server">  

        <radP:RadPanelbar ID="RadPanelbar1" runat="server" OnClientItemClicking="test">  

            <Items> 

                <radP:RadPanelItem runat="server" Text="Root RadPanelItem 1">  

                    <Items> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 1">  

                        </radP:RadPanelItem> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 2">  

                        </radP:RadPanelItem> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 3">  

                        </radP:RadPanelItem> 

                    </Items> 

                </radP:RadPanelItem> 

                <radP:RadPanelItem runat="server" Text="Root RadPanelItem 2">  

                    <Items> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 1">  

                        </radP:RadPanelItem> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 2">  

                        </radP:RadPanelItem> 

                    </Items> 

                </radP:RadPanelItem> 

                <radP:RadPanelItem runat="server" Text="Root RadPanelItem 3">  

                    <Items> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 1">  

                        </radP:RadPanelItem> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 2">  

                        </radP:RadPanelItem> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 3">  

                        </radP:RadPanelItem> 

                        <radP:RadPanelItem runat="server" Text="Child RadPanelItem 4">  

                        </radP:RadPanelItem> 

                    </Items> 

                </radP:RadPanelItem> 

            </Items> 

        </radP:RadPanelbar> 

        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> 

    </form> 

</body> 

</html>

Code-behind:

using System;  

using System.Data;  

using System.Configuration;  

using System.Collections;  

using System.Web;  

using System.Web.Security;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using System.Web.UI.WebControls.WebParts;  

using System.Web.UI.HtmlControls;  

using Telerik.WebControls;  

public partial class _Default : System.Web.UI.Page  

{  

    protected void Page_Load(object sender, EventArgs e)  

    {  

    }  

    protected void Button1_Click(object sender, EventArgs e)  

    {  

        foreach (RadPanelItem myItem in RadPanelbar1.GetAllItems())  

        {  

            if (myItem.Items != null)  

            {  

                myItem.Expanded = true;  

            }  

        }  

    }  

}

All the best,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 21 Aug 2007, 02:45 PM

Hi Sandeep,

Please, correct me if I am wrong, but I believe that you are experiencing the reported problem with RadEditor under Internet Explorer?

If this is your problem, then set the editor's StripAbsoluteAnchorPaths and StripAbsoluteImagesPaths properties to "true", e.g.

<radE:RadEditor id="RadEditor1" StripAbsoluteAnchorPaths="true" StripAbsoluteImagesPaths="true" Runat="server"></radE:RadEditor>

Thus RadEditor will strip the absolute links and will make them relative. You can make more precise stripping by setting aslo the AnchorPathToStrip and ImagesPathToStrip properties. You can find more information in the following KB article: Stripping image and anchor paths in RadEditor v5.x - v7.x.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 01 Sep 2007, 09:10 AM

HI,
As I am using RAD panel bar skin object in my dnn skin.
I want to make the layout for the navigation like the www.totaldivorce.com
I have created the same layout but I am not getting some white space throuth the style.css. I want the white space after each section.

Please tell me what should i do?
My style.css file is as

/*Style added by Sandeep*/
/*important to note this*/
/*for the RadPanelBar */
/*rootGroup--> for the Parent Header*/
/*group -->for the other Items*/

.RadPanelbar_Dnn
{
    background: #ffffff;
    white-space: nowrap;
    width: 210px !important;

}
.RadPanelbar_Dnn .text
{

    font-size:10px;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:25px;
}

.RadPanelbar_Dnn .image
{
    margin: 4px 16px;
}

.RadPanelbar_Dnn .rootGroup
{
    color:#004d00;

}

.RadPanelbar_Dnn .rootGroup .image
{
line-height: 25px;
color:#910000;
}

.RadPanelbar_Dnn .rootGroup .image:hover
{
line-height: 25px;
color:#910000;
}

/*this is for the Header Items*/
.RadPanelbar_Dnn .rootGroup .text
{
    line-height: 25px;
    background-image:url('Img/nav_page.gif');
    background-position:top left;
    background-repeat:no-repeat;
    color:#910000;
    background-color:#c1d6c1;
    border-bottom:1px solid #ffffff;
    font-weight:bold;
    padding-left:30px;

}

/*.RadPanelbar_Dnn .rootGroup .text:hover
{
    line-height: 25px;
    padding-left:30px;
    color:#910000;
    background-color:#c1d6c1;
    text-decoration:none;
    background-image:url('Img/nav_page.gif');
    background-position:top left;
    background-repeat:no-repeat;
    height:25px;
}*/

.RadPanelbar_Dnn .rootGroup .link
{
    background-image: url('Img/nav_page.gif');
    background-repeat: no-repeat;
    background-position:top left;
    line-height:25px;
    color:#910000;
    background-color:#c1d6c1;

}

.RadPanelbar_Dnn .rootGroup .link:hover
{
color: #910000;
background: url('Img/nav_page.gif') no-repeat top left;
line-height:25px;
text-decoration:none;
background-color:#c1d6c1;
}

/*This is for the sub items all other items*/
.RadPanelbar_Dnn .group .text
{
    background-color:#dceadc;
    background: url('Img/NavOff.gif') no-repeat top left;
    line-height:25px;
    color:#004d00;
    width:210px;


}

.RadPanelbar_Dnn .group .text:hover
{

    background-image:url('Img/NavOn.gif');
    background-repeat:no-repeat;
    background-position:top left;
    color:#004d00;
    line-height:25px;
    text-decoration:none;
    background-color:#ffffff;

}

.RadPanelbar_Dnn .group .link
{
    color: #004d00;
    background: url('Img/NavOff.gif') no-repeat top left;
    background-color:#dceadc;
    line-height:25px;

}

.RadPanelbar_Dnn .group .link:hover
{
    color: #004d00;
    background-image:url('Img/NavOn.gif');
    background-repeat:no-repeat;
    background-position:top left;
    background-color:#ffffff;
    line-height:25px;
    text-decoration:none;

}
/*This is for the selected sub Item*/
.RadPanelbar_Dnn .group .selected
{
    text-decoration: none;
    font-weight: normal;
    /*background: url('Img/NavOn.gif') no-repeat top left;*/
    background-image:url('Img/NavOn.gif');
    background-repeat:no-repeat;
    background-position:top left;
    color: #004d00;
    background-color:#ffffff;
    line-height:25px;
}

.RadPanelbar_Dnn .rootGroup .selected:hover
{
background: url('Img/NavOn.gif') no-repeat top left;
height:25px;
color:#004d00;
line-height:25px;
text-decoration:none;
}

/*Following is not required anymore*/
/*

.RadPanelbar_Dnn .rootGroup .selected
{
    background: url('Img/NavOn.gif') no-repeat top left;

    color:#004d00;
    line-height:25px;
}

*/

I want the menu item in the sections and each section contains some white space also like in http://www.totaldivorce.com .

wating for your urgent reply.
Thanks,
Sandeep

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

RAD PANEL BAR SKIN OBJECT

26 Answers, 1 is accepted