Quesiton about skinning in 3.0

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Quesiton about skinning in 3.0

sivel
Can anyone provide any tips as how to create new skins for 3.0 without modifying the shadowbox.js file.

The code reads:

/**
 * The default skin for Shadowbox. Separated out into its own class so that it may
 * be customized more easily by skin developers.
 *

I don't see any docs on the new site about skinning and my JS skills are not as good as my PHP skills so it may be obvious, but just isn't jumping out at me.  Any help is appreciated.

I know the shadwbox.css file could be replaced, but just wondering if there is an easy way to modify the markup and such.
Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

mjijackson
Administrator

The skinning model now is based around callbacks. As you look through the skin that I've provided, you'll see various methods such as onOpen, onReady, onLoad, etc. As the Shadowbox code is executing, it calls these methods on the skin class to let it know what to do.

The skin class also has a bunch of private methods that are called by the public interface to accomplish the things it needs to do. Combined with the CSS file (and of course the images it points to) this constitutes a Shadowbox skin.

The way the skin is set up now you can easily modify any public properties or methods, providing they don't use the underlying private API. For example, if you want to modify the default markup used by the skin, you could simply do something like this:

<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.skin.markup = ...
Shadowbox.init();
</script>

However, you obviously don't have access to the private API. I did this because the private implementation could change from skin to skin as CSS and markup changes, and I didn't think that the API would still be relevant to other skins. However, if you feel this is too restrictive, we could discuss changes and possibly exposing some of the interface to make it easier to tweak.

Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

sivel
Thanks for the information.  This should work perfect for my uses.
Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

no64
oh,.... just posted the same question and then found this...

but, I'm still not sure how to make it. Do I have to create a new js file with "my" markup?
Where do I place it and what about the new css?

I'm a bit confused... sorry
Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

mjijackson
Administrator
no64 wrote
Do I have to create a new js file with "my" markup? Where do I place it and what about the new css?

If you wanted to create your own js file to contain your markup (or css), just include it after you include shadowbox.js and before you call Shadowbox.init, like this:

<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript" src="mymarkup.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Inside that file, you would do something like this:

Shadowbox.skin.markup = ''; // your markup goes here

This would then override the default skin. However, this method could be rather inefficient since you first load the original skin and then override it. A much cleaner method would be to just download the source code and modify the Shadowbox.skin class you find at the bottom of shadowbox.js. Then, recompile the code and away you go. Shadowbox uses Ruby for its build tasks, so you just cd into your source directory and do:

rake build

This will create a new build.

Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

no64
so maybe the easiest way is to change the original js file and css  - I think, I will go for that.
So this is the part I have to edit:


#######################################

        markup: '<div id="sb-container">' +
                    '<div id="sb-overlay"></div>' +
                    '<div id="sb-wrapper">' +
                        '<div id="sb-title">' +
                            '<div id="sb-title-inner"></div>' +
                        '</div>' +
                        '<div id="sb-body">' +
                            '<div id="sb-body-inner"></div>' +
                            '<div id="sb-loading">' +


........ etc.

#######################################



I don't know much about Ruby so that wont be any help for me, but I will try my best with manipulating the original markup.
Is it possible to add divs to it and it will still work as it should?
Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

lorne17
Hello,

I am wanting to add a small image to the opposite side as the close button.  I am not familiar with js.  What do I need to edit in order to add an image and have the image be a link?

Thanks,
Lorne
Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

eugenio_milano@yahoo.it
Dear all,
Can You attached an folder with example complete for other Skin?
I don't undestand as modified the page html.
Thanks in advance
Eugenio
Reply | Threaded
Open this post in threaded view
|

Re: Quesiton about skinning in 3.0

arttronics
This posting may be of use to use that describes how to apply a Shadowbox Theme.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.