3 Replies Latest reply: Jan 27, 2010 8:01 AM by Zabeth69 RSS

    How to work with SpryCollapsPanels in order to apply separate CSS style on different pages?

    Natalizza Community Member

      I have inserted a Spry Collapsible Panel in my homepage applying certian CSS style to it. However, as soon as I inserted a Spry Collapsible Panel on some other pages the problem: it inherited the style I applied to it on the homepage. And, I wanted to give it a different look.  I read somewhere that you have to save the sprycollapsiblepanel.css with a diferent name or place it on a different location the first time you insert it on your page - this way you leave untouchable the default DW Spry Widget. What do I do if I haven't done that in first place? I plan to start from scratch, please  tell me what are the steps before I get stuck with the same css for my Spry Widgets(Accordeons, Tabbed)?

      I appreciate all your help and knowledge..

      Natalia

        • 1. Re: How to work with SpryCollapsPanels in order to apply separate CSS style on different pages?
          Zabeth69 CommunityMVP

          My favorite way of differentiating pages in the way that you describe is to give the body an id that corresponds to the page, that is, on the "About Us" page, I might do

           

          <body id="aboutuspage">
          

           

          so that I can then go into the CSS file and preface the styles for that page with

           

          #aboutuspage /* and then the usual selectors and rules.
          

           

          [If you are using Templates, put an editable attribute on the body tag, so that you can change it for each page, if you wish.]

           

          It doesn't need to be the body id, either, anything that encompasses the entire widget without compromising the classes and ids that are set up by the widget CSS and html.  Could be a div that wraps the widget divs.

           

          I wouldn't even make separate CSS files for the different pages, as you are probably not going to TOTALLY rework the design. Just interleave the new styles with the old, for instance

           

          .CollapsiblePanel {style rules here}
          #aboutuspage .CollapsiblePanel {only the style rules that differ from the general one above it}
          

           

          This keeps you sorted out and your styles don't get flung all every which way.

           

          And I like to leave all those handy comments in the CSS files, too. They don't take up much room, and they sure help me to remember where I am when I go back months later to alter the file.

           

          As you have found, a new CSS file is not inserted when you insert a new widget of the same type. If you truly want separate files, you would rename the first one, then when you insert new widgets, you'll get new CSS files. But as I said, I would avoid doing that...keeps my brain straightened out to have them in the same file.

           

          Beth

          • 2. Re: How to work with SpryCollapsPanels in order to apply separate CSS style on different pages?
            Natalizza Community Member

            Beth,

            You are the BEST! I am so very thankfull for sharing your knowledge with me. You have no idea how much time you saved me. I certainly learned something new from you. It works exactly the way I need it and I couldn't have done it any better without your help.Hurray!

             

            Thanks again.

            • 3. Re: How to work with SpryCollapsPanels in order to apply separate CSS style on different pages?
              Zabeth69 CommunityMVP

              Congratulations, and thanks for your kind words!

               

              Beth