Editors

training

HTML

<div class="pad10">
    
<h1>Redesign 0613 Coding Examples</h1>
    
<p>These are a few examples of common HTML used in the CMS. For more details about HTML, use <a href="http://www.w3schools.com/html/default.asp">W3 Schools HTML Tutorial</a> as a reference.</p>
    
<p>Separate style from content and just use basic html tags. That way we can easily update all pages by editing one CSS style sheet. This will mean more consistency and less work for you!</p>    

<!-- ################# TITLES ################# -->

<h3 class="button fill">Titles</h3>

<h1>H1 title - already in each page</h1>
<h2>H2 title is reserved as a sub title for the H1</h2>
<h3>H3 new Section title</h3>
<h4>H4 subtitle within a section</h4>
<h5>H5 subtitle with less emphasis</h5>
    
<!-- ################# COPY / TEXT ################# -->

<h3 class="button fill">Copy/Text</h3>
<p>Always wrap copy in &lt;p&gt;paragraph tags&lt;/p&gt; to pick up the CSS default font style.</p>

    <p>In most tables you will not have to use a paragraph tag for a single line of text.</p>
    
    <p> As a rule of thumb, if the font looks odd wrap it in paragraph tags only. Remove any adjacent inline styles  e.g. &lt;span style="font-size:13px"&gt; ... &lt;/span&gt;.</p>
        
<p>All &lt;font&gt; tags must die!</p>   

<!-- ################# LINKS ################# -->
    
<h3 class="button fill">Links</h3>
<p>Code example:<br>
&lt;a title="Descriptive text of link destination" href="/directory/page.aspx"&gt;Descriptive text of link destination&lt;/a&gt;    
    
    <p>Real thing:<br/><a title="Descriptive text of link destination" href="/directory/page.aspx">Descriptive text of link destination</a></p> 
 
<h5>FYI</h5>    
<p>Link copy should be describe the destination. 'Click Here' should be avoided as it's against usability rules - it's vague and does not make sense out of context (not everyone uses a mouse too). 
    
<p>The text in the 'title=""' attribute shows up when hovering over the link.</p>
...

CSS

/* edited agency styles + sharepoint overrides + generic REUSABLE styles - Ian Smith 06-13 */


html body{font-size:62.5%; font-family:Arial, Helvetica, sans-serif!important; line-height:1.3; color:#373737; background:#fff!important; -webkit-text-size-adjust:none;}

.wrapper{width:950px; margin:0 auto; text-align:left; position:relative; left:-68px}

/*===================================================================================*/
/* LINKS =======================-------------------==================================*/
/*===================================================================================*/
a, a:link{text-decoration:underline; outline:none; border:none; -webkit-appearance: none; -moz-outline:0 none;}
a:focus{outline:none; border:none; -webkit-appearance: none; -moz-outline:0 none;}
a:hover{text-decoration:underline;}
a:visited{color:#555}

a, a:link, p, ul, ol, dl{color:#373737; font-family:Arial, Helvetica, sans-serif!important}

.Pseudolink {color:#373737; text-decoration:underline; cursor:pointer;}
.Pseudolink:hover {color:#373737;}

/*override editor tastes for consistency*/
a strong, strong a, b a, a b {font-weight:normal!important}

/*===================================================================================*/
/* TITLES ===========================================================================*/
/*===================================================================================*/
h1{color:#1299ec; font-size:2.4em!important; line-height:1.2; font-family:Arial, Helvetica, sans-serif!important}
h2{color:#373737; font-size:2em!important; font-family:Arial, Helvetica, sans-serif!important}
h3{color:#373737; font-size:1.8em!important; font-family:Arial, Helvetica, sans-serif!important}
h4{color:#373737; font-size:1.4em!important; font-family:Arial, Helvetica, sans-serif!important}
h5{color:#373737; font-size:1.3em!important; font-family:Arial, Helvetica, sans-serif!important}

h4, h5, h6 {text-rendering: optimizelegibility;...

JavaScript

// JavaScript to make the accordion work
// already included on every page on website

(function($){  



//HOMEPAGE ACCORDION
$('h3','.h_accordion').click(function(){
  if($(this).next().is(":hidden")) {
	$('h3','.h_accordion').removeClass('active');
	  	$('.h_acc_contents','.h_accordion').slideUp('medium');
		$(this).addClass('active');
	
	 $(this).next().slideDown('medium');
   }else{
	$(this).removeClass('active');
	  $(this).next().slideUp('medium');
   }
});
//Removed at AH request by AC
//$('h3','.h_accordion').first().trigger('click');



			
})(jQuery);