This page has style options that can be done inline to existing components. To apply a style, click the Source button on the WYSIWYG editor and paste the style classes you wish to use to the end of the page code.
Vertical Tabs
These style attributes turn the horizontal tabs into vertical tabs. Adjust the 20% (at both spots) to increase or decrease the width of the tabs.
<style class="text/css">
.ui-tabs .ui-tabs-nav { width: 20%; float: left; }
.ui-tabs .ui-tabs-nav li { width:100%; }
.ui-tabs .ui-tabs-panel { margin-left: 20%; }.ui-widget-content { border: none; border-top: 1px solid #ccc; }
</style>
Content in tab 1.
This is the content in tab 2.
And now this is the content for tab 3.
Accordions
Use these style attribute to change the color of Accordions. This code makes accordions white with Navy text. Change colors to your preference, but make sure they have anough contrast to pass ADA requirements.
<style class="text/css">
.ui-accordion .ui-accordion-header { background-color: #fff; }
.ui-accordion .ui-accordion-header a { color: #00a; }
.ui-state-active,
.ui-accordion .ui-state-active,
.ui-accordion .ui-widget-content .ui-state-active,
.ui-accordion .ui-widget-header .ui-state-active { background: #fff; }
.ui-accordion .ui-state-active a,
.ui-accordion .ui-widget-content .ui-state-active a,
.ui-accordion .ui-widget-header .ui-state-active a { color: #00a; }
.ui-icon-triangle-1-e { background-position: -48px -192px!important; }
.ui-icon-triangle-1-s { background-position: -64px -192px!important; }
</style>
Content of accordion 1.
Content of accordion 2.
Image Swap on Rollover
Here's a very simple way to add a rollover effect to an image.
Add this JavaScript code to create the effect. Then add the onmouseout and onmouseover attributes to the image as shown above.
<script type="text/javascript">
function rollover(my_image)
{
my_image.src = "eagle.jpg";
}
function mouseaway(my_image)
{
my_image.src = "goldeneagle.jpg";
}
</script>
Image with Text Rollover
This is a rollover effect with text. Put the images into a bullet list with class name img-list and wrap the text in span tags as shown in the sample code. The first span tag must have the class name text-content.
<ul class="img-list">
<li><a href="/"><img alt="Golden Eagle Statue" src="campus_eagle.jpg" /> <span class="text-content"><span>Eagle Statue</span></span></a></li>
<li><a href="/"> <img alt="Main Walkway" src="campus.jpg" /> <span class="text-content"><span>Main Walkway</span></span></a></li>
</ul>
Then paste this CSS code to apply the rollover effect. Note that there are width and height values in the CSS code that will need to be adjusted to match the size of the images you are using. Comments have been added to the CSS to indicate the values that need to be adjusted.
<style type="text/css">
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position: relative;
}
ul.img-list li {
display: inline-block;
height: 120px; /* change this to match the image height */
margin: 0 1em 1em 0;
position: relative;
width: 120px; /* change this to match the image width */
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 120px; /* change this to match the image height */
left: 0;
position: absolute;
top: 0;
width: 120px; /* change this to match the image width */
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
@media (max-width: 767px) {
span.text-content {
top: 120px; /* change this to match the image height */
height: 60px; /* set a height that fits your text */
opacity: 1;
}
ul.img-list li {
height: 180px; /* this needs to be the combined image height and text box height */
}
}
</style>
Textarea with Copy Button
<input type="button" value="Copy" onclick="copy_to_clipboard('html');">
<script>
function copy_to_clipboard(id)
{
document.getElementById(id).select();
document.execCommand('copy');
}
</script>