Difference between revisions of "Picture and element positioning"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
old>Admin
Line 5: Line 5:
# Upload a picture to Media files and copy the URL
# Upload a picture to Media files and copy the URL
# Add a Static content element and insert picture reference
# Add a Static content element and insert picture reference
 
#:  <img src=COPIED_URL>
  <img src=COPIED_URL>
 
# Add other fields and merge the with the picture field (above)
# 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

Revision as of 13:10, 25 September 2013

Sample

GaneDiagram.PNG

How to do it

  1. Upload a picture to Media files and copy the URL
  2. Add a Static content element and insert picture reference
    <img src=COPIED_URL>
  3. Add other fields and merge the with the picture field (above)
  4. 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
 }