Search UNCW:

Web Publishing at UNCW

• Web Home
• Contact Us
  • ITSRequest
• Content Managers
• How To
• Official Websites
• Personal and Student Organization Websites
• Sensitive Information
• Template Designs
• Web Accessibility
• Web Applications
• Using Social Media
• Web Content Manager Training

Sample Styles for UNCW web pages

Images without captions

Right

To the right, is an image with the class of "right".

The text will flow around it. Just select it and choose "right" from the style drop-down menu.

Left

To the left, is an image with the class of "left".

The text will flow around it. Just select it and choose "left" from the style drop-down menu.

 

Images with captions

Left

To the left is a captioned photo. The text will flow around it.

To use, copy the code below. Then in Contribute, choose Insert > HTML Snippet from the top menu. Paste the code in the box and click OK. You can then edit the photo by right clicking on it and edit the caption text. Don't forget to edit the alt text for the photo.

<div class="photoboxLFT"><img src="images/img.jpg" alt="photo" />
<p>Caption text here.</p></div>
    

 

Right

To the right is a captioned photo. The text will flow around it.

To use, copy the code below. Then in Contribute, choose Insert > HTML Snippet from the top menu. Paste the code in the box and click OK. You can then edit the photo by right clicking on it and edit the caption text. Don't forget to edit the alt text for the photo.

<div class="photobox">
<img src="images/img.jpg" alt="photo" />
<p>Caption text here.</p></div>
    

Pullquotes

Below are two styles for pullquotes. To use, copy the code below the example. Then in Contribute, choose Insert > HTML Snippet from the top menu. Paste the code in the box and click OK. You can then edit quote text.

<div id="bottomquote">
<p id="quotes">Text of your quote here.</p>
</div>

<div id="bottomquoteGreen">
<p id="quotesGreen">Text of your quote here.</p>
</div>