Back to Shut the Box Project

Shut the Box Project - CSS file

Additonal Styles One

Instructions:

Use the block of code below to add to your stbStyles.css file. This Cascading Style Script will help you make your designs unique on the mainpage for our game. Change all the colors and any other styles attributes that you like to make your game a little more unique. You will need to change make some changes to your html files as well:
Add: class="center bigText" into your button tag.

.center {
    text-align: center;
    width: 200px;
    height: 50px;
}

.bigText {
    font-size: 30px;
    background-color: rgba(44,98,142,.8);
    box-shadow: 10px 10px 10px #7E6143;
    border-color: black;
}

#leftside {
    position: relative;
    margin-left: 100px;
    width: 300px;
}
/*choose either this style script for all tile numbers in a row above */
#tiles {
    margin-right: auto;
    margin-left: auto;
    width: 1180px;
    padding:10px;
    text-align: center;
}
/* or this style script for a float on the right in number pad style */
#tiles{
    float:right;
    width: 400px;
    margin-right: 100px;
}

/* chose this style script if your tiles are above in a row */
#dice {
    width: 245px;
    float: right;
    margin-right: 20px;
    background-color: rgba(44,98,142, .9);
    height: 140px;
    margin-top: -50px;
    padding: 10px;
    box-shadow: 10px 10px 10px #7E6143;
}

/* OR chose this style script if your tiles are to the right in a number pad design*/
#dice {
    width: 245px;
    background-color: rgba(44,98,142, .9);
    height: 140px;
    padding: 10px;
    box-shadow: 10px 10px 10px #7E6143;
}

           
David Johns and Electric Teaching ~ All Rights Reserved 2015