Change default background color

[Birch78]

Hi guys

I am using the simple code to implement LiteMol on my webpage, and it is working fine. But how can I change the default background color from black to white?? THANKS

My code

<!-- Complied & minified library css -->
<link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />


<!-- Dependencey scripts (these can be skipped if already included in page) -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

<!-- Complied & minified library JS -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

<script>
  angular.element(document).ready(function () {
      angular.bootstrap(document, ['pdb.component.library']);
  });
</script>

LiteMol Component Demo

<div class="view3d">
  <pdb-lite-mol pdb-id="''" source-url="https://www.epsdatabase.com/litemol_js/1dv9.pdb" source-format="pdb" hide-controls="true"></pdb-lite-mol>
</div>

[dsehnal]

Hi,

it is shown how to do this in examples at the pdb-lite-mol wrapper page: https://github.com/mandarsd/pdb-lite-mol/blob/master/examples/main/litemol-customize-demo.html

David

[mandarsd]

@dsehnal Thanks for adding the example. @Birch78 Here is demo fyr https://embed.plnkr.co/KIpwZLQClq6hMyh7SU5Y/

[Birch78]

Hi mandarsd Thanks a lot, your example is working great when I use <pdb-lite-mol id="litemol_1cbs" pdb-id="'1cbs'" hide-controls="true"></pdb-lite-mol> but when I want to use my own pdb file like this <pdb-lite-mol pdb-id="'streptococcus_macedonicus_sc136'" source url="http://www.epsdatabase.com/pdb/streptococcus_macedonicus_sc136.pdb" source-format="pdb" hide-controls="true"></pdb-lite-mol> the background goes back to black??? Why is that??

[mandarsd]

On compareing the elements above, it looks like you are missing the id attribute in yours. Add id="litemol_1cbs".

In script.js of the demo, you can see that id is used to bind to the scope of the component. var litemolElement = document.getElementById('litemol_1cbs');