0 Replies Latest reply on Dec 5, 2018 5:36 AM by someara51

    Cross-Functional Collaboration: Building Buttons in Jive

    someara51 Novice

      VA Pulse has a lot of content types and ways to interact with content. Adding Call-to-Action buttons directly on the page in your Jive places creates a shortcut to the most critical actions for your team and reduces confusion by setting out clear expectations how you expect your users to engage.

       

      There are two main ways to display buttons on your page - HTML or hyperlinked images of buttons.

       

      HTML Buttons

      If you aren't familiar with building buttons with HTML, go ahead and copy and paste the code below to get you started:

       

      Big rectangle buttons with rounded edges:

      <html>
          <head>
              <style>
                  .title {
                      font-family: 'arial';
                      color: #003366;
                      font-weight: bold;
                      font-size: 12px;
                      text-align: left;
                      text-transform: uppercase;
                  }
                  
                  .button {
                      font-family: 'arial';
                      font-size: 18px;
                      font-weight: bold;
                      border: 1px solid white;
                      color: #ffffff;
                      background-color: #014073;
                      width: '90%';
                      padding: 15px 20px;
                      border-radius: 30px;
                      text-align: center;
                      white-space: normal;
                      cursor: pointer; 
                  }
                  
                  .button:hover {
                      background-color: #2598e5;
                      font-weight: 600;
                  }
                  
                  .width-250px{
                      width: 250px;
                      display: inline-block;
                  }
                  
              </style>
          </head>
          <body>
              <center>
              <a href="INSERT URL HERE">
                  <button>About Us</button>
              </a>
              <p></p>
              <a href="INSERT URL HERE">
                  <button>Resources</button>
              </a>
              <p></p>
              <a href="INSERT URL HERE">
                  <button>Ask a Question</button>
              </a>
          </body>
      </html>

       

      Smaller, rectangular buttons:

      <html>
         <head>
             <style>
                 .title {
                     font-family: 'arial';
                     color: #003366;
                     font-weight: bold;
                     font-size: 8px;
                     text-align: left;
                     text-transform: uppercase;
                 }
                 .button {
                     font-family: 'arial';
                     font-size: 14px;
                     font-weight: bold;
                     border: 1px solid white;
                     color: #ffffff;
                     background-color: #014073;
                     width: '90%';
                     padding: 10px 15px;
                     border-radius: 8px;
                     text-align: center;
                     white-space: normal;
                     cursor: pointer;
                     
                 }
                 
                 .button:hover {
                     background-color: #0075a3;
                     font-weight: 600;
                 }
                 .width-250px{
                     width: 250px;
                     display: inline-block;
                 }
             </style>
         </head>
         <body>
             <br>
             <center>
             <a href="INSERT URL HERE" target="_blank">
                 <button>Home</button>
             </a>
             <br>
             <br>
             <a href="INSERT URL HERE" target="_blank">
                 <button>Implementation</button>
             </a>
             <br>
             <br>
             <a href="INSERT URL HERE" target="_blank">
                 <button>Resources</button>
             </a>
             <br>
             <br>
             <a href="INSERT URL HERE" target="_blank">
                 <button>Discussion Forum</button>
             </a>
         </body>
      </html>
                  

       

      Here are a few tips for customizing your buttons:

      • Change the text displayed on your buttons by editing the words between <button> and </button> for each section
      • Change the hyperlink attached to each button by inserting the URL of where you want the button to go between the quotation marks for a href=" " for each section
      • Change the background color by editing the hex code for background-color under the .button section to change the entire button background color
      • Change the background color when you hover over the button by editing the hex code for background-color: # under the .button:hover section

       

      Make sure you do not delete any quotation marks (" ") when you are changing out text! That is the most common mistake that will break your buttons. Made a mistake? Just copy and paste the code above and start over!

       

      Hyperlinked Images

      While a bit tedious, this may be an easier method to display and manage buttons on your page. You can "fake" buttons by hyperlinking images and displaying it on your page by using a Document Viewer tile.

       

      Feel free to copy the examples listed below for two- or three-button layout:

       

      You can make a copy of the examples listed above for your own group by opening the link and clicking on Create a Copy along the right side. Make sure to change the publication location to your group. Hint: You can check mark the box Minor Edit before you publish, so your group followers won't be sent a notification about the publication of your directory.

       

      Note: to help maintain the format, I have inserted the images into a table and made the table "invisible". Make sure you are clicking inside of the right boxes when swapping out images.

       

      You are more than welcome to create your own custom buttons in PowerPoint to hyperlink in the document, but I've also attached several buttons I frequently use to this discussion:

      • Ask a Question
      • Content Library
      • Create New Document
      • Documents Pending Approval
      • Edit Existing Document
      • Request Services
      • Share Best Practices
      • Submit Feedback
      • Upload a File
      • View our FAQs

       

      Have an issues? Leave a comment below and I would be happy to assist!