Show jquery-ui icon on close button of dialog widget

Navigation
0

I'm customizing the appearance of the jquery-ui dialog widget and so far my css is as follows: 

.ui-dialog {
  position: fixed;
  z-index: 1050;
  display: none;
  /*overflow: auto;*/
  /*overflow-y: scroll;*/
  /*-webkit-overflow-scrolling: touch;*/
  outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.ui-dialog .ui-dialog-title {
  margin: 0;
  line-height: 1.42857143;
}
.ui-dialog .ui-dialog-titlebar-close {
  margin-top: -2px;
  border: 1px solid black;
  background-color: transparent;
}
.ui-dialog .ui-dialog-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  outline: none;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
  position: fixed;
  z-index: 1040;
  background-color: #000;
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}

This is what is currently displayed:

The final step for me to achieve the desired look would be to display the .ui-icon-closethick icon inside the close button of the window. Does anyone know how to do this?

    
asked by anonymous 12.04.2014 / 17:33

1 answer

1

If you are using the same icon distribution as the JQUI template, simply modify the url of the image images/ui-icons_888888_256x240.png . 

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}

.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_888888_256x240.png);
}

.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
    
12.04.2014 / 17:53
Call Function or Procedure Several Times Send select to print with php