Difference between revisions of "Team:Cambridge-JIC/Wiki Design"

Line 5: Line 5:
  
 
     <div class="slide" style="min-height:0px">
 
     <div class="slide" style="min-height:0px">
−
         <div style="width: 100%; padding:0% 10%; margin: 30px 50px;color:#123a68">
+
         <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#123a68">
 
<center>
 
<center>
 
<h1 style="line-height:1.295em"> Wiki Design Guide </h1>
 
<h1 style="line-height:1.295em"> Wiki Design Guide </h1>
Line 16: Line 16:
 
<section style="background-color:#123a68">
 
<section style="background-color:#123a68">
 
     <div class="slide" style="min-height:0px">
 
     <div class="slide" style="min-height:0px">
−
         <div style="width: 100%; padding:0% 10%; margin: 30px 50px;color:#fff">
+
         <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#fff">
 
<h2> Using CSS and JS </h2>
 
<h2> Using CSS and JS </h2>
 
As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have uploaded pages that end in _CSS and _JS that are linked to in the html of our other pages. To use a page as a file, simply put the code in HTML and refer to the URL with <span style="background-color:#fff; color:#123a68"> ?action=raw </span> added. This takes the raw code that was entered.
 
As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have uploaded pages that end in _CSS and _JS that are linked to in the html of our other pages. To use a page as a file, simply put the code in HTML and refer to the URL with <span style="background-color:#fff; color:#123a68"> ?action=raw </span> added. This takes the raw code that was entered.
Line 24: Line 24:
 
<section style="background-color:#fff">
 
<section style="background-color:#fff">
 
     <div class="slide" style="min-height:0px">
 
     <div class="slide" style="min-height:0px">
−
         <div style="width: 100%; padding:0% 10%; margin: 30px 50px;color:#000">
+
         <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#000">
  
 
</div></div></section>
 
</div></div></section>
 
<section style="background-color:#123a68">
 
<section style="background-color:#123a68">
 
     <div class="slide" style="min-height:0px">
 
     <div class="slide" style="min-height:0px">
−
         <div style="width: 100%; padding:0% 10%; margin: 30px 50px;color:#fff">
+
         <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#fff">
  
 
</div></div></section>
 
</div></div></section>
 
</html>
 
</html>
 
{{:Team:Cambridge-JIC/Templates/Footer}}
 
{{:Team:Cambridge-JIC/Templates/Footer}}

Revision as of 16:46, 18 September 2015

CAMBRIDGE-JIC

Wiki Design Guide

Make your wiki more beautiful than our team.

This guide briefly dives into incorporating CSS ad Java Script into your wiki, a few graphic design tips, and ways to improve the user experience.

Using CSS and JS

As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have uploaded pages that end in _CSS and _JS that are linked to in the html of our other pages. To use a page as a file, simply put the code in HTML and refer to the URL with ?action=raw added. This takes the raw code that was entered.