7 Replies Latest reply on Dec 18, 2019 7:06 AM by tmaurer

    Is there any guidance available for creating custom themes?

    tmaurer Jive SME

      We want to add custom header and footer to our Jive Cloud AWS instance, but it isn't obvious how to make that happen beyond where to go. The page that you reach in the Theme tool just has an HTML and a CSS section for the Header and Footer, but not much in the way of geeral guidance.

       

      I'm not a developer, but am looking for resources to hand off to my web developer.

       

      Anyone have any suggestions here? When I searched, most of what I found was 11 years old, so not super useful (LONG before cloud was a thing).

       

      Thanks in advance!

      -Tracy

        • Re: Is there any guidance available for creating custom themes?
          Andrew Gilleran Jive SME

          Hi Tracy, I think it is easy enough in the theme itself, well for a web dev! You need Admin access. Basically the HTML element references the CSS which gives it the look and feel for you.

          https://[your community]/theme-site.jspa

           

          Below is the code we currently use for our custom header and footer. Your web person should be able to make sense of that. We have a fixed width of 1300 pixels for our content and site. Unfortunately you have no way of testing it. Best thing to do is have your current theme saved. Add in the new one and save it. Publish it to see how it looks then switch back to your existing one real quick before anyone else notices! Yes, that is very useful I know....

          But you can have multiple themes saved so you can switch and review them as required.

           

          Our footer:

           

          Header

           

          Header

          Site Header CSS

             .logo {

                  width: 220px;

          /*        margin: 5px 0 50px 15px;

                  float: left;*/

                  position: absolute;

                  top: 0;

                  left: 0;

                  z-index: 2000;

                  height: 60px;

                  background-color: #fff;

              }

             

              #spacer {

                  width: 200px;

                  margin: 0 10px 70px 15px;

                  float: left;

                  height: 20px;

                  z-index: 2000;

                  bottom: 0;

                  background-color: red;

              }   

             

              .logo img {

                  display: inline-block;

                  margin-top: 20px;

                  margin-left: 15px;

              }

              .custom-header {

                  height: 100px;

                  max-width: 1300px;

                  margin-left: 150px;

                  margin: 0 auto;

                  position: relative;

              }

              #j-cust-head {

              height: 0px;

              }

             

          #j-cust-head+#j-globalNav-bg .j-globalNavLink {

              font-size: 14px;

              -webkit-font-smoothing: antialiased;

              text-transform: none;

          }  

           

          @media screen and (max-width: 40em)

          #j-globalNav #mobile-menu>a>span i {

              background: #333;

          }

          Site Header HTML

          <div class="custom-header">

              <a href="/" class="logo"><img src="/resources/images/palette-1022/logo-top2.png"></a>

              <div id="spacer"> </div>

          </div>

           

          Footer

          Site Footer CSS

          .section {

                      clear: both;

                      padding: 0px;

                      margin: 0px;

              background-color: #0a171e;

              padding: 5px 10px;

          }

           

           

          /*  COLUMN SETUP */

          .col {

                      display: block;

                      float:left;

                      margin: 1% 0 1% 1%;

          }

          .col:first-child { margin-left: 0; }

           

          /*  GROUPING */

          .group:before,

          .group:after { content:""; display:table; }

          .group:after { clear:both;}

          .group { zoom:1; /* For IE 6/7 */ }

          /*  GRID OF TWO */

          .span_2_of_2 {

                      width: 100%;

          }

          .span_1_of_2 {

                      width: 49.5%;

          }

             

              .left {text-align: left}

              .right {text-align: right}

             

          .left p {

              font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;

              font-size: 13px;

              color: white;

              padding-top: 10px,

              }  

             

          .right a{

              display: inline-block;

              text-decoration: none;

              transition:all 0.3s ease;

              margin: 0 10px;

          }

             

          .right a:hover{

              opacity: 0.7;

          }   

           

          /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

           

          @media only screen and (max-width: 480px) {

                      .col {

                                  margin: 1% 0 1% 0%;

                      }

          }

           

          @media only screen and (max-width: 480px) {

                      .span_2_of_2, .span_1_of_2 { width: 100%; }

              .left {text-align: center}

              .right {text-align: center}

          }

           

          Site footer HTML

          <div class="section group">

                      <div>

          <p>@ Fenergo. All Rights Reserved </p>

                      </div>

                      <div>

          <a href="https://fenway.fenergo.com/docs/DOC-46827"><img src="/resources/statics/1000/GDPR.png?a=1527603760296"></a>

                  <a href="https://twitter.com/Fenergo" target="_blank"><img src="/resources/images/palette-1022/tw.png"></a>

                  <a href="https://www.linkedin.com/company/fenergo" target="_blank"><img src="/resources/images/palette-1022/linkedin.png"></a>

                  <a href="https://www.youtube.com/user/FenergoMarketing" target="_blank"><img src="/resources/images/palette-1022/youtube.png"></a>

                  <a href="https://www.facebook.com/Fenergo-265400260316901/" target="_blank"><img src="/resources/images/palette-1022/fb.png"></a>

                      </div>

          </div>

          3 people found this helpful
          • Re: Is there any guidance available for creating custom themes?
            john_reynolds Guru

            Most of what we have accomplished Tracy in this area has been trial and error. We have some best practices that we follow when developing headers and footers, but have not relied on any documentation. Let me see if we can pull something together.

            2 people found this helpful