Three Image Header

Below is a working example of this template.
You'll find simple instructions of how to use it beneath it.
This particular template does not provide any interaction with its user. However, if you would like to add a link to any of the images or text, you can do so in the editor after following the directions below.

You can customize:
  • Images
  • Text
You cannot customize:
  • Image size
  • Layout
  • Spacing between images


Note: for images to display properly in this template, use these sizes:
  • width: 218px
  • height: 200px

BYUI
BYUI
BYUI


Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in pulvinar tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus varius ornare arcu, eleifend mollis leo ornare fermentum. Sed vitae arcu in tortor vestibulum varius. Nam a malesuada quam. Etiam at arcu et elit posuere vulputate et elementum tellus. Aenean dictum urna nec mauris vulputate facilisis. Nulla cursus imperdiet elit, auctor lacinia dolor porttitor varius. Donec at facilisis lacus. Vivamus ac elit lorem. Sed semper tortor eu odio posuere vestibulum.

Nullam gravida

Nullam gravida, enim eu interdum porta, massa sapien ornare magna, condimentum pulvinar metus ante id mi. Aliquam vel mi magna. Maecenas posuere, elit sed commodo bibendum, orci turpis commodo dui, ac lacinia tortor diam nec arcu. Nunc at dolor urna. Praesent adipiscing, diam nec facilisis condimentum, risus leo consectetur metus, eu feugiat turpis nunc ac dui. Suspendisse gravida volutpat felis, a vehicula lorem scelerisque eu. Nunc scelerisque ante non nisl bibendum fringilla. Quisque condimentum faucibus sapien nec porttitor. Nunc ornare ornare pellentesque. Suspendisse id sodales ligula.


Instructions:

  1. Copy the code below.
  2. Find page in Ingeniux you want to use this template on.
  3. Click 'HTML'.
  4. Paste the code you copied in step 1.
  5. Click 'Update'.
  6. Customize the image sources, text, etc.
        <style>
            #bodycontainer {
                padding-top:140px;
                width:100%;
            }
            #innercontainer{
                width:1000px;
                margin:auto;
            }
            #container710{
                /*                background-color: lightgray;*/
                height:600px;
            }
            #left230{
                background-color:#326BA9;
                height:500px;
            }
            .gallerybox{
                -moz-box-shadow: 0px 0px 5px #000000;
                -webkit-box-shadow: 0px 0px 5px #000000;
                box-shadow: 0px 0px 5px #000000;
                border:1px solid #777777;
                overflow:auto;
                padding:10px;
                margin:4px;
            }
            .picbox{
                background-color:lightblue;
                margin:0px 5px;
                float:left;
                width:218px;
                height:200px;
                border: 1px solid #787878;
            }
            img{
                padding:0px;
                margin:0px;
                border:none;
            }
            .picboxfirst{
                margin-left:0px;
                padding-left:0px;
            }
            .picboxlast{
                margin-right:0px;
                padding-right:0px;
            }
        </style>
        <div id="container710" class="span-18">
            <div class="gallerybox">
                <div class="picbox picboxfirst"><img src="http://www.byui.edu/Images/Campus Message Template.jpg" title="BYUI" alt="BYUI" width="218" height="200"/></div>
                <div class="picbox"><img src="http://www.byui.edu/Images/Academic-Advising/icons/advising_map_landing_image.jpg" title="BYUI" alt="BYUI" width="218" height="200"/></div>
                <div class="picbox picboxlast"><img src="http://www.byui.edu/Images/business-communication/Europe scouting trip 2012 436.JPG" title="BYUI" alt="BYUI" width="218" height="200"/></div>
            </div>
            <br/><br/>
            <h2>Lorem ipsum dolor sit</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Curabitur in pulvinar tortor. Cum sociis natoque penatibus
                et magnis dis parturient montes, nascetur ridiculus mus. 
                Vivamus varius ornare arcu, eleifend mollis leo ornare fermentum. 
                Sed vitae arcu in tortor vestibulum varius. Nam a malesuada
                quam. Etiam at arcu et elit posuere vulputate et elementum 
                tellus. Aenean dictum urna nec mauris vulputate facilisis. 
                Nulla cursus imperdiet elit, auctor lacinia dolor porttitor 
                varius. Donec at facilisis lacus. Vivamus ac elit lorem. Sed 
                semper tortor eu odio posuere vestibulum.
            </p>
            <h2>Nullam gravida</h2>
            <p>
                Nullam gravida, enim eu interdum porta, massa sapien ornare 
                magna, condimentum pulvinar metus ante id mi. Aliquam vel mi
                magna. Maecenas posuere, elit sed commodo bibendum, orci 
                turpis commodo dui, ac lacinia tortor diam nec arcu. Nunc 
                at dolor urna. Praesent adipiscing, diam nec facilisis 
                condimentum, risus leo consectetur metus, eu feugiat turpis
                nunc ac dui. Suspendisse gravida volutpat felis, a vehicula 
                lorem scelerisque eu. Nunc scelerisque ante non nisl bibendum
                fringilla. Quisque condimentum faucibus sapien nec porttitor.
                Nunc ornare ornare pellentesque. Suspendisse id sodales ligula.
            </p>
        </div>