Quantcast

Custom Next/Previous/Close/etc. Buttons

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Custom Next/Previous/Close/etc. Buttons

David Kendall
I have figured out how to exchange the "Next" "Previous" and "Close" buttons to custom graphics that I have made (I just changed them in the shadowbox.css file); however, I have not figured out how to get them to display all the way.  The original images are 16 x 16 pixels, I created custom buttons that are 52 x 52 pixels but when I replace them, it keeps the same 16 x 16 pixel display area (only displaying the top corner of my new button).  

How do you change the diplay area and positioning of the buttons because the original ones are just too small in my opinion?

Any help is appreciated,
David
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom Next/Previous/Close/etc. Buttons

arttronics
When it comes to redesigning Shadowbox Skin for your particular needs, here are some tips to help you along.

For readability and reference, here is the Skin Source Code. The large section in RED is the ordered DIV's that can be rearranged as you please.
Once you understand the layout, you can look for that in the minified shadowbox.js version that you most likely are using.

As for changing the allocated space to a new size, it's simple to accomplish in the shadowbox.css file directly or to add an "over-ride" setting in the HEAD document after the call to shadowbox.css has been made like this:

<link rel="stylesheet" type="text/css" href="path/to/shadowbox.css" />
<style type="text/css" media="screen">
     
     #sb-info,#sb-info-inner{height:20px;line-height:20px;}
     #sb-info-inner{font-size:12px;}
     #sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
     #sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
     #sb-nav-close{background-image:url(close.png);}

</style>

Using the provided over-ride will have no change since I've copied the default settings.

The above order is also important, as it's the same order as found in the shadowbox.css file.

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.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom Next/Previous/Close/etc. Buttons

David Kendall
Thanks for your reply.  I was able to resize the divs properly and now I am just playing around with positioning of the buttons.  For example, getting the X-Close button on the upper right and the Next and Previous buttons to stay on the bottom but remain centered regardless of how big or small the content is.

I know little to none about the javascript at this point (however I am trying to teach myself).  I know how to create something in CSS and change where it displays with HTML but I don't know how to find it as the only reference to the shadowbox is in the img tag is rel="shadowbox".

Any tips?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom Next/Previous/Close/etc. Buttons

arttronics
The Advance Search feature here at the forum works great. You can a lot more info from previously posted material. Try a search on add new button or add print feature.

Once you see how they positioned those icons in the DIV's, you can use the same method. Don't have the link saved, but there's also a custom Shadowbox Skin named Dazzle Black that you could look into.

Shadowbox is definitely a hands on piece of good software, so it's all about trial and error.

A tip: Pick either the X-Close button or the Next-Previous buttons to start with. Once you learn how that 1 item functions, you can check to see if it has the same rules for the other buttons.

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.

Loading...