Website Notes

Featured Images

Should all be 1280 wide and somewhere between 720 and 550 high. in order to work in all spots. ( height can be taller but will be cut off at 720… centered )

Project single

Insert block images have to be EXACTLY the right size to work. Widths and heights are percentages for responsiveness.
415×265 = 32.421875%
240×265 = 18.75%
280×265 = 21.875%

Tags

New tags must have their abbreviation entered into the tag description area.

Big Movie on Amar page

This requires 2 video types, mp4 and webm. Converting a mp4 to a webm can be done easily at https://convertio.co/mp4-webm.
Best results will be with movies that are 1280 x 720.

Single Project Pages

On this page you will first enter the necessary project information, title, researcher, intro, etc… You will then use the “Add a Section” button to choose a:

  1. Content section,
  2. Quote insert,
  3. Images insert,
  4. Left Column Insert – note the “vertical offset” which is set to -100, this pushes the insert box up from its original spot.

In the admin, these sections can minimized by clicking the section heading and re-ordered via drag & drop.

Next is the Publications area which works similarly. Choose to show a Link to a News article or a link to an OffSite article. Minimize and re-order via drag & drop.

Single News Pages

These are somewhat normal Posts with a few additions. Along with the author and date fields there is also the option to select a featured project insert. You can also add fotenotes to the left-hand column with markers within the text.

Featured project insert

If a Project is selected from the dropdown it will appear in the left-hand column.

Footnotes:

These require HTML markup, please use “Text” mode in your editor. The footnote itself requires markup as does its containing element.

First: Any paragraph that will be holding a footnote must have a class=”footnote-wrap”. This is so we have something to anchor the floating footnote to.

Locate or write the paragraph you intend to place footnotes in then encapsulate it with the HTML paragraph tag and the CSS class as follows:


<p class="footnote-wrap">Heres all your text, several sentences bla bla bla</p>

Now add your footnote code anywhere you like within the flow of text in your “footnote-wrap” paragraph.

The format is as follows:


<span class="footnote">
  <span class="marker">1</span>
  <span class="note">01. Footnote about the article. Donec id elit non mi porta gravida at eget.</span>
</span>

Note: you may want to condense yours to one line, mine is tabbed for readability.

Plop this whole chunk of text and code anywhere you need it to be.

Everything is first wrapped in a span with class=”footnote”

Within this span we have two spans, one with class=”marker” and another with class=”note”. Quite self explanatory. Markers can be anything you like though single numbers will work best within the little circle.

Custom icons and shapes



<span class="arrow-right"></span> 

<span class="circlearrow-up"></span> 
<span class="circlearrow-down"></span> 
<span class="circlearrow-left"></span> 
<span class="circlearrow-right"></span> 

<div class="letter"><div></div></div> 


<div class="close"></div>

A Hanging Quote

A hanging quote can be achieved by using the following code instead of an opening double quote.
Note, this only works in certain areas so be sure to double-check your results if you add one.


  <span class="hangquote-left"></span>

Old Site!