jQuery UI Widgets Forums Dialogs and Notifications Window Customized Header

This topic contains 5 replies, has 2 voices, and was last updated by  BrentH 9 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Customized Header #62399

    BrentH
    Participant

    Is it possible you could show a demo, sample or tutorial of how to customize a window header – including changing the close icon? I have looked through the documentation and tried to do what it said, but got no change. Is it even possible?

    Customized Header #62454

    Dimitar
    Participant

    Hi BrentH,

    If you add the following style to your page, the jqxWindow close button will be changed:

    <style type="text/css">
        .jqx-window-close-button
        {
            background-image: url("http://png-3.findicons.com/files/icons/756/ginux/16/close.png");
        }
    </style>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Customized Header #62481

    BrentH
    Participant

    I have verified that I can see your (Or my) URL, but it only blanks out the icon and doesn’t replace the icon. I just copy/pasted what you have into my project. Is there a javascript that I have to include?

    Customized Header #62502

    Dimitar
    Participant

    Hi BrentH,

    You only need this style to override the default one from jqx.base.css. Here is a complete, working example:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            .jqx-window-close-button
            {
                background-image: url("http://png-3.findicons.com/files/icons/756/ginux/16/close.png");
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow ").jqxWindow({ height: 90, width: 150 });
            });
        </script>
    </head>
    <body>
        <div id='content'>
            <div id='jqxwindow'>
                <div>
                    Header</div>
                <div>
                    Content</div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Customized Header #62610

    BrentH
    Participant

    I have this sample working.

    But, if I want to use another style, like ui-smoothness, it doesn’t seem to work. Do I have to change everything in the style?
    Do I have to create a new style (just to change one thing)? Even if I just substitute the URL in the style file, it won’t work. Am I stuck using base.css only if I want to change something?

    Customized Header #62613

    BrentH
    Participant

    OK, I have to reset the background-position as well.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.