Customized Header - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: close, close button, custom, Header, icon, image, jqxwindow, window

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

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

Author

Customized Header Posts
November 7, 2014 at 7:46 pm 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?

November 10, 2014 at 9:06 am 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/
November 10, 2014 at 6:39 pm 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?

November 11, 2014 at 6:23 am 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/
November 12, 2014 at 3:53 pm 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?

November 12, 2014 at 4:03 pm Customized Header #62613

BrentH
Participant

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

Posts

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

You must be logged in to reply to this topic.