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

Follow

Jane Vance

• May 01, 2017 12:21
• Edited

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

0

• Official comment

  

  Jane Vance

  • May 01, 2017 12:20

  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 Permalink

Please sign in to leave a comment.