[SOLVED] How to set a transparent background

MobileFuse · April 18, 2017, 4:30pm

Hey everyone,

I am trying to set my project’s background to transparent to only have the cube visible and be able to display HTML elements under it. I tried setting the clear color to transparent by setting the alpha to 0. I also enabled the transparent canvas option in the project settings. I am trying to run the project within a frame in another page.

I tried to figure out by following the steps in this post: (☑ How to set canvas transparent?) but either I didn’t do something right or it no longer works.

It also seems like the styles on the frame document cause the background to be gray no matter what.

Thanks,
Diego

yaustar · April 19, 2017, 10:01am

Silly question: Have you set the canvas as transparent?

will · April 20, 2017, 12:29pm

Yes @yaustar, Diego said:

maxheapify · April 26, 2017, 12:31pm

Hello,

We followed these steps but it turned out we had 2 issues:

we were using the framing page and not he framed page so no matter what we did at the project level the framing page still had styles being applied.
despite these settings, for some reason the styles from the frame were overriding the settings that were supposed to make the background transparent.

To solve, we extracted the framed content URL and used that as our frame content which removed the extra layer of styles. Then we added a script to the Root node called ‘boot’ that sets all relevant color styles to transparent in its initialize code.

Now it works perfectly. We are excited to show you guys the finished ad unit. Thanks again for all your help migrating us away from Goo.

vaios · April 26, 2017, 12:56pm

BTW if you just want a link to the published app without the iframe use the embed URL which adds a /e/ before the /p/ or /b/ part of the published URL. For example if an app is published at https://playcanv.as/p/a1234567/ then the embed URL would be https://playcanv.as/e/p/a1234567/

steinarsoreide · May 1, 2017, 9:08pm

Hi,

could you please share the boot script to show what color styles you needed to update? I’m struggling with the same problem and used a script to set the background-color to transparent, but this seems not sufficient. (?)

Thanks,
Steinar

maxheapify · May 2, 2017, 2:22am

var Boot = pc.createScript('boot');

// initialize code called once per entity
Boot.prototype.initialize = function() {
    //console.log('JJ',document.getElementsByTagName('body'));
    var bd = document.getElementsByTagName('body')[0];
    var ht = document.getElementsByTagName('html')[0];
    var cv = document.getElementsByTagName('canvas')[0];
    bd.style.backgroundColor="transparent";
    ht.style.backgroundColor="transparent";
    cv.style.backgroundColor="transparent";
};

// update code called every frame
Boot.prototype.update = function(dt) {
    
};

Daniel_Vianna · May 4, 2017, 9:52pm

In order to remove the iframe border in the browser I tried what Vaios mentioned but it didn’t work (if what he proposed was the same thing I was trying to do). Anyways, I found a way to remove the iframe border, just adding frameBorder=“0” in the html tag that goes inside the page.

Example: <iframe src="https://playcanv.as/e/b/zTajUHZ8/" height="700px" width="1920px" scrolling="no" frameborder="0"></iframe>

Daniel_Vianna · May 4, 2017, 10:06pm

Hi Max, I tried your solution and it didn’t work, can you please clarify?

My settings:

I added the boot script to the root as said:

but I still get a black background in the browser:

I am using the script code provided instead of transparent:

var Boot = pc.createScript('boot');

// initialize code called once per entity
Boot.prototype.initialize = function() {
    //console.log('JJ',document.getElementsByTagName('body'));
    var bd = document.getElementsByTagName('body')[0];
    var ht = document.getElementsByTagName('html')[0];
    var cv = document.getElementsByTagName('canvas')[0];
    bd.style.backgroundColor="transparent";
    ht.style.backgroundColor="transparent";
    cv.style.backgroundColor="transparent";
};

// update code called every frame
Boot.prototype.update = function(dt) {
    
};

maxheapify · May 5, 2017, 12:38am

Hello,

Nothing there looks out of place to me. Can you share a public version of he project? I dont mind poking it with a stick and seeing if something stands out. Also, is that page the playcanvas page or your own page? Can you share that html or its url? It may be the solution is not a ‘one size fits all’ garment.

Thanks.

Daniel_Vianna · May 5, 2017, 6:02pm

The page is hosted here: http://academic.cast-soft.com/3dlandingpage99/index.html

This is my current project: https://playcanv.as/b/okFRSxiU/

This is the link if you want to fork it

HTML + CSS of the page is below:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>wysiwyg Education</title>

    <!-- HAND-CODED BY DANIEL VIANNA AND EVA CHAN-->

    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/normalize.css">
  </head>
  <body>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

   <!-- Start Top Menu Bar -->


   <div class="top-bar text-center" id="main-menu">
     <div class="top-bar-section">
       <img id="logo" alt="daniel_logo" src="http://academic.cast-soft.com/3dlandingpage99/images/wysiwyg2016.svg" >
     </div>
   </div>


    <!-- end of Top Menu Bar -->



   <!-- Start Moon Section-->

        <div class="row fullWidth moon_section">
          <div class="small-12 large-12 medium-12 medium-centered large-centered columns no_padding">
              <div class="playcanvas">
              <iframe src="https://playcanv.as/b/zTajUHZ8/" height="700px" width="100%" scrolling="no" frameborder="0"></iframe>
              </div>
         </div>
       </div>

       <!-- End of Moon Section-->


       <div class="large-12 columns timeline_section">
           <div class="feature">
             <div class="circle-wrapper">
               <div class="circle">
                 <p class="centered-text">Let us help you! By offering you the new wysiwyg student edition for FREE!<br />
                 </p>
               </div>
             </div>
          </div>
         </div>



    <!-- START OF THE MISSION SECTION -->
    <div class="the_mission_section row fullWidth">

         <div class="small-12 medium-4 large-4 large-offset-1 medium-offset-1 columns">
          <div class="the_mission_section_text">
              <h2>The <br> mission</h2>
              <p>CAST’s mission is to allow people to be more creative and innovative. As designers ourselves, we understand how hard it is to afford a software license while attending school and trying to start a career.</p>
              <a href="#believe" class="button">Register Now</a>
          </div>
         </div>

         <div class="small-12 medium-7 large-7 columns no_padding">
           <div class="the_mission_image_container">
           </div>
         </div>
        </div>


   <!-- END OF THE MISSION SECTION-->

   <!-- START OF SPACER -->
   <div class="row fullWidth spacer_section">
        <div class="small-12 large-12 medium-12 large-centered columns spacer">
        </div>
    </div>
  <!-- END OF SPACER -->

  <!-- START OF WE WILL HELP YOU SECTION-->
  <div class="succeed_section row fullWidth">
    <div class="small-12 medium-5 large-5 medium-push-7 columns">
     <div class="succeed_text_section">
         <h2>We will help <br>you succeed</h2>
         <p>After you graduate, your wysiwyg student license will turn into a 3-month wysiwyg Lease with NO limitations or watermark.</p>
         <a href="#believe" class="button">Register Now</a>
     </div>
    </div>
    <div class="small-12 medium-7 large-7 medium-pull-5 columns">
      <div class="fixture_image_container">
        <img class="fixture_image" src="http://academic.cast-soft.com/3dlandingpage99/images/fixture.png">
      </div>
    </div>
   </div>
     <!-- END OF WE WILL HELP YOU SECTION -->

     <!-- START OF SPACER -->
     <div class="row fullWidth spacer_section">
          <div class="small-12 large-12 medium-12 large-centered columns spacer">
          </div>
      </div>
    <!-- END OF SPACER -->

  <!-- START OF GET A FULL WYG SECTION -->
  <div class="the_mission_section row fullWidth">
    <div class="small-12 medium-4 large-4 large-offset-1 medium-offset-1 columns">
     <div class="the_mission_section_text">
         <h2>Meet the<br>new student<br>edition</h2>
         <p class="text-left">wysiwyg Student edition is a Perform License as described below:<br>
           •   4096 DMX Channels (8 universes)<br>
           •   A small Student Edition Watermark shows on shaded view, renderings and printable plots.<br>
           •   Brand new Cloud License! A USB Dongle is no longer required, so no costs with shipping.<br>
           •   This is an annual license that can be extended every year as long as you provide proof you are still a student.<br>
           •   A watermark is small and only takes up 1/9th of shaded view.
         </p>
         <a href="#believe" class="button">Register Now</a>
     </div>
    </div>
    <div class="small-12 medium-7 large-7 columns no_padding">
      <div class="get_a_wyg_image_container">
      </div>
    </div>
   </div>
     <!-- END OF OF GET A FULL WYG SECTION -->

     <!-- START OF BACKGROUND WRAPPER -------------------------->
     <div class="background-wrapper">


     <!-- START OF SPACER -->
     <div class="row fullWidth spacer_yellow">
          <div class="small-12 large-12 medium-12 large-centered columns">
          </div>
      </div>
    <!-- END OF SPACER -->

     <!-- START OF ELEGIBLE SECTION -->
      <div class="who_is_elegible_section row">

       <div class="small-12 medium-12 large-3 columns large-push-2 no_padding no_margin text-center">
            <div class="inner cards">
                  <div class="documents_subsection">
                     <img src="http://academic.cast-soft.com/3dlandingpage99/images/document.png">
                      <div class="document_inner_text">
                      <h4 style="color:#1d1d1d">Proof of enrollment or Student ID card showing your course name and graduation date.</h4>
                   </div>
                 </div>
                 <div class="student_subsection">
                    <img src="http://academic.cast-soft.com/3dlandingpage99/images/student.png">
                     <div class="student_inner_text">
                     <h4>Students enrolled in Theatre, Lighting or Production-related course.</h4>
                    </div>
                 </div>
              </div>
      </div>
      <div class="small-12 medium-12 large-9 columns no_padding no_margin">
        <div class="big_text">
           <h2>Eligibility</h2>
           <p>For as long as you are a student until you graduate you will have access to student edition. After graduation you are eligible to a free 3 months upgrade to wysiwyg Perform with no channel limitations or no watermark, we hope this will help you get started in the marketplace as a professional.</p>
        </div>
      </div>


    </div>
    <!-- END OF ELEGIBLE SECTION -->



    <!-- START OF SPACER -->
    <div class="row fullWidth spacer_yellow">
         <div class="small-12 large-12 medium-12 large-centered columns">
         </div>
     </div>
   <!-- END OF SPACER -->

 </div>
   <!-- ENF OF BACKGROUND WRAPPER -------------------------->

   <!-- Start Moon Section-->

        <div class="row fullWidth believe_section">
          <div class="small-12 large-8 medium-10 medium-centered large-centered columns">
             <div class="believe_text_container text-center">
                 <h1>Believe</h1>
                 <div class="believe_paragraph"><p>in yourself as we already do! don’t wait to claim your prize</p>
                    <a href="https://castsoftwareservices.typeform.com/to/wiICbP" class="button">Register Now</a>
                    <a name="believe"></a>
                 </div>
             </div>
         </div>
       </div>

       <!-- End of Moon Section-->

       <!-- Start Footer-->

            <div class="row fullWidth footer text-center footer_section">
              <div class="small-12 medium-12 large-12 medium-centered large-centered columns">
                <div footer>
                   <h5>© 2017 CAST Group of Companies Inc. All rights reserved. <a href="http://cast-soft.com/terms-of-use/">Terms of Use</a> | <a href="http://cast-soft.com/privacy-policy/">Privacy Policy</a> | <a href="http://www.cast-soft.com/wysiwyg/faq/">Student Edition FAQ</a></h5>
                   <img id="wysiwyg_grey_logo" src="http://academic.cast-soft.com/3dlandingpage99/images/wysiwyg2016_grey.svg">
                   <img id="cast_grey_logo" src="http://academic.cast-soft.com/3dlandingpage99/images/cast_logo_grey.svg">
               </div>
             </div>
           </div>

           <!-- End of Footer-->


    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://danielvianna.github.io/js/vendor/foundation.js"></script>
    <script src="https://danielvianna.github.io/js/app.js"></script>
    <script>
        $(document).foundation();
    </script>
  </body>
</html>

/* HAND-CODED BY DANIEL VIANNA*/


/* START GLOBAL CONTAINER STYLES*/

body {
  margin-top: 2rem;
}

.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

@media only screen and (min-width: 40.063em) { /* min-width 641px, medium screens */
     .no_padding {
  padding:0;
     }
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .no_padding {
    padding:0;
       }
}

.no_margin {
    margin:0;
}

.no_padding {
    padding:0;
}




/* END OF GLOBAL CONTAINER STYLES*/


/* START GLOBAL FONT STYLES*/
h1{
    font-family: open sans, sans-serif;
    color: white;
    font-weight: 800;
    font-size: 11.0rem;
    line-height: 0.9;
    margin-bottom: 0.5rem;
   }


   @media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
       h1 {
           font-size: 5.0rem;
          }
   }


   @media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
       h1 {
           font-size: 7.0rem;
          }
   }


h2{
   font-family: open sans, sans-serif;
   color: white;
   font-weight: 600;
   font-size: 3.0rem;
   line-height: 1.1;
  margin-bottom: 0.5rem;
   }


h3{
    font-family: open sans, sans-serif;
    color: #ff9b0d;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 2.0 ;
    margin-bottom: 0.5rem;
   }

   @media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
       h3 {
           font-size: 1.0rem;
          }
   }


   @media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
       h3 {
           font-size: 1.5rem;
          }
   }


h4{
   font-family: open sans, sans-serif;
   color: white;
   font-weight: 600;
   font-size: 0.9375rem;
   line-height: 2.0 ;
   margin-bottom: 0.5rem;
  }

  @media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
      h4 {
          font-size: 0.9375rem;
         }
    }


  @media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
      h4 {
          font-size: 0.9375rem;
         }
  }




    @media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
        h4 {
            font-size: 0.8rem;
           }
      }


    @media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
        h4 {
            font-size: 0.8rem;
           }
    }


h5{
    font-family: open sans, sans-serif;
    color: #eaeaea;
    font-weight: 300;
    font-size: 0.8rem;
    line-height: 2.0 ;
    margin-bottom: 0.5rem;
}

  h5 a{
    color: white;
    text-decoration: underline;
}

  h5 a:hover {
    color: #ff9b0d;
    text-decoration: underline;
}

  h5 a:active {
    color: #ff9b0d;
}


p{
   font-family: open sans, sans-serif;
   color: #e1e1e1;
   font-weight: 300;
   font-size: 1.3rem;
   line-height: 2.0 ;
   margin-bottom: 0.5rem;
  }

  @media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
      p {
          font-size: 1.0rem;
         }
  }


  @media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
      p {
          font-size: 1.0rem;
         }
  }



/* END OF GLOBAL FONT STYLES*/

/* START OF BUTTON STYLES */

.button{
    background-color: orange;
    color: black;
    padding: 15px 32px;
    font-family: open sans, sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 4px 2px;
    margin-bottom: 30px;
}

.button:hover,
.button:focus {
  background-color: #4d36d4;


}


/* END OF BUTTON STYLES */





/* START OF MENU */
.container{
    width: 960px;
    margin: 0 auto;
    z-index: 99;
}


.header {
    background: #1e1e1e;
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 999;
}

#logo {
    height: 50px;
    max-height: 50px;
    max-width: 200px;
    width: 200px;
    align-item: center;
}


li {
    list-style: none;
    float: left;
    margin-left: 30px;
    padding-top: 18px;
}


.title-bar {
    background-color: #1e1e1e;
    padding: 0.9rem;
}

.title-bar-title {
    color: #fff;
    font-family: "open sans", sans-serif;
    font-weight: 400;
}

.top-bar-right {
    z-index: 9999!important;
}

.top-bar {
    background-color: #1e1e1e;
    padding: 10px;
}

.top-bar ul {
    background: #333;
}

.top-bar ul li {
    background-color: #1e1e1e;
}

.top-bar ul li a {
   color: #fff;
   font-family: "open sans", sans-serif;
   font-weight: 400;
}

#main-menu li:hover,
#main-menu li a:hover {
  background: #2f2f2f;
}

#main-menu ul {
  background: #1e1e1e ;
  border: none;
}

#main-menu,
.title-bar {
  background: #1e1e1e;
}

.menu-text {
  background:-color: #fff;
}


/* END OF MENU*/




#canvas {
    display: block;
}



/* START MOON SECTION*/
.moon_section {
    background-color: #050917;
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/stars_background.png");
    background-size: auto;
    background-position: center;
    margin: 0;
}

.moon_image_background_container {
   position: relative;

   height: 800px;
}



.moon_text_container {
   position: absolute;
   top: 10em;
   right: 45%;
}



@media only screen and (min-width: 320px)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
  .moon_text_container {
     top: 20em;
     right: 10%;
  }
}


@media only screen and (min-width: 640px)  { /* min-width 640px, mobile-only styles, use when QAing mobile issues */
  .moon_text_container {
     top: 25em;
     right: 40%;
  }
}

@media only screen and (min-width: 40.062em) { /* min-width 641px, medium screens */
  .moon_text_container {
    top: 25em;
    right: 40%;
  }
}

@media only screen and (min-width: 64.063em) { /* large screens */
  .moon_text_container {
     top: 10em;
     right: 42%;
  }
}

@media only screen and (min-width: 130.063em) { /* extra large screens */
  .moon_text_container {
     top: 10em;
     right: 51%;
  }
}

/* END OF MOON SECTION*/


/* BEGIN OF SPACER*/

.spacer_section {
  background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/stars_background.png");
  background-repeat: no-repeat;
  background-size: auto%;

}
.spacer {
    margin: 0;
}


@media only screen and (max-width: 40.062em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .spacer  {
    height: 6em;
       }
   .spacer_yellow {
     height: 0em;
    }
}

@media only screen and (min-width: 40.062em) { /* min-width 641px, medium screens */
    .spacer  {
     height: 0em;
       }
   .spacer_yellow {
    height: 0em;
       }
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .spacer  {
    height: 6em;
       }
    .spacer_yellow {
     height: 6em;
      }
}


@media only screen and (min-width: 130.063em) { /* extra large screens */
    .spacer {
    height: 6em;
       }
    .spacer_yellow {
    height: 6em;
      }
}

/* END OF SPACER*/



/* START OF TIMELINE */

.timeline_section {
    background-color: #050917;
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/stars_background.png");
    background-size: auto;
    background-position: center;
    padding-bottom: 200px;
    margin:0;
}


@media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .timeline_section{
       padding-bottom: 50px;
       }
}

/*
* — Start of Circle Subsection —
*/


.feature {
    padding: 20px;
}


.circle-wrapper {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  padding: 14%;
  border-radius: 50%;
  border: 20px solid #856ee9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.centered-text {
  text-align: center;
}

@media only screen and (max-width: 40.062em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
  .centered-text {
    text-align: center;
    min-width: 200px;
    max-width: 200px;
  }
  .circle {
    padding: 120px;
    border-radius: 10%;
  }
}

@media only screen and (min-width: 40.063em) { /* min-width 641px, medium screens */
  .centered-text {
    text-align: center;
    min-width: 200px;
    max-width: 200px;
  }
  .circle {
    padding: 150px;
  }
}

@media only screen and (min-width: 64.063em) { /* large screens */
  .centered-text {
    text-align: center;
    min-width: 200px;
    max-width: 200px;
  }
  .circle {
    padding: 200px;
  }

}


@media only screen and (min-width: 130.063em) { /* large screens */
  .centered-text {
    text-align: center;
    min-width: 200px;
    max-width: 200px;
  }
  .circle {
    padding: 200px;
  }
}


/*
* — End of Circle Subsection —
*/

.timeline_image{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.timeline_image2{
    display:block;
    margin-left: auto;
    margin-right:auto;
    padding:2rem;
}

.timeline_image3{
    display:block;
    margin-left: auto;
    margin-right:auto;
    padding: 2rem;
}

.vertical-line{
    width: 2px;
    background-color: #555862;
    height: 250px;
    max-height: 250px;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
}


@media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .vertical-line{
       height: 100px;
       maxi-height: 100px;
       }
}


/* END OF TIMELINE */
/* START OF THE MISSION SECTION*/

.the_mission_section {
    background-color: #050917;
    width: 100%;
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/stars_background.png");
    background-size: auto;
    background-position: center;
    margin:0;
}


.the_mission_section_text {
    padding-top: 3rem;
    margin: auto;
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .the_mission_section_text {
         max-width: 450px;
       }
  }


@media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .the_mission_section_text {
        padding-top: 0;
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
       }
}

.the_mission_image_container {
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/wyg_wireframe.png");
    background-repeat: no-repeat;
    height: 800px;
    background-size: auto;
    margin: 0;
}


@media only screen and (max-width: 40.062em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .the_mission_image_container {
    height: 300px;
    background-size: cover;
       }
}

@media only screen and (min-width: 40.063em) { /* min-width 641px, medium screens */
    .the_mission_image_container {
     background-position: 0%;
       }
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .the_mission_image_container {
    background-position: -50%;
       }
}


@media only screen and (min-width: 130.063em) { /* large screens */
    .the_mission_image_container {
    background-position: 0%;
       }
}


/* END OF THE MISSION SECTION*/


/* START OF SUCCEED SECTION*/

.succeed_section {
  background-color: #050917;
  background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/stars_background.png");
  background-size: auto;
  background-position: center;
  height: 60vh;
  width: 100%;
}

.succeed_text_section {
    text-align: left;
    padding-top: 20%;
}

.fixture_image {
    display: table;
    margin: 0 auto;
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .succeed_text_section {
         max-width: 400px;
       }
  }

  @media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
      .succeed_text_section {
          padding-top: 0;
          padding-left: 5%;
          padding-right: 5%;
          text-align: center;
         }
  }

/* END OF SUCCEED SECTION*/



/* START OF GET A FULL WYG SECTION*/

.get_a_wyg_image_container {
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/wyg_screenshot.png");
    background-repeat: no-repeat;
    height: 800px;
    background-size: auto;
    margin: 0;
}

.get_a_wyg_image_container:hover {
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/wyg_screenshot_flipped.png");
}



@media only screen and (max-width: 40.062em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .get_a_wyg_image_container {
    height: 300px;
    background-size: cover;
       }
}

@media only screen and (min-width: 40.063em) { /* min-width 641px, medium screens */
    .get_a_wyg_image_container {
     background-position: 0%;
       }
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .get_a_wyg_image_container {
    background-position: -50%;
       }
}


@media only screen and (min-width: 130.063em) { /* large screens */
    .get_a_wyg_image_container {
    background-position: 0%;
       }
}

/* END OF GET A FULL WYG SECTION*/



/* START OF WE WILL HELP YOU SECTION*/

.we_will_help_you_text_container {
    padding-top: 10rem;
}

@media only screen and (min-width: 64.063em) { /* large screens */
    .we_will_help_you_text_container {
         max-width: 350px;
       }
  }


@media only screen and (max-width: 40em)  { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .we_will_help_you_text_container {
        padding-top: 0;
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
       }
}


/* END OF WE WILL HELP YOU SECTION*/





/* START OF WHO IS ELEGIBLE SECTION*/

.who_is_elegible_section {
    width: 100%;
}

.background-wrapper {
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/shapes_background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ff9b0d;
   }

.big_text {
   background-color: #050917;
}

.student_subsection {
    background-color: #4d36d4;
    padding-top: 40px;
    padding-bottom: 40px;
}


.student_inner_text {
    padding-left: 35px;
    padding-top: 35px;
    padding-right: 35px;
}

.documents_subsection {
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 40px;
}

.document_inner_text {
    padding-left: 35px;
    padding-top: 35px;
    padding-right: 35px;
}


@media only screen and (min-width: 1024px) { /* large screens */
   .big_text {
        height: 550px;
        max-width: 1020px;
        background-color: #050917;
        margin-top: 150px;
        margin-left: -200px;
        padding-left: 500px;
        padding-top: 120px;
        padding-right: 50px;
    }

    .cards {
        max-width: 320px;
        width: 320px;
    }

    .boxes_container {
      width: 100%;
    }

  }


  @media only screen and (max-width: 1023px) { /* medium screens */
    .column_text_card {
        width:100%;
    }
    .big_text {
        background-color: #1b2030;
        width:100%;
        padding-top: 150px;
        padding-bottom: 4em;
        padding-left: 10%;
        padding-right: 10%;
    }

  .background-wrapper {
      background-image: none!important;
      background-color: transparent;
       }

   .document_inner_text {
       padding-top: 40px;
       padding-left: 20%;
       padding-right: 20%;
   }

   .student_inner_text {
      padding-top: 40px;
      padding-left: 20%;
      padding-right: 20%;
       }

     .big_text {
        padding-top: 4em;
        text-align: center;
         }

}


  @media only screen and (max-width: 640px) { /* small screens */
    .column_text_card {
        width:100%;
    }
    .big_text {
        background-color: #1b2030;
        width:100%;
        padding-top: 100px;
        padding-bottom: 4em;
    }

  .background-wrapper {
      background-image: none!important;
      background-color: transparent;
       }

   .document_inner_text {
       padding-left: 1.5em;
       padding-top: 20px;
       padding-right: 1.5em;
   }

   .student_inner_text {
      padding-left: 1.5em;
      padding-top: 20px;
      padding-right: 1.5em;
       }

     .big_text {
        padding-left: 1.5em;
        padding-top: 4em;
        padding-right: 1.5em;
        text-align: center;
         }

}



/* END OF WHO IS ELEGIBLE SECTION*/



/* START OF BELIEVE SECTION*/


.believe_section {
    background-image: url("http://academic.cast-soft.com/3dlandingpage99/images/liveshow-crowd.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 35em;
}

@media only screen and (max-width: 640px) { /* small screen*/
  .believe_text_container {
      padding-top: 5em;
  }
}

@media only screen and (min-width: 641px) { /* medium screen*/
  .believe_text_container {
      padding-top: 5em;
      padding-left: 1em;
      padding-right: 1em;
      margin: auto;
      max-width: 600px;

  }
}

@media only screen and (min-width: 1024px) { /* large  screen*/
  .believe_text_container {
      padding-top: 10em;
      max-width: 800px;
  }

  .believe_paragraph {
    padding-left: 3.5em;
    padding-right: 3.5em;
  }

}

/* END OF BELIEVE SECTION*/


/* START OF FOOTER SECTION*/

.footer_section {
    background-color: #191919;
    padding-top: 2em;
    padding-bottom: 2em;
}

#wysiwyg_grey_logo {
    height: 25px;
    max-height: 25px;
    max-width: 100px;
    width: 100px;
}

#cast_grey_logo {
    height: 25px;
    max-height: 25px;
    max-width: 100px;
    width: 100px;
}

/* END OF FOOTER SECTION*/

maxheapify · May 9, 2017, 10:05pm

Hello,

Sorry I went silent on you. Im working on a pretty serious deadline for my work. Are you pressed to solve this quickly or is it ok if I look at this over the weekend and respond?

Thanks

Daniel_Vianna · May 10, 2017, 6:44pm

Hey man, don’t worry, I can wait until the weekend.

Daniel_Vianna · May 17, 2017, 6:01pm

I found the problem

This is the new link to the project
https://playcanvas.com/project/482459/overview/moonexperiment
http://academic.cast-soft.com/3dlandingpage99/index.html

It seems that the color is coming from the camera “clearColor”

Now it’s fully transparent, yay!!!

Note: I think there is some sort of problem with this control, I setup it first with a solid pink color to debug. When I came back I put the 0 on the alpha channel, but didn’t touch the other channels, I had a semi transparent background. After that I put everything 0 but there was still a hint of blue, I checked again and something changed my setting in the blue channel (maybe when I clicked outside to close the dialog). It only became fully transparent when I put everything 0 0 0 0 . So I think there are two bugs there, one related to the input that changes when you close the dialog and another related to the alpha channel which only works if you put all 0.