11 Replies Latest reply: Jun 7, 2012 12:08 PM by bkuske RSS

    Jive 5 Icons

    Brad Fitzgerald

      Is there a document/resource that contains all the Jive5 icons in each state.  For example, a discussion has an icon, but an answered question has a version of that icon.

       

      The reason I ask is because we are considering creating a whole set of new icons for Jive 5 that work with our theme and I'd like the graphic designer to understand the breath and depth of the project by looking at all the Jive 5 icons first.

        • Re: Jive 5 Icons
          Ryan Rutan

          I would just download the Sprite PNG files.  All inclusive files...that you can use to swap out icons.  Do a search for *-sprite* in the WAR file...and you'll see all that you need.  Let me know if you need more detail.

            • Re: Jive 5 Icons
              Brad Fitzgerald

              We don't have 5 yet though... :-) The thing that makes it hard in the sprite file is that it isn't totally clear what all the icons are used for.  Th biggies are obvious and the 3 sprites files are for using those icons at different sizes.

               

              For example from 4.5:

              randomsprite.pngrandomsprite2.png

               

              What are these used for? Do I need to have a designer create them in 3 sizes?

                • Re: Jive 5 Icons
                  Amber Orenstein

                  Each instance of Jive will have core CSS styles — /5.0.x/styles/jive-icons.css.

                   

                  Example: https://community.jivesoftware.com/5.0.2/styles/jive-icons.css

                   

                  You can use this as a guide, the class names should help you figure out what they're for if you need guidance. Just find the x,y coordinate in Photoshop, then search the style list for a corresponding class name. I usually search by y coordinates (because the "rows" are all denoted at the top of the CSS file) until I hit the right x coordinate result, then the classname is usually pretty descriptive.

                   

                  Although, please note, because these icons are used in many places throughout the entire application (including emails), these would be customized through an application overlay rather than a theme-level customization (as opposed to the UI sprites which are only used in the web browser, and can be customized via theming).

                    • Re: Jive 5 Icons
                      Amber Orenstein

                      Oh, and the layered PSD in the resource kit (resourceKit.zip in the .war) also has the classnames on the layers as well…

                      • Re: Jive 5 Icons
                        bkuske

                        Amber,

                         

                        Which UI sprites can be updated via theming? It doesn't appear that the directory containing the psd's included with the resource kit becomes a part of the theme ZIP file that gets uploaded during the theming process.  Am I mistaken?

                          • Re: Jive 5 Icons
                            Amber Orenstein

                            Which UI sprites can be updated via theming?

                            j-ui-sprite is the UI sprite.

                             

                             

                            Sorry, I don't quite understand…

                            It doesn't appear that the directory containing the psd's included with the resource kit becomes a part of the theme ZIP file that gets uploaded during the theming process.

                            Can you clarify what you mean by “the theming process?”

                              • Re: Jive 5 Icons
                                bkuske

                                When you download the resource kit, all the psd's are in the "source_art" folder, including the j-ui-sprite.psd you mentioned (which is the one I'd like to tinker with).  By "theming process", I meant the process of downloading the resource kit, making changes, and putting them inside a new ZIP file (following the steps outlined in the PDF included with the resource kit).  This ZIP file is uploaded in the "Customize your site" area under the section titled "Create and upload a custom design". 

                                 

                                THe instructions in the PDF say to zip up the sampleTheme directory in the resource kit, but this excludes the source_art directory containing the sprites. If I modify the j-ui-sprite.psd, where should it go in the ZIP file that contains the new theme? Thanks for the quick response!

                                  • Re: Jive 5 Icons
                                    Amber Orenstein

                                    The sample theme is just that, an example — not a replacement for doing the actual front-end development work, style rules, image prep, etc.

                                    • Re: Jive 5 Icons
                                      Ryan Rutan

                                      Brian,

                                       

                                      The PSD file is used to re-create the new Sprite images with your updates, at which point you would switch out the existing images for the newly created ones.  Its not meant to be distributed in the theme directly (albeit it can live there, but it will be benign).  Also, as Amber pointed out...the sample is there primarily to help convey theme structure more so than a practical production worthy theme.

                                       

                                      Theming is not necessarily difficult; however, it can be a tediously detailed process.  Given the nature of your questions....it sounds like you might be good to go; however, if you feel otherwise, I wanted to let you know that we offer online courses in the Jive Training community, or even a complementing Professional Services package, to get you started in the right direction.  I always hate doing anything that is perceived as upselling in the middle of a discussion like this; however, given the level of detail needed thus far ... I felt compelled to offer these options as an opportunity to help save you some time in the long run.

                                       

                                      I hope that the above information has helped, and we'll continue to try and help where we can.

                                       

                                      Edit: Just saw your update, basic flow is as follows:  Open PSD, update images in place in their respective place, save the sprites out to PNG (I think, whatever the file extension is), and replace them in the theme bundle structure.  Reference the new files in your CSS and you are good to go =)  Hope that helps.

                                        • Re: Jive 5 Icons
                                          bkuske

                                          Thank for linking in the additional resources, I'll check out the online course you have available. One final (I think final) question:

                                          "...replace them in the theme bundle structure."

                                          Where in the bundle? In "images" folder?