Customize Popup Box
In Paul's JQuery script there is a section that outlines the CSS, the parameters that determines the look and feel of the popup box. I will show you what each CSS line will do to the popup and this will allow you to customize the popup to your theme or other specific requirements.
There are two CSS sections:
- #loadTip - this grouping has to do with the shell of the popup.
- #tipContent - this grouping has to do with the inner part of the popup.
#loadTip
background: #FF0000;
- This will change the major band around the box. Notice what is in red is the background that will change. Also notice that the very edge is blue and that border is changed with another attribute.
color: #FF0000;
- This will change the color of the text in the outer part of the box. Notice that click to close is red.
border: 10px solid #FF0000;
- This will change the border color and the thickness of the border. In this example I changed the border width from 3 to 10 and I changed the color to red.
font-size: 20px;
- This will change the size of the text in the outer layer of the popup box.
padding: 3px;
- This will change the amount of spacing around the border.
width: 600px;
- This will determine the width of the box. The hight is dynamic and will exand depending on the amount of content.
text-align: left;
- This will determine the placement of the text. I can be left, center, or right justified.
display: none;
position: absolute;
- Do not change these two attributes. This will cause the popup to display in strange places.
#tipContent
background: #6F9DD9;
- This will change the background color to for the label names in the popup. It will not change the background for the field content.
padding: 10px;
- This will add spacing on the inner content between the border and the field data.