5 Replies Latest reply on Feb 17, 2016 10:22 AM by dougmackay

    Can I create document style extended properties?

    dougmackay

      Crazy question here.

      I'm on Jive Cloud and want to change the styling (css) of the document content. What I want to do, ultimately, is refer to a /resource/... *.css file.

       

      So while documents currently get any good (ie. organized) css scraped out and can only use inline styling, on complex documents this is a pain. A major pain. I'm looking for something that would allow me to call a class or id, specific to my needs within the document content type.

       

      I began looking at options and documents don't give me much. But administratively I see options of "some" document elements that can be tweaked:

       

      Screen Shot 2016-02-11 at 12.23.36 PM.png

       

      This looks promising, but of course there's little available to understand what other properties are available. Is there an extended property that I can add to provide for this style override?

       

      Scenario 1 would be:

      documentcsslink = {some url}

       

      Scenario 2 could be:

      mybutton = style="morecsshere"

        • Re: Can I create document style extended properties?
          Ryan Rutan

          So you can set properties on Spaces...but changing the CSS used to render the the document (or amending the CSS for that specific document) will be difficult in Cloud.  That is usually where Themes comes in. =\  You could try going to the Theme Wizard (system level) and adding in some custom CSS ... and then editing HTML source and dropping in some CSS classes and seeing if they stick around.  I cant remember if CSS classes are stripped, I know styles are preserved.  Your rinse/repeat would be to keep adding style permutations to your system theme css and then manually referencing them in the DOM (*ick) I know, but that's the closest thing I can think of ...

           

          Testing for CSS Class Preserve on Jive 8

          Testing for CSS Style Preserve on Jive 8

          Testing for CSS data-class Preserve on Jive 8

           

          So my third test passed, look at the source code.  You should be able to do a CSS selector using a data-* attribute.  (i.e. data-buttonType="test") and then make a CSS rule in the Custom CSS similar to this here.

          [data-buttonType="test"] {

            /* Attribute has this exact value */

          }

          Will that maybe work?

          1 person found this helpful
            • Re: Can I create document style extended properties?
              dougmackay

              Ugh, ick and yeesh!

               

              This reminds me that we need to have breakfast again at JW.

               

              So do all content pieces have to be prepended with "data"? While that is understandable it just affects whatever scripted content creation gets done from the CMS to Jive.

               

              Yes, classes in doc's are stripped and it forces you into inline styles but that's problematic when the scenario is pulling content from CMS into Jive as a unique doc iD. We have a use case of importing external cms content into formed, automated document updates to unique documents. the inlining of style makes the pages somewhat nice but otherwise unweildly for user-generated updates.

               

              I love this attribute idea and will test it out. I suspect however that any header/footer css that is available doesn't get referred to from the doc content. There's really no way to even link to set css from within a doc. but....if the [data*] might hop that fence we might be in business.

               

              I'll let you know! Looking forward to catching up next month.

                • Re: Can I create document style extended properties?
                  dougmackay

                  Testing shows that styling inside documents is extraordinarily difficult. Not impossible, but awful when considered at scale  for automation. Documents strip out all css styling outside of inline styles and sadly that also strips any workarounds out. Dang xss security and standards!

                   

                  While the theme provides some ability to affect font and color it stumbles when you consider table styling or specific class / id variables people normally use to style their pages.  The ability to set h1...h6 font and color styles is available in the regular themeing area (see "Sample header" and tweak that) and you can set only color and font (of a selected set, not webfonts or urls to custom corporate fonts) so this is rather limited.

                   

                  Now, I've tested with applying the [data-class="customtable"] {stylehere} idea but the problem is placing that {} content elsewhere for reference. This is the in-document html:

                   

                  <h3 data-class="title">Services</h3>

                   

                  and the corresponding content stuck in the "advanced" header css {insert sinking feeling here}:

                   

                  h3[data-class="title"] {

                    font-weight: 400 !important;

                    font-style: normal !important;

                    color:red;

                    font-family: Arial, 'HelveticaNeueLT Std', 'Helvetica Neue', Helvetica, sans-serif;

                    line-height: 1.2;

                  }

                   

                   

                  ...and the result: nothing.

                   

                  Sadly the custom css that is allowed for in the header/footer "advanced" themeing area doesn't cut it as it's only available to the header/footer of the page, not referencable by doc content. No way to hop the fence. Yes, I should have expected that because of XSS and standards...and even considering user-generated CMS content at large: People just don't go with heavy styles inside documents.

                   

                  What IS happening is that the document css refers to a timestamped *.css file that you cannot edit directly. It's only standard fair stuff that comes from the theming interface.

                   

                  So back to my original question, as a last resort...Is it possible to add a document extended property to the admin console to augment the existing css? Has anyone tried that?

                    • Re: Can I create document style extended properties?
                      mcollinge

                      This isn't going to help you, but I thought I'd let you know that we did this for our on-premise Jive 8 (and previously Jive 6) site. We apply certain extra styling and extra features to documents with our 'Design Center' area of the site.

                       

                      Here's an example;

                       

                      Freedom Development Platform for Low-Voltage, 3... | element14

                       

                      designcenter.png

                       

                      We needed these documents to have a very different feel from standard documents & you'll see we inject an extra banner + menu into the pages, remove the author info, versions, and things like that.

                       

                      Class names aren't stripped out of any documents on our site, so we can reference whatever styles we have set up in a separate CSS file. E.g.

                       

                       

                      I'm not sure whether this is because I'm a site admin, or whether we've got a setting to allow this?

                      1 person found this helpful
                        • Re: Can I create document style extended properties?
                          dougmackay

                          Hey Matt,

                          Super helpful, especially for all those on-prem peeps! I appreciate it.

                           

                          Sadly, the cloud instances don't provide that level of access to theming, which you might find as a barrier. When you have access to create override *.ftl and *.css for on-prem (even the joy of mapping specific themes to specific spaces!) that is constrained pretty heavily in the cloud-instance environment.

                           

                          If you do have a cloud preview site I'd suggest doing some serious testing on this scenario.