Difference between revisions of "HQ:Code Documentation"

 
(42 intermediate revisions by 2 users not shown)
Line 8: Line 8:
  
 
<script src="https://igem.org/wiki/index.php?title=HQ:Carrousel.js&action=raw&ctype=text/javascript"></script>
 
<script src="https://igem.org/wiki/index.php?title=HQ:Carrousel.js&action=raw&ctype=text/javascript"></script>
 
 
 
  
  
Line 16: Line 13:
 
<h1> CODE DOCUMENTATION </h1>
 
<h1> CODE DOCUMENTATION </h1>
 
</div>
 
</div>
 
 
 
 
 
 
  
  
Line 39: Line 30:
 
<td bgcolor="#085156" ></td>
 
<td bgcolor="#085156" ></td>
 
<td bgcolor="#00BFD6" ></td>
 
<td bgcolor="#00BFD6" ></td>
 
+
<td bgcolor="#FF9012" ></td>
 +
<td bgcolor="#FFB819" ></td>
 +
<td bgcolor="#F42534" ></td>
 
</tr>
 
</tr>
  
Line 47: Line 40:
 
<td > #085156 </td>
 
<td > #085156 </td>
 
<td > #00BFD6 </td>
 
<td > #00BFD6 </td>
 +
<td > #FF9012 </td>
 +
<td > #FFB819 </td>
 +
<td > #F42534 </td>
 
</tr>
 
</tr>
 
</table>
 
</table>
Line 52: Line 48:
  
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
 
<h3> Icons </H3>
 
<P> The icons used on our website where obtained from <a href="https://thenounproject.com/"> the noun project </a> website. The credits can be found on the list below.</p>
 
 
<ul>
 
<li> <a href="https://thenounproject.com/giuditta.gentile/uploads/?i=532841"> Safety Googles </a> by Giuditta Gentile </li>
 
<li> <a href="https://thenounproject.com/search/?q=star&i=827235"> Star</a> by Eagle Eye </li>
 
<li> <a href="https://thenounproject.com/bernar.novalyi/uploads/?i=684226"> Gabel </a> by Bernar Novalyi </li>
 
<li><a href="https://thenounproject.com/asteryou/uploads/?i=783472">Fireworks</a> by Yeoul Kwon</li>
 
<li><a href="https://thenounproject.com/search/?q=sitemap&i=564708">Sitemap</a> by Pro Symbols </li>
 
<li><a href="https://thenounproject.com/search/?q=community&i=642224">Volunteers</a> by MRFA </li>
 
<li><a href="https://thenounproject.com/search/?q=information&i=1009847">Information</a> by i cons</li>
 
<li><a href="https://thenounproject.com/search/?q=calendar&i=800713">Calendar </a> Nook Fulloption </li>
 
<li><a href="https://thenounproject.com/search/?q=gear&i=716650">Gears</a> by Aya Sofya </li>
 
<li><a href="https://thenounproject.com/search/?similar=10353&i=629844"> Book </a> by MRFA </li>
 
  
 
</div>
 
</div>
Line 87: Line 65:
 
<li>Calendar </li>
 
<li>Calendar </li>
 
<li>Teams </li>
 
<li>Teams </li>
<li>Community
 
<ul> <li> Mentorship </li> </ul>
 
</li>
 
 
 
<li>Competition  
 
<li>Competition  
 
<ul>  
 
<ul>  
<li> Registration</li>  
+
<li>Team Registration</li>
 +
<li>Rules of Conduct</li>
 
<li>Deliverables </li>
 
<li>Deliverables </li>
<li> Tracks </li>
+
<li>Tracks </li>
 
</ul></li>
 
</ul></li>
  
Line 103: Line 78:
 
<li>Human Practices </li>
 
<li>Human Practices </li>
 
<li>Measurement </li>
 
<li>Measurement </li>
 +
<li> Resources </li>
 +
<ul><li>Cloning Help</li></ul>
 
<li>Sponsors
 
<li>Sponsors
 
<ul> <li> Special Offers </li> </ul>
 
<ul> <li> Special Offers </li> </ul>
 
</li>
 
</li>
 
<li> Resources </li>
 
 
 
<li> Sitemap</li>
 
<li> Sitemap</li>
 
</ul>
 
</ul>
Line 114: Line 88:
 
<br><br>
 
<br><br>
  
<p> Here is an example for creating a new <b>application</b> page under the <b>Community</b> namespace and within the <b>Mentorship</b> submenu: <br>
+
<p> Here is an example for creating a new <b>application</b> page under the <b>Teams</b> namespace and within the <b>Mentorship</b> submenu: <br>
<b> 2019.igem.org/Community/Mentorship/Apply </b>  
+
<b> 2019.igem.org/Teams/Mentorship/Apply </b>  
 
  </p>
 
  </p>
  
Line 135: Line 109:
 
The 2019 Menu is loaded by the wiki template and the original code can be found here: <a href="https://2019.igem.org/HQ:Menu">https://2019.igem.org/HQ:Menu</a>
 
The 2019 Menu is loaded by the wiki template and the original code can be found here: <a href="https://2019.igem.org/HQ:Menu">https://2019.igem.org/HQ:Menu</a>
 
The code has been updated so you do not need to include ids for the menu to highlight the current page you are in. Remember to update the menu appropriately when you make a new page and be careful when adding, closing and opening submenus. </p>
 
The code has been updated so you do not need to include ids for the menu to highlight the current page you are in. Remember to update the menu appropriately when you make a new page and be careful when adding, closing and opening submenus. </p>
 +
</div>
  
 
<div class="clear"></div>
 
<div class="clear"></div>
Line 140: Line 115:
  
  
<div class="column half_size" id="adding_menu">
+
<div class="column quarter_size" id="adding_menu">
 
<h3> Adding a menu item </h3>
 
<h3> Adding a menu item </h3>
 
<p> The first tier of the menu is reserved for highly important pages, usually hubs that showcase the subpages within that namespace. To create a menu item on the first tier, you can use the following code. This example creates a menu button for "Colors". </p>
 
<p> The first tier of the menu is reserved for highly important pages, usually hubs that showcase the subpages within that namespace. To create a menu item on the first tier, you can use the following code. This example creates a menu button for "Colors". </p>
Line 146: Line 121:
  
  
<div class="column half_size">
+
<div class="column three_quarter_size">
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
Line 166: Line 141:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
<div class="column half_size" id="adding_submenu">
+
<div class="column quarter_size" id="adding_submenu">
 
<h3> Adding a submenu and submenu items</h3>
 
<h3> Adding a submenu and submenu items</h3>
 
<p> To add another submenu page to the menu, just copy the following code and place it inside the desired submenu wrapper. In this example we are creating three subpages ("Yellow" and"Red") under the "Colors Hub" The "submenu_item subsection_title" class will create an empty button where you can place the title of that particular section of pages.
 
<p> To add another submenu page to the menu, just copy the following code and place it inside the desired submenu wrapper. In this example we are creating three subpages ("Yellow" and"Red") under the "Colors Hub" The "submenu_item subsection_title" class will create an empty button where you can place the title of that particular section of pages.
Line 175: Line 150:
  
  
<div class="column half_size">
+
<div class="column three_quarter_size">
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
Line 225: Line 200:
  
  
<div class="column half_size" id="adding_menu">
+
<div class="column quarter_size" id="adding_menu">
 
<h3> Adding a subsubmenu and subsubmenu items </h3>
 
<h3> Adding a subsubmenu and subsubmenu items </h3>
 
<p> If the subpage you created has pages under it, you will have to add a subsubmenu. First you need to indicate that the subpage, in this case we will use 'Reds' has a subsubmenu by adding the class "with_subsub_menu" and then you will have to follow a similar nesting process to adding a submenu. The following code shows the example of adding 'Colors/Reds/Scarlet'. </p>
 
<p> If the subpage you created has pages under it, you will have to add a subsubmenu. First you need to indicate that the subpage, in this case we will use 'Reds' has a subsubmenu by adding the class "with_subsub_menu" and then you will have to follow a similar nesting process to adding a submenu. The following code shows the example of adding 'Colors/Reds/Scarlet'. </p>
Line 231: Line 206:
  
  
<div class="column half_size">
+
<div class="column three_quarter_size">
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
Line 288: Line 263:
 
</div>
 
</div>
 
</div>
 
</div>
 
 
  
  
Line 567: Line 540:
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
+
<div class="line_divider"></div>
 +
<div class="clear extra_space"></div>
  
  
Line 655: Line 629:
  
 
<div class="column three_quarter_size">
 
<div class="column three_quarter_size">
<img src="https://placehold.it/1050x100">
+
<img src="https://placehold.it/1050x115">
 
</div>
 
</div>
  
Line 689: Line 663:
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
<div class="line_divider"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
 
<div class="column full_size" id="support_classes">
 
<div class="column full_size" id="support_classes">
 
<h2> Support Classes </h2>
 
<h2> Support Classes </h2>
 
+
</div>
  
 
<div class="column half_size"  id="highlight">
 
<div class="column half_size"  id="highlight">
Line 726: Line 701:
 
<li> <b> class="highlight decoration_top"</b> to add a  decorative line on top </li>
 
<li> <b> class="highlight decoration_top"</b> to add a  decorative line on top </li>
 
<li> <b> class="highlight decoration_full" </b> to add a border around the div </li>
 
<li> <b> class="highlight decoration_full" </b> to add a border around the div </li>
<li> <b> class="highlight decoration_light_top"</b> to add a  light color decorative line on top </li>
+
<li> <b> class="highlight decoration_red_top"</b> to add a  red line on top </li>
<li> <b> class="highlight decoration_light_full" </b> to add a light color border around the div </li>
+
<li> <b> class="highlight decoration_red_full" </b> to add a red border around the div </li>
<li> <b> class="highlight decoration_dark_top"</b> to add a  dark color decorative line on top </li>
+
 
<li> <b> class="highlight decoration_dark_full" </b> to add a dark color border around the div </li>
+
 
</ul>
 
</ul>
  
Line 737: Line 711:
  
 
<div class="column quarter_size">
 
<div class="column quarter_size">
<div class="highlight decoration_dark_full" >
+
<div class="highlight decoration_full" >
 
<p>
 
<p>
 
&#60;div class="column quarter_size" > <br>
 
&#60;div class="column quarter_size" > <br>
&#60;div class="highlight decoration_dark_full"><br><br>
+
&#60;div class="highlight decoration_full"><br><br>
 
&#60;/div><br>
 
&#60;/div><br>
 
&#60;/div>
 
&#60;/div>
Line 749: Line 723:
  
 
<div class="column quarter_size">
 
<div class="column quarter_size">
<div class="highlight gray decoration_light_top">
+
<div class="highlight gray decoration_top">
 
<p>
 
<p>
 
&#60;div class="column quarter_size" > <br>
 
&#60;div class="column quarter_size" > <br>
&#60;div class="highlight gray decoration_light_top"><br><br>
+
&#60;div class="highlight gray decoration_top"><br><br>
 
&#60;/div><br>
 
&#60;/div><br>
 
&#60;/div>
 
&#60;/div>
Line 759: Line 733:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
 +
 +
 +
<div class="column full_size">
 +
<h3> Post items </h3>
 +
<p> Post items is a class that has multiple purposes and can be styled and divided as needed.
 +
They can be a standard way of highlighting information, making it easy to recognize types of announcements such as notes or alerts. They are also used as a structural type of class, to easily delineate between a list of items,for example meetups or news items.
 +
</p>
 +
 +
<p>The icons that can be used as part of the post item class are:</p>
 +
 +
<div class="highlight post_item">
 +
   
 +
  <div class="details "> <span class="icon announcement"></span> <div class="title">  announcement</div> </div>
 +
    <div class="details "> <span class="icon alert"></span> <div class="title">  alert</div></div>
 +
    <div class="details "> <span class="icon note"></span> <div class="title"> note </div></div>
 +
    <div class="details "> <span class="icon notice"></span> <div class="title"> notice</div></div>
 +
    <div class="details "> <span class="icon reminder"></span> <div class="title"> reminder</div></div>
 +
    <div class="details "> <span class="icon pinned"></span> <div class="title">  pinned</div></div>
 +
 +
</div>
 +
 +
 +
</div>
 +
 +
<div class="column half_size">
 +
 +
<div class="highlight post_item">
 +
    <div class="details ">
 +
        <span class="icon announcement"></span>
 +
        <div class="title"> Title  </div>
 +
        <div class="date"> Date </div>
 +
</div>
 +
     
 +
          <p>Description </p>
 +
</div>
 +
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
<p> &#60;div class="highlight post_item"><br>
 +
    &#60;div class="details "> <br>
 +
        &#60;span class="icon announcement">&#60;/span><br>
 +
        &#60;div class="title"> Title  &#60;/div> <br>
 +
        &#60;div class="date"> Date &#60;/div> <br>
 +
&#60;/div><br>
 +
     
 +
          &#60;p>Description &#60;/p><br>
 +
         
 +
          &#60;/div>
 +
</p>
 +
</div>
 +
 +
</div>
 +
 +
 +
 +
 +
<div class="clear"></div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight post_item">
 +
    <div class="details">
 +
        <div class="title"> Title </div>
 +
        <div class="date"> Date </div>
 +
</div>
 +
     
 +
          <div class="column quarter_size">
 +
<p>25% </p>
 +
        </div>
 +
       
 +
       
 +
        <div class="column three_quarter_size"> 
 +
<p>65%</p>
 +
</div>
 +
       
 +
<div class="clear"></div>
 +
 +
</div>
 +
 +
</div>
 +
 +
<div class="column half_size">
 +
 +
<div class="highlight gray">
 +
<p>
 +
&#60;div class="highlight post_item"><br>
 +
    &#60;div class="details"> <br>
 +
        &#60;div class="title"> Title &#60;/div> <br>
 +
        &#60;div class="date"> Date &#60;/div> <br>
 +
&#60;/div><br>
 +
     
 +
          &#60;div class="column quarter_size"><br>
 +
&#60;p> 25% &#60;/p><br>
 +
        &#60;/div><br>
 +
       
 +
       
 +
        &#60;div class="column three_quarter_size">  <br>
 +
&#60;p>65%&#60;/p><br>
 +
&#60;/div><br>
 +
       
 +
&#60;div class="clear">&#60;/div><br>
 +
 +
&#60;/div>
 +
 +
 +
</p>
 +
 +
</div>
 +
</div>
 +
 +
 +
 +
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
Line 765: Line 857:
 
<h3>Button </h3>
 
<h3>Button </h3>
 
<p> You can use the button class to highlight a link in your wiki. </p>
 
<p> You can use the button class to highlight a link in your wiki. </p>
 +
  
 
<div class="button" >
 
<div class="button" >
Line 771: Line 864:
 
</a>
 
</a>
 
</div>
 
</div>
 +
 +
 
</div>
 
</div>
  
 
<div class="column half_size">
 
<div class="column half_size">
 +
 +
 +
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
Line 781: Line 879:
 
</p>
 
</p>
 
</div>
 
</div>
 +
 +
 +
 
</div>
 
</div>
  
Line 807: Line 908:
  
  
<div class="clear extra_space"></div>
 
<div class="line_divider"></div>
 
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
  
  
<div class="column full_size">
+
 
<h2> SPECIAL CASES</h2>
+
<p> There are some specific sections in the wiki where certain support classes are called or when a different resource is called. Here a few of them.</p>
+
</div>
+
  
  
 
<div class="column half_size">
 
<div class="column half_size">
<h3> News items </h3>
+
 
<p> News items are displayed in the main page but they are stored and loaded form the News Archive page ( <a href="https://2019.igem.org/Community/News_Archive">https://2019.igem.org/Community/News_Archive</a> ) to avoid losing data.
+
<h3>line divider </h3>
The following code shows how to create a news item on the Archive. Instructions can also be found on the top of page when clicking "edit".
+
<p>This class draws a line to more easily separate sections on a page. You can add <b>"soft"</b> or <b>"dark"</b> to make the line lighter or softer.<br>
</p>
+
This class should ideally be used in between <b>clear extra_space</b> to add the appropiate padding.</p>
 +
 
 
</div>
 
</div>
 +
  
 
<div class="column half_size">
 
<div class="column half_size">
<br>
 
 
<div class="highlight gray">
 
<div class="highlight gray">
<p>
+
  <p>
     &#60; div class="highlight news_item"><br>
+
     &#60;div class="clear extra_space"&#62; &#60;/div><br>
    &#60;div class="news_date"> Month - Day  &#60;/div><br>
+
&#60;div class="line_divider"&#62; &#60;/div><br>
    &#60;h3> Title    &#60;/h3><br>
+
     &#60;div class="clear extra_space"&#62; &#60;/div>
     &#60;p> Description    &#60;/p><br>
+
    </p>
    &#60;div>
+
</p>
+
 
+
 
</div>
 
</div>
 
</div>
 
</div>
 
 
  
  
Line 849: Line 941:
 
<h3> Calendar </h3>
 
<h3> Calendar </h3>
 
<p> The Calendar uses a set of special classes that display and control the viewing of the deadlines in each month. Information is divided in the date of the event and the information pertinent to it. The following code shows how to create a month with one event, the final result can be seen bellow.  
 
<p> The Calendar uses a set of special classes that display and control the viewing of the deadlines in each month. Information is divided in the date of the event and the information pertinent to it. The following code shows how to create a month with one event, the final result can be seen bellow.  
 +
This class can also be use for expand and collapsing content.
 
</p>
 
</p>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
<div class="calendar_month">
+
<div class="collapsible_accordion">
  
<h1> MONTH <div class="calendar_month_access content_control displaying_content"> </div> </h1>  
+
<h1> MONTH <div class="collapsible_accordion_access content_control displaying_content"></div> </h1>  
  
<div class="calendar_month_content" >
+
<div class="collapsible_accordion_content" >
  
<div class="deadline_date">
+
<div class="deadline_date">
##
+
DATE
</div>
+
</div>
  
<div class="deadline_content">
+
<div class="deadline_content">
<h3>Title </h3>
+
<H3> Title</H3>
<p>Lorem ipsum dolor sit amet, mundi similique at nam, ius soleat efficiantur te. Reque errem voluptatibus in his. </p>
+
<p> Description</p>
</div>
+
</div>
  
 +
</div>
  
<div class="clear extra_space"></div>
+
</div>
  
</div>
 
</div>
 
  
  
Line 880: Line 972:
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
&#60;div class="calendar_month"><br><br>
 
  
&#60;h1> MONTH  &#60;div class="calendar_month_access content_control displaying_content"> &#60;/div> &#60;/h1> <br><br>
+
&#60;div class="collapsible_accordion"><br>
  
&#60;div class="calendar_month_content" ><br><br>
+
&#60;h1> MONTH &#60;div class="collapsible_accordion_access content_control displaying_content">&#60;/div> &#60;/h1> <br>
  
&#60;div class="deadline_date"><br>
+
&#60;div class="collapsible_accordion_content" ><br>
##<br>
+
&#60;/div><br><br>
+
  
&#60;div class="deadline_content"><br>
+
&#60;div class="deadline_date"><br>
&#60;h3>Title &#60;/h3><br>
+
DATE<br>
&#60;p> Text &#60;/p><br>
+
&#60;/div><br>
&#60;/div><br><br>
+
  
 +
&#60;div class="deadline_content"><br>
 +
&#60;H3> Title&#60;/H3> <br>
 +
&#60;p> Description&#60;/p><br>
 +
&#60;/div><br>
  
&#60;div class="clear extra_space">&#60;/div><br>
+
&#60;/div><br>
  
&#60;/div><br>
+
&#60;/div>
&#60;/div>
+
 
</p>
 
</p>
 +
</div>
 +
</div>
  
  
</div>
+
<div class="clear extra_space"></div>
 +
 
 +
<div class="column half_size" >
 +
<h3>Read more..</h3>
 +
<p> This class hides text unless the user wishes to read more, therefore it should only be used when the content is not essential for the reader.
 +
</p>
 +
 
 +
<br>
 +
 
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
<span class="read_more_text">
 +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 +
</span>
 +
<span class="read_more"></span>
 +
</p>
 +
 
 
</div>
 
</div>
  
  
 +
<div class="column half_size" >
 +
<div class="highlight gray">
 +
<p>
 +
 +
&#60;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>
 +
 +
&#60;span class="read_more_text"><br>
 +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 +
&#60;/span><br><br>
 +
&#60;span class="read_more">&#60;/span><br>
 +
&#60;/p>
 +
 +
 +
</p>
 +
</div>
 +
 +
</div>
  
  
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
 +
 +
  
 
<div class="column half_size" >
 
<div class="column half_size" >
Line 968: Line 1,096:
 
</div>
 
</div>
  
 +
</div>
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column half_size">
 +
 +
<h3>Image caption</h3>
 +
<p>This class allows commenting on an image to further explain what is happening in the picture.</p>
 +
 +
<img src="https://placehold.it/550x200">
 +
<p class="image_caption">This is caption for the image</p>
 +
 +
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
 +
<p>
 +
&#60;img src="https://placehold.it/550x200"><br>
 +
&#60;p class="image_caption">This is caption for the image&#60;/p>
 +
</p>
 +
 +
</div>
 
</div>
 
</div>
  
Line 974: Line 1,129:
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column half_size">
 +
 +
<h3>On this page</h3>
 +
<p> This class should be used on every page to give users an at a glance list of the topics covered on the page.
 +
 +
<p><span class="on_page"></span><b>On this page</b> you will find information on:</p>
 +
 +
 +
<p>For dividing the sections on the page, you should use the classes <b>clear extra_space</b> and <b>line divider</b> adding the section id to the last clear div. Below is an example.</p>
 +
 
 +
  <p>
 +
    &#60;div class="clear extra_space"&#62; &#60;/div><br>
 +
&#60;div class="line_divider"&#62; &#60;/div><br>
 +
    &#60;div class="clear extra_space"&#62; id="section" &#60;/div>
 +
    </p>
 +
 +
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
 +
<p>
 +
&#60;p><br>
 +
&#60;span class="on_page">&#60;/span>&#60;b>On this page&#60;/b> <br>
 +
you will find information on:<br>
 +
&#60;a href="#link"> section 1 &#60;/a>, <br>
 +
&#60;a href="#link"> section 2 &#60;/a>, and <br>
 +
&#60;a href="#link"> section 3 &#60;/a>.<br>
 +
&#60;/p>
 +
</p>
 +
 +
</div>
 +
</div>
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column half_size">
 +
 +
<h3>Center content </h3>
 +
<p>This class can help center content, it should be used instead the "center" tag, as this is a deprecreated tag in html. </p>
 +
 +
 +
<p class="center_content">Centered Text</p>
 +
 +
<h1 class="center_content">Centered title</h1>
 +
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
 +
<p>
 +
&#60;p class="center_content">Centered Text&#60;/p>
 +
<br><br>
 +
&#60;h1 class="center_content">Centered title&#60;/h1>
 +
 +
</p>
 +
</div>
 +
</div>
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column half_size">
 +
 +
<h3>Multiple links</h3>
 +
<p> This class should be used when a lot of links are being used in a list, for example the list of tracks.  </p>
 +
<br>
 +
<div class="multiple_links">
 +
 +
<h5> List of links </h5>
 +
<ul>
 +
<li><a href="link url"> Link 1</a></li>
 +
<li><a href="link url"> Link 2</a></li>
 +
<li><a href="link url"> Link 3</a></li>
 +
</ul>
 +
 +
</div>
 +
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
<p>
 +
&#60;div class="multiple_links">
 +
<br><br>
 +
&#60;h5> List of links &#60;/h5><br><br>
 +
&#60;ul><br>
 +
&#60;li>&#60;a href="link url"> Link 1&#60;/a>&#60;/li><br>
 +
&#60;li>&#60;a href="link url"> Link 2&#60;/a>&#60;/li><br>
 +
&#60;li>&#60;a href="link url"> Link 3&#60;/a>&#60;/li><br>
 +
&#60;/ul> <br><br>
 +
 +
&#60;/div>
 +
</p>
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column half_size">
 +
 +
<h3>Red text</h3>
 +
<p> Red text can be used to highlight text that is crucial for users to read. For example:</p>
 +
 +
<p class="red_text">Make sure to follow the Safety rules!</p>
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
  <p>
 +
    &#60;div class="red_text"&#62; Make sure to follow the Safety rules! &#60;/div>
 +
</p>
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column half_size">
 +
 +
<h3>Navigation Support</h3>
 +
<p>This class can be used for navigating between pages in a Hub. This is used in the Competition Hub to browse between the team requirements. The structure is the following: Main link (either to the main hub or a particular section) and then links in a list adding the class <b>active_navigation_button</b> to the current page. See the example below.
 +
<br><br>
 +
The goal will be to make this code automatically recognize which page it is currently.*
 +
</p>
 +
 +
<div class="column full_size  navigation_support">
 +
 +
<a href="url">
 +
<div class="navigation_support_title"> 
 +
MAIN LINK
 +
</div>
 +
</a>
 +
 +
<a href="url">
 +
<div class="navigation_button active_navigation_button">
 +
 +
<div class="title_extra" > Link 1 </div>
 +
</div>
 +
</a>
 +
 +
<a href="url">
 +
<div class="navigation_button" >
 +
 +
</div>
 +
<div class="title_extra"> Link 2 </div>
 +
</a>
 +
 +
 +
</div>
 +
 +
 +
</div>
 +
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
 +
<p>
 +
&#60;div class="column full_size  navigation_support"><br>
 +
<br>
 +
&#60;a href="https://2019.igem.org/Competition#requirements"><br>
 +
&#60;div class="navigation_support_title">  <br>
 +
MAIN LINK<br>
 +
&#60;/div><br>
 +
&#60;/a><br>
 +
<br>
 +
&#60;a href="url"><br>
 +
&#60;div class="navigation_button active_navigation_button"><br>
 +
1  <br>
 +
&#60;div class="title_extra" > Link 1 &#60;/div><br>
 +
&#60;/div><br>
 +
&#60;/a><br>
 +
<br>
 +
&#60;a href="url"><br>
 +
&#60;div class="navigation_button" > <br>
 +
2  <br>
 +
&#60;/div><br>
 +
&#60;div class="title_extra"> Link 2 &#60;/div><br>
 +
&#60;/a><br>
 +
<br>
 +
&#60;/div>
 +
 +
 +
</p>
 +
 +
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div id="HQ_info">
 +
<div class="column half_size">
 +
<h3>Hidding content </h3>
 +
<p>If content needs to be hidden for general users while it is being worked on, you can place said section in the <b>HQ_info</b> id. For example this section can only be viewed by members of HQ. </p>
 +
</div>
 +
 +
<div class="column half_size">
 +
<div class="highlight gray">
 +
 +
<p>&#60;div id="HQ_info"><br><br>
 +
 +
&#60;p> Content will be hidden inside this div &#60;/p> <br><br>
 +
 +
&#60;/div>
 +
</p>
 +
 +
</div>
 +
</div>
 +
 +
</div>
 +
 +
 +
<!------------------------------------------------------------------------------------------------->
 +
 +
 +
 +
</div>
 +
</div>
 +
 +
</html>
 +
{{Footer2019}}

Latest revision as of 19:29, 21 March 2019

Loading...

CODE DOCUMENTATION

Website Visuals

Colors

The colors used on 2019.igem.org are:

#00A19B #007B8A #085156 #00BFD6 #FF9012 #FFB819 #F42534

Creating a new page

Pages created in the 2019.igem.org website must follow a naming convention in order fit the website structure and to be reflected properly in the menu system. The naming convention should make them fall under these categories:

  • About
  • Calendar
  • Teams
  • Competition
    • Team Registration
    • Rules of Conduct
    • Deliverables
    • Tracks
  • Giant Jamboree
  • Judging
  • Safety
  • Human Practices
  • Measurement
  • Resources
    • Cloning Help
  • Sponsors
    • Special Offers
  • Sitemap


Here is an example for creating a new application page under the Teams namespace and within the Mentorship submenu:
2019.igem.org/Teams/Mentorship/Apply

If a page that doesn't fall under the previous categories needs to be created, please contact Ana or Traci before creating said page.

Adding a menu item

The first tier of the menu is reserved for highly important pages, usually hubs that showcase the subpages within that namespace. To create a menu item on the first tier, you can use the following code. This example creates a menu button for "Colors".

<div class="igem_menu_item">

<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>

<div class="hub_title">
COLORS
</div>
</a>

</div>

Adding a submenu and submenu items

To add another submenu page to the menu, just copy the following code and place it inside the desired submenu wrapper. In this example we are creating three subpages ("Yellow" and"Red") under the "Colors Hub" The "submenu_item subsection_title" class will create an empty button where you can place the title of that particular section of pages.

<div class="igem_menu_item">

<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>

<div class="hub_title">
COLORS
</div>
</a>

<div class="submenu_access"></div>
<div class="igem_submenu">

<div class="submenu_item subsection_title"> Warm Colors </div>

<a href="https://2019.igem.org/Colors/Red">
<div class="submenu_item">
Red
</div>
</a>

<a href="https://2019.igem.org/Colors/Yellow">
<div class="submenu_item">
Yellow
</div>
</a>

</div>


</div>

Adding a subsubmenu and subsubmenu items

If the subpage you created has pages under it, you will have to add a subsubmenu. First you need to indicate that the subpage, in this case we will use 'Reds' has a subsubmenu by adding the class "with_subsub_menu" and then you will have to follow a similar nesting process to adding a submenu. The following code shows the example of adding 'Colors/Reds/Scarlet'.

<div class="igem_menu_item">

<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>

<div class="hub_title">
COLORS
</div>
</a>

<div class="submenu_access"></div>
<div class="igem_submenu">

<div class="submenu_item subsection_title"> Warm Colors </div>

<a href="https://2019.igem.org/Colors/Reds">
<div class="submenu_item with_subsub_menu">
Reds
</div>
</a>

<div class="submenu_access"></div>
<div class="igem_subsubmenu">

<a href="https://2019.igem.org/Colors/Reds/Scarlet">
<div class="subsubmenu_item">
Scarlet
</div>
</a>
</div>


<a href="https://2019.igem.org/Colors/Yellow">
<div class="submenu_item">
Yellow
</div>
</a>

</div>

</div>

HTML

Hypertext Markup Language, or HTML, is a standardized system for tagging text to create font, color, graphic, and hyperlink styling on websites. Below we will go voer the general tags used to create a standard wiki page

Text

To write text use the < p > tag

<p> Text </p>

Titles

You can add title using the h tag, here is how the different sizes look:

Title one

Title two

Title three

Title four

Title five
Title six

<h1>Title one </h1>
<h2>Title two </h2>
<h3>Title three </h3>
<h4>Title four </h4>
<h5>Title five </h5>
<h6>Title six </h6>

<a href="link url "> LINK </a>

Images

You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server.

<img src="image URL ">

Unordered Lists

Use the following example to create a simple list.
Painting materials:

  • Brushes
  • Acrylic paint
  • Watercolors

<b>Painting Materials</b>
<ul>
<li> Brushes </li>
<li> Acrylic paint </li>
<li> Watercolors </li>
</ul>

Numbered Lists

To create an ordered list, use:
Things to buy:

  1. Milk
  2. Eggs
  3. Flour

<b>Things to buy: </b>
<ol>
<li> Milk </li>
<li> Eggs </li>
<li> Flour </li>
</ol>

Nested Lists

Here is an example of a nested list.

  • Cold Colors
  • Warm Colors
    1. Red
    2. Orange
    3. Yellow

<ul>
<li> Cold Colors </li>
<li> Warm Colors
<ol>
<li> Red </li>
<li> Orange </li>
<li> Yellow </li>
</ol>
</li>
</ul>

Tables

Tables created within in a page already have styling and will display:

Header 1 Header 2
Content A 1 Content B 1
Content A 2 Content B 2

<table>
<tr>
<th> Header 1 </th> <th> Header 2 </th>
</tr>
<tr>
<td> Content A 1 </td> <td> Content B 1 </td>
</tr>
<tr>
<td> Content A 2 </td> <td> Content B 2 </td>
</tr>
</table>

Layout classes

Columns

Layout classes will help structure your page. You will need to call it when you start your page to have the proper layout and make it responsive. There are four types of layout options, which vary between one column up to four in the same row.

  • One column (100%) : class="column full_size"
  • Three quarters column (75%) : class="column three_quarter_size"
  • Two thirds column (66%) : class="column two_thirds_size"
  • Two columns (50%) : class="column half_size"
  • Three columns (33%): class="column third_size"
  • Four columns (25%) : class="column quarter_size"

<div class="column half_size" >
<p> Content goes here </p>
</div>

Support Classes

Highlight

Highlight will need to be declared inside another layout box, this highlight class will make the background gray and the size will be slightly smaller.

<div class="column half_size" >
<div class="highlight">

</div>
</div>

Styling highlight class

There are ways to style the highlight class, you can add:

  • class="highlight gray" to add a gray background
  • class="highlight decoration_top" to add a decorative line on top
  • class="highlight decoration_full" to add a border around the div
  • class="highlight decoration_red_top" to add a red line on top
  • class="highlight decoration_red_full" to add a red border around the div

These classes can be combined to create different effects, as seen in the next examples.

<div class="column quarter_size" >
<div class="highlight decoration_full">

</div>
</div>

<div class="column quarter_size" >
<div class="highlight gray decoration_top">

</div>
</div>

Post items

Post items is a class that has multiple purposes and can be styled and divided as needed. They can be a standard way of highlighting information, making it easy to recognize types of announcements such as notes or alerts. They are also used as a structural type of class, to easily delineate between a list of items,for example meetups or news items.

The icons that can be used as part of the post item class are:

announcement
alert
note
notice
reminder
pinned
Title
Date

Description

<div class="highlight post_item">
<div class="details ">
<span class="icon announcement"></span>
<div class="title"> Title </div>
<div class="date"> Date </div>
</div>
<p>Description </p>
</div>

Title
Date

25%

65%

<div class="highlight post_item">
<div class="details">
<div class="title"> Title </div>
<div class="date"> Date </div>
</div>
<div class="column quarter_size">
<p> 25% </p>
</div>
<div class="column three_quarter_size">
<p>65%</p>
</div>
<div class="clear"></div>
</div>

Button

You can use the button class to highlight a link in your wiki.

<div class="button"> <a href="URL"> REGISTER NOW! </a> </div>

Clear

This class clears the content, it is basically the same as clicking "enter" when you are writing a text.
If you add the "extra_space" class, it will add extra vertical spacing between your divs.


<div class="clear extra_space"> </div>

line divider

This class draws a line to more easily separate sections on a page. You can add "soft" or "dark" to make the line lighter or softer.
This class should ideally be used in between clear extra_space to add the appropiate padding.

<div class="clear extra_space"> </div>
<div class="line_divider"> </div>
<div class="clear extra_space"> </div>

Calendar

The Calendar uses a set of special classes that display and control the viewing of the deadlines in each month. Information is divided in the date of the event and the information pertinent to it. The following code shows how to create a month with one event, the final result can be seen bellow. This class can also be use for expand and collapsing content.

MONTH

DATE

Title

Description

<div class="collapsible_accordion">
<h1> MONTH <div class="collapsible_accordion_access content_control displaying_content"></div> </h1>
<div class="collapsible_accordion_content" >
<div class="deadline_date">
DATE
</div>
<div class="deadline_content">
<H3> Title</H3>
<p> Description</p>
</div>
</div>
</div>

Read more..

This class hides text unless the user wishes to read more, therefore it should only be used when the content is not essential for the reader.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<span class="read_more_text">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>

<span class="read_more"></span>
</p>

Image Slider

Remember to keep the same number of items in both lists so the numbers match and work correctly.

  • 1
  • 2
  • 3

<div id="image_carrousel">

<ul class="image_slider" >
<li class="current_image"><img src="https://placehold.it/550x200"></li>
<li><img src="https://placehold.it/550x200"></li>
<li><img src="https://placehold.it/550x200"></li>
</ul>

<div class="image_controller prev"> </div>
<ul class="image_number">
<li class="current_image_number"> 1</li>
<li> 2</li>
<li> 3</li>
</ul>

<div class="image_controller next"> </div>
</div>

Image caption

This class allows commenting on an image to further explain what is happening in the picture.

This is caption for the image

<img src="https://placehold.it/550x200">
<p class="image_caption">This is caption for the image</p>

On this page

This class should be used on every page to give users an at a glance list of the topics covered on the page.

On this page you will find information on:

For dividing the sections on the page, you should use the classes clear extra_space and line divider adding the section id to the last clear div. Below is an example.

<div class="clear extra_space"> </div>
<div class="line_divider"> </div>
<div class="clear extra_space"> id="section" </div>

<p>
<span class="on_page"></span><b>On this page</b>
you will find information on:
<a href="#link"> section 1 </a>,
<a href="#link"> section 2 </a>, and
<a href="#link"> section 3 </a>.
</p>

Center content

This class can help center content, it should be used instead the "center" tag, as this is a deprecreated tag in html.

Centered Text

Centered title

<p class="center_content">Centered Text</p>

<h1 class="center_content">Centered title</h1>

Multiple links

This class should be used when a lot of links are being used in a list, for example the list of tracks.


<div class="multiple_links">

<h5> List of links </h5>

<ul>
<li><a href="link url"> Link 1</a></li>
<li><a href="link url"> Link 2</a></li>
<li><a href="link url"> Link 3</a></li>
</ul>

</div>

Red text

Red text can be used to highlight text that is crucial for users to read. For example:

Make sure to follow the Safety rules!

<div class="red_text"> Make sure to follow the Safety rules! </div>

Navigation Support

This class can be used for navigating between pages in a Hub. This is used in the Competition Hub to browse between the team requirements. The structure is the following: Main link (either to the main hub or a particular section) and then links in a list adding the class active_navigation_button to the current page. See the example below.

The goal will be to make this code automatically recognize which page it is currently.*

<div class="column full_size navigation_support">

<a href="https://2019.igem.org/Competition#requirements">
<div class="navigation_support_title">
MAIN LINK
</div>
</a>

<a href="url">
<div class="navigation_button active_navigation_button">
1
<div class="title_extra" > Link 1 </div>
</div>
</a>

<a href="url">
<div class="navigation_button" >
2
</div>
<div class="title_extra"> Link 2 </div>
</a>

</div>

Hidding content

If content needs to be hidden for general users while it is being worked on, you can place said section in the HQ_info id. For example this section can only be viewed by members of HQ.

<div id="HQ_info">

<p> Content will be hidden inside this div </p>

</div>