Round corners

[Alcor]

Hello.

It's my first message and I'm newbie with shadowbox. I was look for some message about round corners on style of shadowbox, but I didn't find it, and also I ask it. Is it possible to do shadowbox with rounded corner? I've tried in skin.js something like:

'<div id="shadowbox_container">' +
                    '<div id="shadowbox_overlay"></div>' +
                                        '<table border="0" cellpadding="0" cellspacing="0">' +
                                                '<tr>' +
                                                        '<td id="sb-tl"></td>' +
                                                        '<td id="sb-tc"></td>' +
                                                        '<td id="sb-tr"></td>' +
                                                '<tr>' +
                                                        '<td id="sb-cl"></td>' +
                                                        '<td>' +
                                           '<div id="shadowbox">' +
                                      '<div id="shadowbox_title">' +

                                               ...

                                               '</div>' +
                                                        '</td>' +
                                                        '<td id="sb-cr"></td>' +
                                                '</tr>' +
                                        '</table>'
                '</div>',

and in the skin.css:

/*_____________________________________________________________rounded corners*/
#sb-tl {
        background: url(icons/rounded-topleft.png) 0 0 no-repeat;
        height: 19px;
        witdh: 19px;
}
#sb-tc {
        background: url(icons/rounded-topcenter.png) 0 0 repeat-x;
        height: 19px;
}
#sb-tr {
        background: url(icons/rounded-topright.png) 0 0 no-repeat;
        height: 19px;
        witdh: 19px;
}
#sb-cl {
        background: url(icons/rounded-centerleft.png) 0 0 repeat-y;
}
#sb-cr {
        background: url(icons/rounded-centerright.png) 0 0 repeat-y;
}

But I don't get results. Thanks for your help.

[Alcor]

If anybody wants to add rounded corners to the shadowbox here a solution:

in skin.js replace markup

     '<div id="shadowbox_container">' +
                    '<div id="shadowbox_overlay"></div>' +
                    '<div id="shadowbox">' +
                                                '<table width="100%" border="0" cellspacing="0" cellpadding="0">' +
  '<tr>' +
    '<td id="sb-tl"></td>' +
    '<td id="sb-tc"></td>' +
    '<td id="sb-tr"></td>' +
  '</tr>' +
  '<tr>' +
    '<td id="sb-cl"></td>' +
    '<td id="sb-cc">' +
                        '<div id="shadowbox_title">' +
                            '<div id="shadowbox_title_inner"></div>' +
                        '</div>' +
                        '<div id="shadowbox_body">' +
                            '<div id="shadowbox_body_inner"></div>' +
                            '<div id="shadowbox_loading">' +
                                '<div id="shadowbox_loading_indicator"></div>' +
                                '{cancel}' +
                            '</div>' +
                        '</div>' +
                                                '</td>' +
    '<td id="sb-cr"></td>' +
  '</tr>' +
  '<tr>' +
    '<td id="sb-bl"></td>' +
    '<td id="sb-bc"></td>' +
    '<td id="sb-br"></td>' +
  '</tr>' +
                                                '</table>' +
                        '<div id="shadowbox_info">' +
                            '<div id="shadowbox_info_inner">' +
                                '<div id="shadowbox_counter"></div>' +
                                '<div id="shadowbox_nav">' +
                                    'Close' +
                                    '' +
                                    '' +
                                    '' +
                                    '' +
                                '</div>' +
                                '<div class="shadowbox_clear"></div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>',

and the skin.css add:

#sb-tl {
background: url(rnd_white.png) 0 0 no-repeat;
height: 20px;
width: 20px;
}
#sb-tc {
background: url(rnd_white.png) 0 -40px repeat-x;
height: 20px;
padding-top: 2px;
}
#sb-tr {
background: url(rnd_white.png) -20px 0 no-repeat;
height: 20px;
width: 20px;
}
#sb-cl {
background: url(rnd_white.png) 0 -80px repeat-y;
width: 20px;
}
#sb-cc {
background-color: #FFFFFF;
}
#sb-cr {
background: url(rnd_white.png) -20px -80px repeat-y;
width: 20px;
}
#sb-bl {
background: url(rnd_white.png) 0 -20px no-repeat;
height: 20px;
width: 20px;
}
#sb-bc {
background: url(rnd_white.png) 0 -60px repeat-x;
height: 20px;
}
#sb-br {
background: url(rnd_white.png) -20px -20px no-repeat;
height: 20px;
width: 20px;
}

attached the rnd_white.png

[3s2ng]

Hi Alcor,

Your code is excellent and working properly.

I just want ask how to place the close botton at the top right side inline with the title?

Is this possible?

Thanks

[build]

Here's a number of solutions to that request:
http://n2.nabble.com/forum/Search.jtp?forum=1309102&local=y&query=top+close

hth
build

[3s2ng]

I manage to move the close to the top right but I'm want to move it inline with the title using Alcors rounded corner skin.

[build]

G'day numbers 'n letters,
Then you need to move the 'close' bit into the 'title' bit in the css. Although I'm not sure if shodowbox.js will find it but the code is pretty comprehensive so it *might*. Give it a go and if you fail post what you've got and someone might have time to play with it. Hint: use htizo's example as a guide.

hth,
build

[DJD]

This edit to shadowbox is great, but has anyone else found that the curved edges break when opening a swf within shadowbox?

I'm using the latest shadowbox, built for jquery.

[talisien]

I've tried this hack and it's working fine in Firefox, Opera and Safari, but not in Internet Explorer 7.
In ie only the overlay is loaded and then it stops.

Hopefully someone can help me to solve this problem?

Thanks in advance

"Problem solved!

I was using the shadowbox-base.js from src/adapter directory. changed it to build/adapter and now all is working as it should be".


I was to soon. It is still not working! This is the error wat ie throws:

using shadowbox-base.js from the build directory
Message: Invalid argument.
Line: 1
Char: 1039
Code: 0
localhost/lw/shadowbox-2.0-code/build/adapter/shadowbox-base.js

error code using shadowbox.js from the src directory

Message: Invalid argument.
Line: 136
Char: 21
Code: 0
localhost/lw/shadowbox-2.0-code/src/adapter/shadowbox-base.js

This is causing the problem in /src/adapter/shadowbox-base.js
setStyle: function(el, style, value){
            if(typeof style == 'string'){
                var camel = toCamel(style);
                if(camel == 'opacity'){
                    setOpacity(el, value);
                }else{
                    el.style[camel] = value;
                }
            }else{
                for(var s in style){
                    this.setStyle(el, s, style[s]);
                }
            }
        },
here's a link to the testpage: http://testing.lestar-webdesign.nl/shadowbox.html

[James Tanner]

This little hack/patch works excellent! 1 small request tho should anyone feel the desire, id much prefer a version that had less padding - say was only 5 px around the edge instead of 20px.

Sadly, my CSS / Image skills arent so hot and my quick attempt screwed up very quickly lol

James

[talisien]

I figured it out what was causing that shadowbox wasn't working in Internet Explorer.
In skin.css, I changed the following
#shadowbox_body {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid #333;
  overflow: hidden;
}

in

#shadowbox_body {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0px solid #333; changing the bordersize was giving the error
  overflow: hidden;
}

Now I don't want a border, so I changed #333 to #fff corresponding with the backgroundcolor of the shadowbox.

[Clorr]

Hi,

Many many thanks for the border trick !!! I wonder how you did figure out this but I had the same problem and was desperately searching around.... So thanks again !

[talisien]

Clorr wrote:

Hi,

Many many thanks for the border trick !!! I wonder how you did figure out this but I had the same problem and was desperately searching around.... So thanks again !

Hi, I'm glad that I could be some kind of help!
I have no idea why changing the border size to 0px is giving an error in IE. Maybe it has something to do with
some javascript code? Or it is a bug in IE?



I don't know if the same occurs with the original skin.js and skin.css code?

[jrgd]

talisien: i had the same problem as you described - the line 1039 IE7 error ; after hours, almost banging my head at my desk, what solved the issue was to remove any single commented line (//) in any CSS files (including my own CSS files). It seems like IE7 and IE6 have difficulties with escaped lines.

* hope this helps someone with the issue.

[elchoco]

Where on earth is the skin.js file ????  I can't find it any of the files I've downloaded.  

Do I need to download the source-code ??

Thanks... :)

[Wizzud]

The skin.js file came with version 2 of Shadowbox. That file is deprecated in version 3.x. The 'skin' code is built into shadowbox.js for version 3.