+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / How to set width on RadMenu / SiteMenu

How to set width on RadMenu / SiteMenu

12 posts, 0 answered
  1. Phil C
    Phil C avatar
    28 posts
    Registered:
    06 Sep 2012
    22 Feb 2009
    Link to this post
    Hi, to stop the width of a horizontal SiteMenu or RadMenu changing depending on the buttons and text, we need to set a fixed width (eg. 600px). But I can't see where to do this in the frontend, .ascx or .css.

    Isn't there a way to fix the width so the background colour applies and the buttons are evenly spread? Or if not evenly spread, at least the remaining bit on the right end would be made up of the background colour. Failing that, I can't see where you can fix the size of each botton so as to dummy it (although that would cause problems as soon as a button is added/removed, so is not really a solution and probably why the button width is not settable).

    I have looked at the standard App Themes\<ThameName>\Menu\styles.css but cannot see where it can be set, neither in a Q3 RadMenu file (eg. Skins\Black\Menu.Black.css).

    There is a Width property to get/set in the RadControls .net help, so isn't this exposed in SiteFinity? What's the best way to set it?

    Phil
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    23 Feb 2009
    Link to this post
    Hello Phil,

    If I understand correctly you use SiteMenu user control which is provided by Sitefinity. If it is so, then open ~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx.cs file and expose RadMenu Width property:

    [Browsable(true)] 
        [Category("Appearance")] 
        public Unit Width 
        { 
            get 
            { 
                return this.RadMenu1.Width; 
            } 
            set 
            { 
                this.RadMenu1.Width = value; 
            } 
        } 

    Thus, the property will available in the SiteMenu Property Designer when you are in Edit mode of the page.

    Also, you could set the width of the menu through the Skin if you use a custom one. Here is an example with SitefinityBlue custom skin which is shipped with Sitefinity:

    ~/App_Themes/Blue with right sidebar/Menu/styles.css
    .RadMenu_SitefinityBlue  
        background#75a8e6
        z-index: 100 !important;     
        width20px;     
         

    Please explain in details if there is some misunderstanding.

    Best wishes,
    Pepi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Phil C
    Phil C avatar
    28 posts
    Registered:
    06 Sep 2012
    03 Mar 2009
    Link to this post

    Many thanks Pepi, this is truly excellent, a great way to demonstrate exposing new properties in the .ascx to come through the admin frontend for users, works perfectly!

    May also use the css rule in future, good one, am using embedded skin currently though.

    Just one thing then - if the new Appearance property sets in the DB, is there a way to assign the same preconfigured SiteMenu (eg. with Width set) to every page, to save setting it on each page individually?

    Phil

  4. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    04 Mar 2009
    Link to this post
    Hi Phil,

    If I understand correctly you want to specify a different width of the menu on each page. To achieve this, you need to drag and drop the SiteMenu into each individual page instead of setting it in the template (master page).

    Another option is to set the width dynamically depending on the name of the page. This functionality should be implemented in the code behind of the SiteMenu user control. Here is a simple example:

    protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!Page.IsPostBack) 
            { 
                RadMenu1.DataBind(); 
     
                CmsSiteMapNode node = SiteMap.CurrentNode as CmsSiteMapNode; 
     
                switch (node.Title.ToLower()) 
                { 
                    case "home"
                        this.RadMenu1.Width = Unit.Pixel(200); 
                        break
                    case "contact us"
                        this.RadMenu1.Width = Unit.Pixel(300); 
                        break
                    default
                        this.RadMenu1.Width = Unit.Pixel(700); 
                        break
     
                } 
            } 
        } 

    Hope this helps.

    All the best,
    Pepi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Phil C
    Phil C avatar
    28 posts
    Registered:
    06 Sep 2012
    04 Mar 2009
    Link to this post
    Thanks Pepi, heh no, just wanted to assign the width to every page instance automatically and overlooked doing it through the MasterPage as you suggest - I've had problems with default content in masterpages before so discounted the idea and added the menu manually to each page. However, tried it in the Master now and works fine! So, I only only have to set the newly exposed property once, brilliant.

    I also tried it in the Page_Load as per your example, and that works great too - as you show, it's easy to then set properties differently for each page. Cool.

    Cheers, Phil.
  6. jack
    jack avatar
    4 posts
    Registered:
    18 Sep 2008
    04 Dec 2009
    Link to this post
    Pepi,

    Is this for sitemaps on end-user web pages that will be seen when users visit the website?  OR, is this for the small TreeView sitemap that is displayed on the left side of the Sitefinity dashboard? 

    My request is to increase the size of the TreeView sitemap inside the dashboard of the Sitefinity app.  I find it very difficult to conduct all of my page organization, etc through the small (200px wide?) window given to us in the dashboard.

    Is there anyway to increase the width of that window?

    Thanks

    -Jack

  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    04 Dec 2009
    Link to this post
    Hi jack,

    Can you try to increase the width of the #subnav CSS class in ~/Sitefinity/Admin/Themes/Default/global1.css and the of the #subnav .in. The width of the #subnav class is currently set to 220px. Please, note however that this will increase the width of this class globally.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. jack
    jack avatar
    4 posts
    Registered:
    18 Sep 2008
    04 Dec 2009
    Link to this post
    Thanks Rad.  I took your direction and ALMOST have it resized the way I want it.  (I also successfully made changes to two other related style sheets.)  However, there is one last style that is eluding me.  Using Firefox's firebug and developer plugins, I can see the last style is actually an in-line style (see below code) within the Pages.aspx page.  However, I cannot seem to find where to change this within the file structure.  I.e., of the many parts that make up Pages.aspx, I can't find the one that has this in-line code so I can change it.  Any suggestions?

    <div class="sitemapTree"> 
    <div id="ctl00_ContentPlaceHolder1_siteMap_ctl02_ctl00_SiteNavigation" class="RadTreeView RadTreeView_SitefinitySiteMap " style="overflow: auto; width: 190px; height: 97px;"> 

    For the record, here are the three stylesheets that I've changed to enlarge the tree view:

    1. \Sitefinity\Admin\Themes\Default\global1.css

    #main{background:transparent url(Images/RightTable.gif) no-repeat right top; float:right; margin-left:-604px; width:100%}
    #main .in{margin-left:604px;}
    #subnav{background:url(Images/BackTable1.png) repeat-x 0 0; float:left; min-height:411px;  position:relative; width:600px; _height:411px}


    2. \Sitefinity\Admin\Themes\Default\Skins\Panelbar\Sitefinity\styles.css

    .RadPanelbar_Sitefinity
    {
    background: transparent;
    background-repeat: no-repeat;
    white-space: nowrap;
    width: 600px;
    }


    3. \Sitefinity\Admin\Themes\Default\pages.css 

    .sitemapTree(width:600px;}


    If we can find that last piece- the in-line style on Pages.aspx, I think we can make this work and give anyone else the ability to make the tree view larger and thus easier to use.
  9. jack
    jack avatar
    4 posts
    Registered:
    18 Sep 2008
    04 Dec 2009
    Link to this post
    Rad, FOUND IT!!

    The last remaining change is in the SiteMapPanel.ascx file found at: 

    \Sitefinity\Admin\ControlTemplates\Pages\SiteMapPanel.ascx

    Inside this file is the following line:

    <telerik:RadTreeView ID="SiteNavigation" EnableEmbeddedSkins="false" Skin="SitefinitySiteMap"  EnableDragAndDropBetweenNodes="true" runat="server" Width="600" ></telerik:RadTreeView></div>

    Made the change and it works.  Now we can control the size of the tree view inside the dashboard to whatever we want.

    Thanks for your help.  Have a great weekend.

    -Jack

  10. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    07 Dec 2009
    Link to this post
    Hello jack,

    Thank you for getting back to the forum.

    We are glad to see that you have managed to style the SiteMap Tree to fit your requirements. It is good that you have shared your experience with the rest of the Sitfinity Community.

    If have more questions, please feel free to post in the Forums or send us a Support Ticket.

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. jack
    jack avatar
    4 posts
    Registered:
    18 Sep 2008
    13 Jan 2010
    Link to this post
    Rad, it is my pleasure.

    I have another question.  How can I set the Image Manager (found when right-clicking on an image in a Content box and selecting "Properties") to our root directory?  Right now it defaults to the /Images folder.  We actually have our image files in a different folder and the Image Manager will not let us browse to our images.  Thus, in effect, we are locked out from our images.  

    Is there a setting where I can tell the Image Manager to default to the root rather than to /Images?

    (See screen shots)

    Thanks so much.

    -Jack
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    13 Jan 2010
    Link to this post
    Hello jack,

    Firs you need to map the external template for the desired view. Please take a look at how to map an view. Then you have to find the RadEditor declaration and set RadEditor's ImageManager properties.

    Below is a sample code:

    <telerik:RadEditor
                        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"
                        runat="server"
                        ID="Editor"
                        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"    
                        Skin="WebBlue"                    
                        NewLineBr="False"
                        Width="95%"
                        ContentFilters="FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
                        <ImageManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <CssFiles>
                            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                           <%--<telerik:EditorCssFile Value="~/Files/style.css"/>--%>
                        </CssFiles>
                    </telerik:RadEditor>


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
12 posts, 0 answered