5 Replies Latest reply on Mar 14, 2013 2:56 PM by sonny.lau

    Adding a CSS file to an Overlay

      I'm in the process of adding some additional functionality to a Jive instance and am using an overlay to do so. As part of this, I have created new Soy file which will be called by some of Jive's existing Soy classes. Everything's working quite well now except I don't know where I should put the styling for the HTML elements in my Soy file. Is there any particular way I'm supposed to do this?

        • Re: Adding a CSS file to an Overlay
          skushawaha

          Hi Sonny,

           

          You can put the css styling in the template's <head> section of the soy file that you have created for the overlay.

           

          For example:

           

          {template .yourTemplateName}

              <head>

                  <title>Overlay Tile</title>

                 

                  <style type="text/css">

                      {literal}

                      .table-container {

                          background: white;

                          border: 1px solid #DADADA;

                          border-bottom-left-radius: 6px 6px;

                          border-bottom-right-radius: 6px 6px;

                          border-top-left-radius: 6px 6px;

                          border-top-right-radius: 6px 6px;

                          margin: 0px 0px 22px;

                          padding: 10px 5px;

                      }

                 </style>

               </head>

           

                 <<table id="table-container-id" class="table-container">

                      <tr>.....</tr>

                      <td>.....</td>

                  </table>

           

          </template>

           

          Thanks,

          Sanjay

            • Re: Adding a CSS file to an Overlay
              mcollinge

              The only problem there is that the CSS is in the header of the page all the time; it's not cached by the browser (and CDN if you use one) by having it in a separate file. In our 4.5.7.1 theme we have a separate custom CSS file we pull into the main template. We're just reviewing how we do this as we do our Jive 6 upgrade. There's an FTL called custom-css.ftl which at first looked like it'd fit the bill, but it's essentially just injecting the CSS into the page header, which is less than ideal. I'm hoping to find something better, without having to alter the main templates to include my own CSS file.

                • Re: Adding a CSS file to an Overlay

                  Yeah, the reason I'm asking here is because I'm currently including the style inline by defining a .style template within my Soy namespace and calling that to insert the CSS above my HTML. I had thought about the custom-css.ftl approach however I thought that was only for templates and wasn't sure about how I would do it for an overlay. I could also use a plugin to include a CSS file which will be called all the time however that also didn't seem like the best way.

                   

                  My current project doesn't have much styling so this a fairly small problem however I thought that it would be better to ask now than to come across this in the future, perhaps in a different project, when it would become a larger problem.