Customize the Appearance of the Day Squares in the Multi-Day Giveaway Calendar Template

Comments

1 comment

  • Official comment
    Avatar
    Jane Vance

    Answer from ShortStack Support: Click the Style Panel icon at the top of your Campaign Builder to open the Style Panel, then click the CSS icon in the upper right corner of the Style Panel to open the CSS Editor. There you will see some CSS you can update to change the appearance of the day boxes. The CSS is as follows:

    /* Day Square Format */
    .calendar .day{
    background-color: #fff; /* Square color - may need to change based on Theme */
    border: solid 1px #d7d7d7; /* Border */
    border-radius: 5px; /* Rounded corners */
    font-size: 80px;/* adjust as you like */
    line-height:1.65; /* Adjust to center text vertically */
    box-shadow: 0 0 5px #ccc; /* shadow color - may need to change based on theme */
    display:inline-block;
    height:128px; /* box size */
    width:158px;
    text-align:center; /* center text */
    margin: 0 15px 26px; /* space around boxes */
    text-decoration:none;/* removes underline */
    }

    /* Day Square Hover Effects */
    .calendar .day:hover{
    text-decoration:none;
    box-shadow: none;
    }
    .calendar .unlocked:hover{
    box-shadow: none;
    opacity: .8;
    }
    .calendar .locked:hover{
    cursor: default;
    }

    /* Style Locked Days */
    .calendar .locked{
    opacity: .4;
    }

Please sign in to leave a comment.