WordPress.org

Ready to get started?Download WordPress

Forums

Spiffy Calendar
[resolved] Yellow Hovering Background Color (8 posts)

  1. southmid
    Member
    Posted 3 months ago #

    Hi Bev,

    I searched the forums and I see that you answered this questions already. I read through it and it looks like I have to change the hex color in the code. I tried to change the hex color for what I thought was the background pop up, but nothing happened. This would be my first time looking at css.

    I see this question is asked regularly, but when I copied and pasted the code you gave previously, it didn't work.

    https://wordpress.org/plugins/spiffy-calendar/

  2. Bev
    Member
    Plugin Author

    Posted 3 months ago #

    Hi southmid,

    Can you provide a link to your page?

  3. southmid
    Member
    Posted 3 months ago #

    southmiddleriver.org

    calendar is on the home page scroll down.

  4. Bev
    Member
    Plugin Author

    Posted 3 months ago #

    You should be able to target the background color by styling ".calnk a:hover div". With your theme you might want something like:

    .calnk a:hover div { background-color: #888; }

  5. southmid
    Member
    Posted 3 months ago #

    Do I put that in the calendar CSS box, or the theme box?

  6. Bev
    Member
    Plugin Author

    Posted 3 months ago #

    I would suggest adding it the calendar CSS.

  7. southmid
    Member
    Posted 3 months ago #

    Ok, I put it in the bottom of the code. Then I saved and nothing changed on the site.

    /* Default styles for Spiffy Calendar */

    .calnk {
    padding-bottom: 5px;
    }
    .calnk a:hover {
    background-position:0 0;
    text-decoration:none;
    color:#000000;
    border-bottom:1px dotted #ccc;
    }
    .calnk a:visited {
    text-decoration:none;
    color:#000000;
    border-bottom:1px dotted #ccc;
    }
    .calnk a {
    text-decoration:none;
    color:#000000;
    border-bottom:1px dotted #ccc;
    }
    .calnk a div {
    display:none;
    margin-left:10px;
    }
    .calnk a:hover div {
    color:#333333;
    background:#F6F79B;
    display:block;
    /*position:absolute; */
    margin-top:1px;
    padding:5px;
    width:150px;
    z-index:100;
    line-height:1.2em;
    box-shadow:2px 2px 2px #c0c0c0;
    }
    .calnk a:hover div.popup {
    position:absolute;
    }
    .calnk a:hover div div {
    box-shadow:none;
    }
    .calnk-icon {
    max-width: 76px;
    display: block;
    padding: 0;
    margin-top: 3px;
    }
    .calnk div img {
    max-width: 140px;
    display: block;
    padding: 0;
    margin: 3px auto;
    }

    .calendar-table {
    border:0 !important;
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:2px !important;
    }
    .calendar-table .calnk-icon {
    margin: 0 auto;
    }
    .calendar-heading {
    height:25px;
    text-align:center;
    border:1px solid #D6DED5;
    background-color:#E4EBE3;
    }
    .calendar-next, .calendar-prev {
    width:25%;
    text-align:center;
    font-size:.9em;
    }
    .calendar-next a, .calendar-prev a {
    text-decoration:none;
    }
    .calendar-month {
    width:50%;
    text-align:center;
    font-weight:bold;
    }
    .normal-day-heading {
    text-align:center;
    width:25px;
    height:25px;
    font-size:0.8em;
    border:1px solid #DFE6DE;
    background-color:#EBF2EA;
    }
    .weekend-heading {
    text-align:center;
    width:25px;
    height:25px;
    font-size:0.8em;
    border:1px solid #DFE6DE;
    background-color:#EBF2EA;
    color:#FF0000;
    }
    .day-with-date {
    vertical-align:text-top;
    text-align:left;
    width:60px;
    height:60px;
    border:1px solid #DFE6DE;
    }
    .no-events {
    }
    .day-without-date {
    width:60px;
    height:60px;
    border:1px solid #E9F0E8;
    }
    div.weekend {
    color:#FF0000;
    }
    .current-day {
    vertical-align:text-top;
    text-align:left;
    width:60px;
    height:60px;
    border:1px solid #BFBFBF;
    background-color:#E4EBE3;
    }
    div.event {
    font-size:0.75em;
    }
    .kjo-link {
    font-size:0.75em;
    text-align:center;
    }
    .calendar-date-switcher {
    height:25px;
    text-align:center;
    border:1px solid #D6DED5;
    background-color:#E4EBE3;
    }
    .calendar-date-switcher form {
    margin:2px;
    }
    .calendar-date-switcher input {
    border:1px #D6DED5 solid;
    margin:0;
    }
    .calendar-date-switcher select {
    border:1px #D6DED5 solid;
    margin:0;
    }
    .calnk a:hover div div.event-title {
    padding:0;
    text-align:center;
    font-weight:bold;
    font-size:1.2em;
    margin-left:0px;
    }
    .calnk a:hover div div.event-title-break {
    width:96%;
    text-align:center;
    height:1px;
    margin-top:5px;
    margin-right:2%;
    padding:0;
    background-color:#000000;
    margin-left:0px;
    }
    .calnk a:hover div div.event-content-break {
    width:96%;
    text-align:center;
    height:1px;
    margin-top:5px;
    margin-right:2%;
    padding:0;
    background-color:#000000;
    margin-left:0px;
    }
    .page-upcoming-events {
    font-size:80%;
    }
    .page-todays-events {
    font-size:80%;
    }
    .calendar-table table, .calendar-table tbody, .calendar-table tr, .calendar-table td {
    margin:0 !important;
    padding:0 !important;
    }
    table.calendar-table {
    margin-bottom:5px !important;
    }
    .cat-key {
    width:100%;
    margin-top:30px;
    padding:5px;
    border:0 !important;
    }
    .cal-separate {
    border:0 !important;
    margin-top:10px;
    }
    table.cat-key {
    margin-top:5px !important;
    border:1px solid #DFE6DE !important;
    border-collapse:separate !important;
    border-spacing:4px !important;
    margin-left:2px !important;
    width:99.5% !important;
    margin-bottom:5px !important;
    }
    .cat-key td {
    border:0 !important;
    }

    .calnk a:hover div { background-color: #888; }

  8. Bev
    Member
    Plugin Author

    Posted 3 months ago #

    You have the background defined twice - remove or edit the first occurrence (where the color is set to #F6F79B)

Reply

You must log in to post.

About this Plugin

About this Topic