4 Replies Latest reply on Oct 30, 2012 12:53 PM by David M.

    help with external stylesheet

    David M.

      Howdy,

       

      I'm trying to apply css styles via an external stylesheet. I have it working with a gradient on the background but when I add in the styles for the border, it's not working.

       

      However, if I apply the border style after compositionReady in the code window it works! So, even though I technically found a way to get it to work, I'd rather be able to have all my styles in an external stylesheet. If anyone could offer some insight in how to do that, that would be great! - Thanks!

       

      On the stage:

       

      A symbol with a child div named "Rectangle4" with a class of ".unitBtn"

       

      CSS style sheet:

       

      .unitBtn {

           //gradient works

      background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);

      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.1)), color-stop(68%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0)));

      background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);

      background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);

      background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);

      background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);

         

            //border doesn't work

           border: 1px solid red;

      }

       

      code in animate after compositionReady:

       

      //link sytlesheet

      $("<link/>",{"rel":"stylesheet","type":"text/css", "href":"_css/main.css"}).appendTo("head");

       

      //border style

      sym.$(".unitBtn").css({"border":"1px solid black", "border-top-color":"rgb(60,60,60)"});