If you’ve followed instructions from HTML popups in Highslide4WP – 1 you will see that your html popup looks different from my example ( text buttons instead graphics; different alignment of buttons and your popup does not expand to the center of browser’s window ). Why?

highslide-with-html.packed.js which comes as part of Highslide4WP, being a subset of highslide-full.packed.js, has limited capabilities. We will fix it preserving our original plugin’s functionality.

Download latest version of highslide.zip. Unpack it into folder of your choice. Rename highslide-full.packed.js to highslide-with-html.packed.js. Replace highslide-with-html.packed.js of Highslide4WP plugin with the file you just renamed. In next step we will modify /wp-content/plugins/highslide4wp/highslide/highslide.css.

In highslide.css find these lines:

.highslide-wrapper .highslide-header ul {
	margin:0;
	padding:0;
	text-align:right;
}
.highslide-wrapper .highslide-header ul li {
	display:inline;
	padding-left:1em;
}

and replace them with:

.highslide-wrapper .highslide-header ul {
	margin:0;
	padding:0;
	text-align:left;
}
.highslide-wrapper .highslide-header ul li {
	display:inline;
	padding-right:1em;
}

Now find the last occurence of:

.highslide-resize {
	cursor:nw-resize;
}

and copy the following immediately after:

/* added by Frank */
#highslide-fancy-title {
  background-color: silver;
  color: white;
  padding: 10px 10px 10px 10px;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
}
.highslide-container div {
  font-family: Tahoma, Verdana, Helvetica;
  font-size: 10pt;
}
.highslide-wrapper .highslide-header ul {
  margin: 0;
  padding: 0;
  text-align: right;
  height: 40px;
  list-style-type: none;
}
.highslide-wrapper .highslide-header ul li {
  display: inline;
  padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-close {
  display: block;
  width:30px;
  height:30px;
  margin: 0px 0px 0 0px;
  padding: 0;
  float:left;
}
.highslide-wrapper .highslide-header ul li.highslide-close a {
  display: block;
  background: url(graphics/close.png) no-repeat;
  margin: 0 30px 0 5px;
  width:30px;
  height:30px;
}
.highslide-close span {
  display: none;
}
.highslide-wrapper .highslide-header ul li.highslide-move {
  display: block;
  cursor: move;
  width:30px;
  height:30px;
  margin: 0px 0px 0 0;
  padding: 0;
  float: left;
}
.highslide-wrapper .highslide-header ul li.highslide-move a {
  display: block;
  background: url(graphics/move.png)
  no-repeat;
  margin: 0 0px 0 0px;
  width:30px;
  height:30px;
}
.highslide-move span {
  display: none;
}
.highslide-wrapper .highslide-footer {
  height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
  float: right;
  margin-top: 4px;
  height: 11px;
  width: 11px;
  background: url(graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
  cursor: move;
}
.highslide-resize {
  cursor: nw-resize;
}

/* Olivers IE fix */
.highslide-wrapper {
  font-size:14px;
  line-height:16px;
}
.highslide-wrapper .highslide-html-content {
  padding:1px;
}
/* end of Frank's addition /*

Neither Highslide JS nor Highslide4WP provide Move button (move.png). Copy displayed image and upload it into /wp-content/plugins/highslide4wp/highslide/graphics/ of your site.

All done! Enjoy it.