Canopi Forums
PrevPrev Go to previous topic
NextNext Go to next topic
Last Post 25 Apr 2017 12:27 PM by  Gregory McLoughlin-Wilden
Cool Post it Notes
 0 Replies
Sort:
You are not authorized to post a reply.
Author Messages
Gregory McLoughlin-Wilden
New Member
New Member
Posts:12


--
25 Apr 2017 12:27 PM

    Adding a cool Post it Note

    There are four parts to this;

    1. The HTML that goes on your page
    2. The CSS to draw the Post it Note (can go in your page or the global template
    3. The JQuery to make it draggable (optional
    4. The Linked font (optional)

    Items 2 - 4 can go in either the content template or the Global template. If you you put it on your local page template then you need to change the editing mode to IDE (which you can't undo) otherwise the Javascript gets ripped out every time you save the content :(

    On our sites we just add items 2 - 4 to the 'Plain Text' global template, so if you want to add them to 'Accordions' etc you'll need to add them to those as well. Or just put a hidden plain text panel on the page.

    Part 1 - The html you put in your content

    Put this into your HTML.

     

    You can see that you can set the location with the left and bottom offsets. These values will depend on where you insert the above code.

     

    If you don't want it draggable then, just remove 'draggable' from the top

     

     

     

    Part 2 - The CSS to make it all look pretty

     

    You can put this CSS on the page, in the Site CSS, or in the global content panel template. We prefer the global content template, as it's more mobile.

     

    .postit {
      line-height: 1;
      text-align:center;     
      width: 275px;    
      margin: 25px;    
      min-height:250px;
      max-height:250px;
      padding-top:35px;
      position:absolute;   
      border:2px solid #E8E8E8;  
      border-top:60px solid #fdfd86;;
      font-family:'Reenie Beanie';    
      font-size:28px;      
      border-bottom-right-radius: 60px 5px;
      display:inline-block;    
      background: #ffff88; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
    background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

     

    }
     
    .postit:after {     
       content: "";
      position:absolute;
      z-index:-1;
      right:-0px; bottom:20px;
      width:200px;
      height: 25px;
      background: rgba(0, 0, 0, 0.2);
      box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
    -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
          -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
             transform: matrix(-1, -0.1, 0, 1, 0, 0);
    }

     

    .postrotate {
            -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Safari */
    transform: rotate(10deg);
    }

     

     

     

    Part 3 - the Font

     

    This part isn't essential, but gives the notes a nice, handwritten feel.

     

     

     

     

     

     

     

     

    This needs to go into you template.hml part of your global template, or into the html of the page you're building.

     

     

     

     

     

     

     

    Part 4 - making it draggable

     

     

     

    To make your post it note draggable, you need to add this to the script.js part of your template of page panel

     

     

     

    /* make a

     

     

     

    draggable */
      $( function() {
        $( ".draggable" ).draggable();
      } );

     

    /*

    This actually makes any

    draggable, so have some fun.

     

     

    So, there you go, have some fun.

    If you can't edit your global templates, then you can still do this on any content panel, you just have to add all of the above to each page you want a draggable post it note.

     

     

     

    0
    You are not authorized to post a reply.


    Register for more features

    Register now to post your comments.

    If you Register on the Canopi site you can post questions and comments to the forum.