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

Changing Title Bar to use wide Close button

9 Answers 322 Views
Window
This is a migrated thread and some comments may be shown as answers.
Laurie
Top achievements
Rank 2
Laurie asked on 30 Jul 2010, 08:37 PM
My client would like to use a close button that has the word close followed by the X.  (They think the current close button is too tiny to be noticed by users.)  The close button is the only button we want to have appear along the top of the window.  I have created a custom skin and updated the sprite (attached), but don't know how to get the window to show the entire close portion of the sprite.  Any clues?  I'm also attaching an image that shows how the close button appears currently.

Thanks.

Laurie

9 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 02 Aug 2010, 11:03 AM
Hi Laurie,

Please, find attached radwindowwideclosebutton.zip. This is a simple project where I am suggesting a possible solution for the custom close button.

I have used the Default RadWindow Skin for the example. There is a new Sprite created, just for the custom close buttons, which you could find in the project attached. I have also decreased the buttons width from 113px to 93, as there was to much empty space in the image. If you decide to use the old 113px width, you should just change the settings in the CSS.

Attached is also closebutton.gif showing the custom close button in the browser.

Best wishes,
Bojo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Laurie
Top achievements
Rank 2
answered on 04 Aug 2010, 09:35 PM
Thanks, Bojo.  Worked like a charm!
0
Chris Mitchell
Top achievements
Rank 1
answered on 27 Mar 2012, 08:51 PM
I do something very similar to this but I am finding that if I use any other buttons in addition to close, my title bar's 'control tray box' (for lack of a better term) breaks onto two lines.. Is there a CSS style I need to set for the overall width of this box to prevent this from happening?
0
Bozhidar
Telerik team
answered on 28 Mar 2012, 08:05 AM
Hello,

Please, provide us with screenshots and sample code what you are trying to achieve. When using custom buttons each case could be different depending on buttons spcifications and there is not a magical CSS style that could be a painkiller for all cases.

Take a look how Laurie Dickinson provided screenshots of what he want to ahcive and what is rendered and send us something similar that will help us to provide you with the best solution.

All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Chris Mitchell
Top achievements
Rank 1
answered on 28 Mar 2012, 08:13 AM
I understand; I just wondered if there was a surrounding container to all of the buttons or something that I had to put a width on..

Attached is an image of my RadWindow.. I was trying to do this via modifying the .rwCloseButton's CSS as so:

.rwCloseButton
    {
      position: relative;
      top:   0px;
      right: 4px;
      background-image: url(images/closereport_button.png) !important;
      background-position: 0 0 !important;
      width: 110px !important;
      height: 20px !important;
    }
    .rwCloseButton:hover
    {
        background: url(images/closereport_button.png) 0 -20px !important;
    }

The RadWindow declaration is:

<telerik:RadWindow ID="PurchasesDialog" runat="server" Title="View Report Views and Purchases" Behaviors="Reload,Maximize,Close,Move" KeepInScreenBounds="true" Width="850px" Height="600px" Modal="true" Skin="WebBlue" VisibleStatusbar="false" />

As a side note, I did try the alternate method of doing the custom button (the Print Button example from the KB) in the title bar but in my case, my custom button needs to be a replacement for the Close button and I couldn't seem to get the KB example to work where the button appeared as the last item (farthest right).

Any help appreciated..

0
Bozhidar
Telerik team
answered on 28 Mar 2012, 11:17 AM
Hi,

Try the following code:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
         
         
        .rwControlButtons,
        .rwTitlebarControls em
        {
            display: inline-block;
            zoom: 1;
            *display: inline;
            width: auto !important;
            *width: 145px !important;
        }
         
        .rwCloseButton
        {
            position: relative;
            top: 0px;
            right: 4px;
            background-image: url(closereport_button.png) !important;
            background-position: 0 0 !important;
            width: 112px !important;
            height: 22px !important;
        }
        .rwCloseButton:hover
        {
            background: url(closereport_button.png) 0 -20px !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindow ID="SummaryRadWindow" runat="server" Behaviors="Close, Maximize, Reload"
        Height="300px" Title="Win Title" Width="400px" VisibleOnPageLoad="true">
        <ContentTemplate>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu nisl eget
            erat elementum porttitor eget sed dui. Curabitur non tristique quam. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            Maecenas lorem enim, pellentesque sed congue at, tincidunt ut justo.
        </ContentTemplate>
    </telerik:RadWindow>
    <br />
    <br />
    <br />
    </form>
</body>
</html>

Attached is closereport_button.png used in my example with height of 22px, if you use different height, you should modify the styles for the hover state.

All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Chris Mitchell
Top achievements
Rank 1
answered on 28 Mar 2012, 05:40 PM
Thanks; I will give that a try and report back.. I should have noted that I was/am using a very similar sprite for the Close Button..
0
Bozhidar
Telerik team
answered on 29 Mar 2012, 10:58 AM
Hi,

We will be waiting for your report back.

Kind regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Chris Mitchell
Top achievements
Rank 1
answered on 29 Mar 2012, 11:18 AM
Bozhidar,

Thank you very much for your help. That worked like a champ!

Just as a note in case anyone else is doing an oddball situation like mine.. Remember you can apply a CssClass to your RadWindow and then add .<ClassName> in front of the .rwCloseButton,etc from the example.. This was helpful in my case as I have a RadGrid that opens 3-4 different utility windows via Context menu for which I do NOT want this special button.. That button is only used by the main link, which triggers a oWnd.show();

Anyway, thanks again.. 
Tags
Window
Asked by
Laurie
Top achievements
Rank 2
Answers by
Bozhidar
Telerik team
Laurie
Top achievements
Rank 2
Chris Mitchell
Top achievements
Rank 1
Share this question
or