Skip to content

Instantly share code, notes, and snippets.

@ryanj

ryanj/custom_event_notes.md

Created September 12, 2011 23:31
Show Gist options
  • Save ryanj/1212762 to your computer and use it in GitHub Desktop.
Save ryanj/1212762 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 DevConf Event Customizations
Raw
custom_event_notes.md

#HTML5 DevConf Event page customization#

##Potential customization for the main event page:## ###custom_header###

<style type='text/css'>
html, body {
	height: 100%;
	font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
body {					
	padding:0;
	border:0;	/* This removes the border around the viewport in old versions of IE */
	background:#f7f7f7;								
	font-size:92%;	
}
a {
	color:#000000;
}
a:hover {
	color:#e44d26;
}
#register {
	text-align:center;
}
#register a:link {
	color:#e76f00;
}
#register a:visited {
	color:#e76f00;
}	
#register a:hover {
	color: #e44d26
}	
h1, h2, h3 {
	margin:0 0 0 0;
	padding:0;
}
h1{
	color: #530c0c;
}
h2{
	color: #000;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
}
h3{
	color: #000;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
	
}


p {
	margin:.0 0 0 0;
	padding-left: 15px;
	padding-right: 15px;
	
}

.centeredtext
{
	text-align:center;
}

.centeredimage {
	display: block; 
	margin: auto;
    }   
.centeredimagepadded {
	display: block; 
	margin: auto;
	padding:4px 4px 4px 4px;
    }
.paddedimage {
	padding:7px 7px 7px 7px;
} 

.indentp1
{
	margin-left:30px;
}

.indentp1t
{
	margin-left:30px;
	margin-top:10px;
}

img {
	border:0;
	margin:0;
}

.imgmargin1 {
	 margin:10px 0 5px 0; 
}

#centeredmenu {
/* float:left; this is the magic line to take out for i.e. 7*/
   	width:1004px;
   	margin: auto;
  	overflow:hidden;
   	position:relative; 
   	background: url(http://html5devconf.com/img/tabhighlight.png) #92b1b1 repeat-x;
   	
    }
    #centeredmenu ul {
	clear:left;
 	float:left; 
   	list-style:none;
   	margin:0;
   	padding:0; 
   	position:relative;
   	left:50%;
   	text-align:center;
   	
}

#centeredmenu ul li.first {
	border-left:1px solid #A8A8A8;	
}	

#centeredmenu ul li.last {
	border-right:1px solid #C8C8C8;	
}

#centeredmenu ul li {
   	display:block;
   	float:left;
   	list-style:none;
   	list-style-position: outside;
   	list-style-type:none;
   	margin:0;
   	padding:0;
   	position:relative;
  	right:50%;
  	 	 
}


#centeredmenu ul li a {
	display:block;
   	margin:0 0 0 0px;
  	padding:9px 10px 1px 10px; 	   
   	color:#404040;
   	text-decoration:none;
   	line-height:1.3em;
   	font-weight:bold;
   	border-left:1px solid #C8C8C8;
	border-right:1px solid #A8A8A8;
	height:26px;
}

#centeredmenu ul li a:hover {
	background: url(http://html5devconf.com/img/tabhighlight.png) #a2bdbd repeat-x;
	color:#404040;
	font-weight:bold;

}

#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
	color:#404040;
	background: url(http://html5devconf.com/img/tabhighlight.png) #79a8a9 repeat-x;
	font-weight:bold;	
}


#lc {
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	-ms-interpolation-mode:nearest-neighbor;
}

#rc {
	position:absolute;
	left:994px;
	top:0px;
	z-index:2;
	-ms-interpolation-mode:nearest-neighbor;
}	
		
		
#logo{
	display: block;
    margin: 0 auto;
}



#checkindent{
	padding: 0 0 0 25px;
}


/* column container */
.colmask {
	margin:auto;
	width:1008px;
	min-width:1000px;		/* Minimum width of layout - remove line if not required */	
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	background:#f7f7f7;;
	overflow:hidden;		/* This chops off any overhanging divs */
	margin:auto;
	min-height: 100%;
}

    .contentwrapper {
     	margin: auto;
 	        width: 1000px;  
     	height: 100%;	
	background:#e3e3e3;
	clear:both;
	overflow: hidden;
	padding: 0px 0px 0px 0px; /* put padding in here for ie 7 */
    }

    #leftcolwrapper{

	float:left;
    }	
#indexcol1 {
	background:#f2f2f0;
	margin:26px 0px 0px 26px;
	padding: 14px;
	width:714px;
	overflow: hidden;
}

#indexcol2 {
	background:#f2f2f0;
	margin:26px 0px 0px 26px;
	padding: 14px;
	width:514px;
	overflow: hidden;		
}

#indexcol3 {
	background:#f2f2f0;
	margin:26px 0px 26px 26px;
	padding: 14px;
	width:514px;
	overflow: hidden;		
}	

#indexcol4 {
	float:left;
	background:#f2f2f0;
	margin:26px 26px 26px 26px;
	padding: 14px;
	width:150px;
	overflow: hidden;
}

#indexcol4 ul{
	list-style-image: url(http://html5devconf.com/img/bullet6.png);		
}
	
#buttonsu2 {			
	width: 133px;
	height: 44px;
	background: url(http://html5devconf.com/img/registerbuttons.png) 0 0px  no-repeat;		
	float: left;
	margin: 0px 0px 10px 20px;
	padding: 0px 0px 0px 0px;	
}

a div#buttonsu2:hover {
	background-position: 0 -47px;
}

a div#buttonsu2:active {
	background-position: 0 0;
}

#buttoncontinue {			
	width: 144px;
	height: 58px;
	background: url(http://html5devconf.com/img/continuesprite.png) 0 -116px  no-repeat;		
	margin: auto;
	display: block;
	background-position: 0 -58px;	
}
a div#buttoncontinue:hover {
	background-position: 0 -116px;
}

a div#buttoncontinue:active {
	background-position: 0 0;

}
	
#buttonsupport {			
	width: 144px;
	height: 58px;
	background: url(http://html5devconf.com/img/supportsprite.png) 0 -116px  no-repeat;		
	margin: auto;
	display: block;
	background-position: 0 -116px;	
}
a div#buttonsupport:hover {
	background-position: 0 -58px;
}

a div#buttonsupport:active {
	background-position: 0 0;

}
#buttonbilling {			
	width: 144px;
	height: 58px;
	background: url(http://html5devconf.com/img/billingsprite.png) 0 -116px  no-repeat;		
	margin: auto;
	display: block;
	background-position: 0 -116px;

}
a div#buttonbilling:hover {
	background-position: 0 -58px;

}

a div#buttonbilling:active {
	background-position: 0 0;
}

/* Footer styles */
#footer {
	margin: 0px 0 0 0;
	clear:both;		
}

#footer p {
	font-size: 80%;
	width:1000px;
	margin:auto;
	background: #79a8a9;
	padding:8px 0 8px 0;
	text-align:center;
	color:#000;
	
}
</style>
<div class="colmask"> 		
	<div id="header" style="height:200px;"> 
		<a href="http://html5devconf.com/index.html" ><img id="logo" src="http://html5devconf.com/img/header-15.png" alt="jsdevconf javascript HTML5 developers conference logo"/></a> 
	</div> <!-- end header --> 
	
	<div id="centeredmenu" >	 	
		<ul>	    
			<li class= "first"> <a href="http://html5devconf.com/index.html"> Speakers </a></li> 
			<li> <a class="active" href="http://html5devconf.eventbrite.com/"> Registration </a></li> 
			<li> <a href="http://html5devconf.com/sessions.html"  > Sessions </a></li>				
			<li> <a href="http://html5devconf.com/venue.html" > Venue </a></li> 
			<li> <a href="http://html5-hackathon.eventbrite.com"> Hackathon </a></li> 
			<li> <a href="http://html5devconf.com/press.html" > Press </a></li> 
			<li class = "last" > <a href="http://html5devconf.com/sponsors.html" >Sponsors </a></li>		  
		</ul>	
	</div> <!-- end centeredmenu -->	

	<div class="contentwrapper">

###custom_footer###

</div> <!-- end contentwrapper --> 		
</div>  <!-- end colmask --> 
<div id="footer"> 
	<p>© Copyright 2011 Silicon Valley IGDA Workshops All rights reserved.</p> 		
</div> <!-- End footer div --> 
<style type='text/css'>
/* Header styles */
#header {
            height:200px;
	clear:both;
	float:left;
	width:100%;
	padding: 0;
	margin: 0px 0px 0px 0px;
            background: none;
}
</style>

##Potential customization for the Hackathon event page:## ###custom_header###

<style type='text/css'>
html, body {
	height: 100%;
	font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
body {					
	padding:0;
	border:0;	/* This removes the border around the viewport in old versions of IE */
	background:#f7f7f7;								
	font-size:92%;	
}
a {
	color:#000000;
}
a:hover {
	color:#e44d26;
}
#register {
	text-align:center;
}
#register a:link {
	color:#e76f00;
}
#register a:visited {
	color:#e76f00;
}	
#register a:hover {
	color: #e44d26
}	
h1, h2, h3 {
	margin:0 0 0 0;
	padding:0;
}
h1{
	color: #530c0c;
}
h2{
	color: #000;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
}
h3{
	color: #000;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
	
}


p {
	margin:.0 0 0 0;
	padding-left: 15px;
	padding-right: 15px;
	
}

.centeredtext
{
	text-align:center;
}

.centeredimage {
	display: block; 
	margin: auto;
    }   
.centeredimagepadded {
	display: block; 
	margin: auto;
	padding:4px 4px 4px 4px;
    }
.paddedimage {
	padding:7px 7px 7px 7px;
} 

.indentp1
{
	margin-left:30px;
}

.indentp1t
{
	margin-left:30px;
	margin-top:10px;
}

img {
	border:0;
	margin:0;
}

.imgmargin1 {
	 margin:10px 0 5px 0; 
}

#centeredmenu {
/* float:left; this is the magic line to take out for i.e. 7*/
   	width:1004px;
   	margin: auto;
  	overflow:hidden;
   	position:relative; 
   	background: url(http://html5devconf.com/img/tabhighlight.png) #92b1b1 repeat-x;
   	
    }
    #centeredmenu ul {
	clear:left;
 	float:left; 
   	list-style:none;
   	margin:0;
   	padding:0; 
   	position:relative;
   	left:50%;
   	text-align:center;
   	
}

#centeredmenu ul li.first {
	border-left:1px solid #A8A8A8;	
}	

#centeredmenu ul li.last {
	border-right:1px solid #C8C8C8;	
}

#centeredmenu ul li {
   	display:block;
   	float:left;
   	list-style:none;
   	list-style-position: outside;
   	list-style-type:none;
   	margin:0;
   	padding:0;
   	position:relative;
  	right:50%;
  	 	 
}


#centeredmenu ul li a {
	display:block;
   	margin:0 0 0 0px;
  	padding:9px 10px 1px 10px; 	   
   	color:#404040;
   	text-decoration:none;
   	line-height:1.3em;
   	font-weight:bold;
   	border-left:1px solid #C8C8C8;
	border-right:1px solid #A8A8A8;
	height:26px;
}

#centeredmenu ul li a:hover {
	background: url(http://html5devconf.com/img/tabhighlight.png) #a2bdbd repeat-x;
	color:#404040;
	font-weight:bold;

}

#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
	color:#404040;
	background: url(http://html5devconf.com/img/tabhighlight.png) #79a8a9 repeat-x;
	font-weight:bold;	
}


#lc {
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	-ms-interpolation-mode:nearest-neighbor;
}

#rc {
	position:absolute;
	left:994px;
	top:0px;
	z-index:2;
	-ms-interpolation-mode:nearest-neighbor;
}	
		
		
#logo{
	display: block;
    margin: 0 auto;
}



#checkindent{
	padding: 0 0 0 25px;
}


/* column container */
.colmask {
	margin:auto;
	width:1008px;
	min-width:1000px;		/* Minimum width of layout - remove line if not required */	
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	background:#f7f7f7;;
	overflow:hidden;		/* This chops off any overhanging divs */
	margin:auto;
	min-height: 100%;
}

    .contentwrapper {
     	margin: auto;
 	        width: 1000px;  
     	height: 100%;	
	background:#e3e3e3;
	clear:both;
	overflow: hidden;
	padding: 0px 0px 0px 0px; /* put padding in here for ie 7 */
    }

    #leftcolwrapper{

	float:left;
    }	
#indexcol1 {
	background:#f2f2f0;
	margin:26px 0px 0px 26px;
	padding: 14px;
	width:714px;
	overflow: hidden;
}

#indexcol2 {
	background:#f2f2f0;
	margin:26px 0px 0px 26px;
	padding: 14px;
	width:514px;
	overflow: hidden;		
}

#indexcol3 {
	background:#f2f2f0;
	margin:26px 0px 26px 26px;
	padding: 14px;
	width:514px;
	overflow: hidden;		
}	

#indexcol4 {
	float:left;
	background:#f2f2f0;
	margin:26px 26px 26px 26px;
	padding: 14px;
	width:150px;
	overflow: hidden;
}

#indexcol4 ul{
	list-style-image: url(http://html5devconf.com/img/bullet6.png);		
}
	
#buttonsu2 {			
	width: 133px;
	height: 44px;
	background: url(http://html5devconf.com/img/registerbuttons.png) 0 0px  no-repeat;		
	float: left;
	margin: 0px 0px 10px 20px;
	padding: 0px 0px 0px 0px;	
}

a div#buttonsu2:hover {
	background-position: 0 -47px;
}

a div#buttonsu2:active {
	background-position: 0 0;
}

#buttoncontinue {			
	width: 144px;
	height: 58px;
	background: url(http://html5devconf.com/img/continuesprite.png) 0 -116px  no-repeat;		
	margin: auto;
	display: block;
	background-position: 0 -58px;	
}
a div#buttoncontinue:hover {
	background-position: 0 -116px;
}

a div#buttoncontinue:active {
	background-position: 0 0;

}
	
#buttonsupport {			
	width: 144px;
	height: 58px;
	background: url(http://html5devconf.com/img/supportsprite.png) 0 -116px  no-repeat;		
	margin: auto;
	display: block;
	background-position: 0 -116px;	
}
a div#buttonsupport:hover {
	background-position: 0 -58px;
}

a div#buttonsupport:active {
	background-position: 0 0;

}
#buttonbilling {			
	width: 144px;
	height: 58px;
	background: url(http://html5devconf.com/img/billingsprite.png) 0 -116px  no-repeat;		
	margin: auto;
	display: block;
	background-position: 0 -116px;

}
a div#buttonbilling:hover {
	background-position: 0 -58px;

}

a div#buttonbilling:active {
	background-position: 0 0;
}

/* Footer styles */
#footer {
	margin: 0px 0 0 0;
	clear:both;		
}

#footer p {
	font-size: 80%;
	width:1000px;
	margin:auto;
	background: #79a8a9;
	padding:8px 0 8px 0;
	text-align:center;
	color:#000;
	
}
</style>
<div class="colmask"> 		
	<div id="header" style="height:200px;"> 
		<a href="http://html5devconf.com/index.html" ><img id="logo" src="http://html5devconf.com/img/header-15.png" alt="jsdevconf javascript HTML5 developers conference logo"/></a> 
	</div> <!-- end header --> 
	
	<div id="centeredmenu" >	 	
		<ul>	    
			<li class= "first"> <a href="http://html5devconf.com/index.html"> Speakers </a></li> 
			<li> <a href="http://html5devconf.eventbrite.com/"> Registration </a></li> 
			<li> <a href="http://html5devconf.com/sessions.html"  > Sessions </a></li>				
			<li> <a href="http://html5devconf.com/venue.html" > Venue </a></li> 
			<li> <a class="active" href="http://html5-hackathon.eventbrite.com"> Hackathon </a></li> 
			<li> <a href="http://html5devconf.com/press.html" > Press </a></li> 
			<li class = "last" > <a href="http://html5devconf.com/sponsors.html" >Sponsors </a></li>		  
		</ul>	
	</div> <!-- end centeredmenu -->	

	<div class="contentwrapper">

###custom_footer###

</div> <!-- end contentwrapper --> 		
</div>  <!-- end colmask --> 
<div id="footer"> 
	<p>© Copyright 2011 Silicon Valley IGDA Workshops All rights reserved.</p> 		
</div> <!-- End footer div --> 
<style type='text/css'>
/* Header styles */
#header {
            height:200px;
	clear:both;
	float:left;
	width:100%;
	padding: 0;
	margin: 0px 0px 0px 0px;
            background: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment