Question

I am using the Shadowbox.js example code to show a shadowbox with the message “This site is still under construction!” on page load:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    // let's skip the automatic setup because we don't have any
    // properly configured link elements on the page
    skipSetup: true
});

window.onload = function() {

    // open a welcome message as soon as the window loads
    Shadowbox.open({
        content:    '<div id="welcome-msg">This site is still under construction!</div>',
        player:     "html",
        title:      "Welcome",
        height:     350,
        width:      350
    });

};
</script>

The problem is that the “This site is still under construction!” text is displayed in a black font on a black background.

I assume that I have to fiddle with my CSS, so I added:

div.welcome-msg{font-size:12px;padding:10px;text-align:center;color:white;}

to ./shadowbox/shadowbox.css, but that didn’t solve the problem.

Can someone tell me what I have to do to change to font color of the “This site is still under construction!” text to white?

Thanks in advance

Answer 1

Instead of “div.welcome-msg” try “div#welcome-msg”.