Difference between revisions of "Picture and element positioning"
Jump to navigation
Jump to search
old>Admin (Created page with '=== Sample === === How to do it === # Add a Static content element # Add other fields and merge with picture field # Create a stylesheet extension and link to the solution #* …') |
old>Admin |
||
| Line 3: | Line 3: | ||
=== How to do it === | === How to do it === | ||
# Add a Static content element | # Upload a picture to Media files and copy the URL | ||
# Add other fields and merge with picture field | # Add a Static content element and insert picture reference | ||
<img src=COPIED_URL> | |||
# Add other fields and merge the with the picture field (above) | |||
# Create a stylesheet extension and link to the solution | # Create a stylesheet extension and link to the solution | ||
#* | #* The outer element of the picture should have the following CSS | ||
#* | |||
position: relative; | |||
#* The picture and fields inside should have the following CSS | |||
#NB_ELEMENT NAME { | |||
position: absolute; //relative to outer element | |||
left: 10px; | |||
top: 10px; //Above input box | |||
} | |||
#VB_ELEMENT NAME { | |||
position: absolute; //relative to outer element | |||
left: 10px; | |||
top: 10px; //Below descriptive label | |||
} | |||
Revision as of 12:03, 25 September 2013
Sample
How to do it
- Upload a picture to Media files and copy the URL
- Add a Static content element and insert picture reference
<img src=COPIED_URL>
- Add other fields and merge the with the picture field (above)
- Create a stylesheet extension and link to the solution
- The outer element of the picture should have the following CSS
position: relative;
- The picture and fields inside should have the following CSS
#NB_ELEMENT NAME {
position: absolute; //relative to outer element
left: 10px;
top: 10px; //Above input box
}
#VB_ELEMENT NAME {
position: absolute; //relative to outer element
left: 10px;
top: 10px; //Below descriptive label
}