13 Replies Latest reply on Sep 18, 2014 5:22 PM by egotte

    CSS on the Recent Activity widget

    kswallow

      Hi, we're looking to change the CSS on the Recent Activity widget to have more of a visual impact. For example, some things we may want to change are the font style, font size, and especially the size of the post thumbnails (photos, videos) within the recent activity widget. From talking with our interactive developer, it sounds like there are additional CSS files and templates that the Recent Activity widget uses to call the thumbnail image size. It's difficult to find the files we'd need to change in the admin console so I was hoping someone could point us in the right direction (e.g..> which files control the display of the thumbnails?)

       

      Thanks,
      Kevin

        • Re: CSS on the Recent Activity widget
          sachac

          Chrome's right-click menu has an Inspect Element that's super handy for figuring out which CSS class to override. For example, the profile picture thumbnails were way too big for us, so I added .j-act-grouped .j-act-prof-image a.j-prof-img { max-width: 133px; min-width: 60px; height: 100px; } to /soy/template/css-custom.soy. Hope that helps!

            • Re: CSS on the Recent Activity widget
              kswallow

              Thanks, Sacha - this helps and we have been using the Inspect Element. However, specifically for the container images that show up with a blog post or uploading an image file, we were having trouble with the actual CSS class that controls thumbnail image size. This is different than the user profile image. Any ideas on which class that may be?

               

              Thanks again!

               

              -Kevin

                • Re: CSS on the Recent Activity widget
                  kswallow

                  Hi Sacha, so I think to clarify, we're looking for the place in the admin console where we can change the maxHeight and maxWidth in the servlet that displays the images. I can't seem to find that in the admin console. Do you know where that might be?

                   

                  Thanks,
                  Kevin

                  • Re: CSS on the Recent Activity widget
                    sachac

                    Hmm... wouldn't you be able to use the parent elements' class to select the img, even if the img doesn't have a class on it? For example, the one for file attachments is .j-attached-items li.j-attached-document a img , so you can probably max-height and max-width that one.

                      • Re: CSS on the Recent Activity widget
                        mprzybylski

                        Hey Sacha,

                        I'm the aforementioned developer Kevin is talking about above.  In regards to the issue at hand, if you scale the image through the CSS you're bound to get back an artifacted image because you're not actually scaling the image itself, you're scaling the CSS that houses the image.  The image itself comes from a servlet that has code as follows:

                         

                        img src="/servlet/JiveServlet?bodyImage=true&contentType=image&maxHeight=70&maxWidth=500&binaryBodyID=230497" height="70" alt=""

                         

                        As you can see, controlling the maxHeight and maxWidth of the URL of the image for the servlet actually resizes the image itself, not just the CSS on the image, therefore producing a brand new asset that is correctly sized.  If you remove the height property on the image tag and just let it size through the query string parameters for maxHeight and maxWidth you get the desired result.  This, of course, is not a CSS change rather a change in the template somewhere where the URL to this image is actually being generated.  I'm trying to figure out where the template exists that generates these images so that I can see if the setting of the maxHeight is hardcoded in the template to output 70 or if there is a setting somewhere in the admin panel for this widget that allows you to set a global image maxHeight property so that when all images are created they use the maxHeight that was specified in the admin.