6 Replies Latest reply on Mar 23, 2012 2:42 PM by shannonsumner

    Change Skin for just the Front End

    shannonsumner

      Hello all,

       

      I would like to update the css styles for just the front end.  I'd like to leave the backend as is.

       

      Is this possible?  Is there an id or class I can use to reference to determine if I am on the front end or administrating the site using the backend.

       

      Let me know,

       

      Shannon

        • 1. Re: Change Skin for just the Front End
          mwringe

          Can you please be more specific? I don't understand what you mean by 'front' end and 'back' end in this context. The front end should be the UI you see in the browser (which has css), the backend is the portal framework and  everything else (which doesn't have any graphical components, therefore no css).

           

          What exactly are you trying to do? Separate CSS classes for an adminstrator and for a normal user? Different CSS for the administration UI components?...

          • 2. Re: Change Skin for just the Front End
            shannonsumner

            I'm sorry - I realized while I was writing the question the description of the non administrative portion of the portal and the administrative portions was misleading.  I would like the non administrative screens to have one look and feel and the administrative portions (edit page, add page, group administration) to have another look.  Is this possible?

            • 3. Re: Change Skin for just the Front End
              mwringe

              The portal can have multiple skins, and each user can select their own skin. So the admin could select a different skin if they wished, but I don't think you can restrict a skin to specific users (ie any user would also be able to select the same skin).

              Also, each portlet can have its own css for a particular portal skin, so if you want, you can change the css just for a specific list of portlets.

               

              There is no 'admin' only section or 'admin' only portlets per say, it all depends on how you configure the portal and portlet permissions. Any normal user could also be given permission to do things like edit page, add page,...

               

              Are you talking about the skins for specific portlets or for the whole portal?

               

              The more important question, is why do you want the admin, and only the admin, to have a different skin?

              • 4. Re: Change Skin for just the Front End
                shannonsumner

                Hello Matt,

                 

                I was hoping to add style to the page (background images, fonts, etc ...) without interfering with the beautiful job GateIn did in designing the edit page, edit layouts, etc ... sections.  How difficult is it to create a custom layout?

                 

                Thanks,

                 

                Shannon

                • 5. Re: Change Skin for just the Front End
                  mwringe

                  You should be able to create a portal skin, which will change the portal look and feel, while leaving the look and feel of individual portlets the same (ie the edit page portlet will still look the same)

                   

                  The best place to look is the GateIn documentation: http://docs.jboss.com/gatein/portal/3.2.0.Final/reference-guide/en-US/html_single/index.html#sect-Reference_Guide-Skinning_Portal (assuming you are using the 3.2.0 version).

                   

                  Our docs sometimes are not the clearest, so if you run into some issues with it or have any feedback, please let us know so we can make the docs better for next time

                  • 6. Re: Change Skin for just the Front End
                    shannonsumner

                    I managed to update my css to only change the look and feel of my front pages by using child selectors

                     

                    example:

                     

                    html > body > .PortalSkin, html > body > .PortalSkin > .UIWorkingWorkspace, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL > #UIPortal, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL > #UIPortal > .UIRowContainer, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL > #UIPortal > .UIRowContainer > .UIContainer, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL > #UIPortal > .UIRowContainer > .UIContainer > .NormalContainerBlock, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL > #UIPortal > .UIRowContainer > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER, html > body > .PortalSkin > .UIWorkingWorkspace > .UIViewWS > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div > .UIRowContainer > .UISiteBody > .UIComponent > .VIEW-SITEBODY > .UIPortal > .UIComponentBlock > .VIEW-PORTAL > #UIPortal > .UIRowContainer > .UIContainer > .NormalContainerBlock > .VIEW-CONTAINER > div

                    {

                        min-height: 100%;

                        height: 100%;

                    }