4 Replies Latest reply on Nov 1, 2012 8:04 AM by jtucker.ctr

    css to change create drop down

      Hi all!

       

      I am trying to change the create drop down colors to make them more obvious.

      I made the changes to custom-css.ftl, but I am not seeing any changes when I upload the theme. I've read that restarting the app may help, but it did not. Is there something I am missing? Does it get called elsewhere? I am a little confused...

      tabs.png

       

      (please bear with me - I think I did this right)

      To start - I removed the bottom border from j-quick-menu > nav and made the default background grey.

      #j-quick-menu > nav {

        box-shadow:0 1px 1px rgba(0, 0, 0, 0.03);

        font-size: 0.95em;

        background: #3e3e3e; /* change default background to dark */

      }

      In .j-create-menu-section I simply changed the right borders to white.

       

      I added to make the active background white.

      #j.create-menu-section a:active {

         background:#ffffff;

         }

      I added this to change the menu to change the active to bold blue and the background to white.

      #j.quick-menu > nav ul li.active a, .j-create-menu-section.active {

         color: #0066ff;

         font-weight: bold;

         background: #ffffff;

      }

       

      I'm not sure what else I need...any input would be appreciated.

        • Re: css to change create drop down
          aperrotte

          Hey Jennifer,

           

          I'll try to help you trouble shoot this out since theme customization has been the bread and butter for our own JIVE site. Are you noting that the changes aren't happening at all or just certain elements showing up?


          Also make sure that you're mapping you new theme either globally or to a single page or else the effects of your CSS won't work;

           

          Using Mozilla FireBug to analyze and test code changes is a great way, to not only see the effects of the CSS before you put it in a theme, but will show you if your CSS is getting trumped by inheritance. (then use !important).

           

          To remove the bottom border remember to set border-bottom to 0px; By leaving out this rule that property remains in it's default value (border-bottom: 1px solid rgb(227, 227, 227);)

           

          Example:

          #j-quick-menu > nav {

          border-bottom: 0px;

           

          The color and background changes look good as far as the CSS is concerned. If you're not seeing them update it means that JIVE isn't being able to access your theme. Either from not being mapped . . . or perhaps the theme file structure having a typo. To check this simply create a new theme and test the changes directly from your custom-css.ftl template.

           

          Hope this helps a little, feel free to circle back.

           

          Sincerely,

          Aaron J. Perrotte

          1 person found this helpful
            • Re: css to change create drop down

              Aaron,

               

              Thank you for the !important pointer, that definitely helped me with border color change. I'm still trying to get other things to work appropriately, but I am getting closer!

              To get the background to be darker I ended up using this:

               

              #menuCreate > nav ul {

                background: #e3e3e3;

                border-bottom: 0px; /* as you noted */

                }

              To get the active tab to turn white I tried:

              .j-create-menu-section a:active {

                background: #ffffff;

                }

              This only turned the small box directly behind the font white, not the whole "tab" area, which I suppose I should have used li for, but that didn't work either...

              small box.png

              The font color change I used:

              #menuCreate .j-create-menu-section a:active {

                color: #0066ff;

                font-weight: bold;

                }

               

              This works when you select it, but not right off the bat when you click the drop down... so I suppose I didn't think that one through either...

               

              Changed default to blue - so that works. (don't know how I didn't think of that initially... Its Friday!)

              #menuCreate .j-create-menu-section a {

                color: #0066ff !important;

                }

                • Re: css to change create drop down
                  aperrotte

                  Jennifer,

                   

                  your problem is because the hover element is inheriting padding from <li> and your <a> is being defined by the text content. A patch fix would be to give the element the same padding as the li element. Then pull in the <li> padding with negative margins.

                   

                  Example

                   

                  #menuCreate .j-create-menu-section a{

                   

                       padding: 5px 15px;

                       margin: 0 -15px;

                  }

                   

                  Sincerely,

                  Aaron J. Perrotte

                  1 person found this helpful
                    • Re: css to change create drop down

                      Aaron,

                       

                      Thank you again. I tried that and for some reason - it still only showed the small box - made no sense to me. Finally, I just used #menuCreate .j-create-menu-section.active { background: #fff; ...} and that was apparently what Jive liked, so its now working the way I want it to. So now with all those changes, the dropdown actually looks like it has tabs!!

                       

                      You've been very helpful. Thank you!

                       

                      Jennifer