Change Advanced Layer Popup style

Question:

---

Is it possible to add more styles to the Advanced Layer Popup extension? Could the design be changed

 

Answer:

---

It is very easy to change the styles of the Advanced Layer Popup.

• The easiest way is to apply particular style and modify its css file.

For example if you have applied iPod style find the file iPod.css in iPod subfolder of your styles folder. Then modify the properties of .iPod h2 and .iPod .closeHandle

For example, you can change the background image of the Title and the image of the Close button. This could be accomplished by modifying the values for background-image: url

Note: Do not forget to copy the new images into the iPod subfolder of your styles folder. Also you will have to adjust the width and height properties of the .iPod .closeHandle according to the dimensions of the new Close button image. You may also have to adjust the padding properties. The resulting code of your new iPod.css file may look like this:

.iPod
{
}

.iPod h2
{
    padding: 7px 0 8px 9px;
    color: #777;
    background-image: url(NewTitleImage.png);
    background-position: left 0px;
    background-repeat: repeat-x;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.iPod .closeHandle
{
    top: 4px;
    right: 3px;
    width: 21px;
    height: 21px;
    background-image: url(NewCancelButtonImage.png);
}

My images are called NewTitleImage.png and NewCancelButtonImage.png. Also, I have adjusted the width and height properties to 21. And the padding properties: 7px 0 8px 9px

• You can also create your own style:

1. Create subfolder in your styles folder which will contain your files (For example: myStyle)

2. Define css file with styles for the Title and for the close button:
The easiest way to do that is to copy the css file of the one of the already existing and modify it.
For example copy iPod.css file into myStyle folder and rename it to myStyle.css (I have copied the modified iPod.css).

In the myStyle.css file replace the string .iPod with the name of your style: myStyle.  The resulting code of myStyle.css file may look like this:

.myStyle
{
}

.myStyle h2
{
    padding: 7px 0 8px 9px;
    color: #777;
    background-image: url(NewTitleImage.png);
    background-position: left 0px;
    background-repeat: repeat-x;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.myStyle .closeHandle
{
    top: 4px;
    right: 3px;
    width: 21px;
    height: 21px;
    background-image: url(NewCancelButtonImage.png);
}

Note: You will also have to copy NewTitleImage.png and NewCancelButtonImage.png images into myStyle folder.

3. Change the code of Advanced Layer Popup to use the new style:

Now, when your new style is ready you just have to modify the code of your page in order to be used. This include the css file:

<link href="styles/myStyle/myStyle.css" rel="stylesheet" type="text/css" />

And modify the function to call it:

<a href="#" onclick="dmxAdvLayerPopup('Registration Form','ALP_form.asp','','','myStyle','left','bottom',400,500,0,true,true,true,
60,'SlideInRight','FastSlow',2,false,'SlideOutBottomLeft','SlowFast',2,false,'',1,
5,true,true,'#FFFF00');return document.MM_returnValue">ALP</a>

---

DISCLAIMER:

This is extra complimentary content which purpose is to show additional usage that is not part of the product, i.e. it suggests tips for extending the functionality of the product by the users themselves.

DMXzone does not take responsibility to support the suggested content to be fully compatible and working as intended and does not provide support for extended functionality which is not included in the current release of the extension.

It is highly recommended that only more advanced developers use it.