Moving and/or adding word 'close' next to cross

[frogger]

Hi,

Just wondering if it is possible to move the close cross button (currently bottom right) to the top right ?

Is it also possible to add the word 'close' next to the cross ?

Would that be a matter of changing the look of the icons/close.png file ?
Would resizing this image also cause problems.

Thanks heaps.
Frogger

[zulaica]

Take a look at the skin.js and skin.css files. You should be able to move #shadowbox_nav_close in skin.js to the top and style it with skin.css.

[frogger]

Thanks for your reply.

I can see in the skin.css that the below relates to the positioning of the cross.

#shadowbox_nav {
  float: right;
  height: 16px;
  padding: 2px 0;
  width: 45%;
}
#shadowbox_nav a {
  display: block;
  float: right;
  height: 16px;
  width: 16px;
  margin-left: 3px;
  cursor: pointer;
}
#shadowbox_nav_close {
  background-image: url(icons/close.png);
  background-repeat: no-repeat;
}

But as I dont have a huge knowledge on CSS I am not sure what the command could be to move the X to the top. I can see the line float: right; positions it to the right just not sure who to get this to the top.

Thanks
Frogger

[zulaica]

To move it directly to the top, the title bar, you'd need to do that in the skin.js file. The skin.js file is what creates the HTML markup for Shadowbox. If you only want to move the close button to the top, you could relocate #shadowbox_nav_close and nest it in #shadowbox_title, then rework skin.css to pretty it up.

[frogger]

zulaica,

Thank you so much for the heads up.

By adding the below did the trick.


                        '<div id="shadowbox_title">' +
                        '<div id="shadowbox_nav">' +
                        '' +
                        '</div>' +

Thanks again for your help.
Frogger

[zulaica]

No worries, glad we got that sorted out!

[frogger]