Change the Close button in Animated Thumbnail Gallery
Other image to close the overlay?
Question
How can I change the red button that closes the popup in Animated Thumbnail Gallery?
Answer
To change the close-button in the popup in Animated Thumbnail Gallery, extra CSS code has to be added to your page.
Note: No changed should be made to the general CSS file to prevent unwanted changes from happening in other pages containing Animated Thumbnail Galleries.
Note: The descbelow applies to Dreamweaver CS4. Images and description might differ slightly in other Dreamweaver versions.
The easiest way to do so, is by using the CSS Styles panel within Dreamweaver. Within this panel, click on the New CSS Rule button.
In the first field select the option Compound (based on your selection). In the second field add #IndexGallery_proxy_wrapper .closeBtn as the name for the selector. Make sure the third field is set to (This document only). Click OK to proceed to the next window.
Select the Background category in the Category section. Click Browse and select the image to be used for the Close-button.
Select the Box category in the Category section. Enter the correct Width and Height for the image. This only has to be done if the dimensions for the new image are different then the original image (16 x 16 pixels). In the Margin section, unselect the Same for all option. Now enter the values for the margin in the Top and Left fields. This way the Close-button can be positioned at the location of your choice. Keep in mind that the value for the Left margin equals the Width of the image with the value for the padding added to it.
Click OK and the CSS code will be added to your page. Save your page, upload it to your live server and view the result.
Note: The CSS code that is added to the page can also be added to a seperate CSS file. If this is done, make sure the new CSS-file is included on the page below the general CSS file!
Comments
Be the first to write a comment
You must me logged in to write a comment.