Customize the Appearance of the Day Squares in the Multi-Day Giveaway Calendar Template
How do I change the colors, sizes, fonts, etc of the day squares in the Multi-Day Giveaway Calendar Template?
Original question received by ShortStack Support

Original question received by ShortStack Support
-
Official comment
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;
}Comment actions
Please sign in to leave a comment.
Comments
1 comment