0

I am altering a plugin's admin area and adding a checkbox for a "Coming Soon" option. As of now, when the user checks the "Coming Soon" checkbox, the entire row will turn green, but there is also the option to Delete the entire row. When the Delete checkbox is checked, the row turns red.

The problem I'm having is when both the Coming Soon and Delete checkboxes is checked, the row is only turning green. I would like the row to turn red no matter whether the Coming Soon box is checked or not.

admin-script.php

//Styles rows clicked for deletion
function showStriked(){
    jQuery("#cqrm-current-item-list input[type=checkbox].strike").each(function() { 
        if( jQuery(this).attr("checked")){
            jQuery(this).closest('tr').addClass("cue-deletion");
        }
        else{
            jQuery(this).closest('tr').removeClass("cue-deletion"); 
        }
    });
}
showStriked();

jQuery(".strike").click(showStriked);

//Styles rows clicked for Comingsoon
function showComingsoon(){
    jQuery("#cqrm-current-item-list input[type=checkbox].comingsoon").each(function() { 


        if( jQuery(this).attr("checked")){
            jQuery(this).closest('tr').addClass("cue-comingsoon");
        }
        else{
            jQuery(this).closest('tr').removeClass("cue-comingsoon"); 
        }
    });
}
showComingsoon();

jQuery(".comingsoon").click(showComingsoon);

admin.css

#cqrm-current-item-list tr.cue-deletion, #cqrm-current-item-list tr.cue-deletion *{
background-color: #fbb !important;
filter: alpha(opacity=100) !important;
}

#cqrm-current-item-list tr.cue-comingsoon, #cqrm-current-item-list tr.cue-comingsoon *{
background-color: #9F9 !important;
filter: alpha(opacity=100) !important;
}

mode-edit.php

<td class="check-cell"><input type="checkbox" class="comingsoon" <?php echo $itemcomingsoon; ?> name="itemcomingsoon[<?php echo $id ?>]" value="checked"/></td>
<td class="check-cell"><input type="checkbox" class="strike" name="strike[<?php echo $id ?>]" value="checked"/></td>
0

The problem you are seeing is that you have your declarations of the same importance from a CSS standpoint.

If you add another style to give it more preference:

#cqrm-current-item-list tr.cue-deletion.cue-coming-soon, #cqrm-current-item-list tr.cue-deletion.tr.cue-coming-soon *{

background-color: #fbb !important; filter: alpha(opacity=100) !important; }

Or move the cue-deletion below the cue-comingsoon declaration you should find things work as wanted.

In CSS, # (id) has an order of about 100, . (class) has an order of about 10, and a tag has an order of about 1...

And later declarations with the same or higher weight override those that are earlier.

Looking at your two declarations, they both have

#(id) tr(tag).(class)

This means they have equal weight of about 100 + 1 + 10

Making one more specific (as shown above) will give it an extra 10 weight and override the other. Making the more important later than the less should have the same effect as it will override the other.

  • I placed cue-comingsoon above cue-deletion in the css and it worked perfectly. Thank you! – cqrm Feb 17 '15 at 2:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.