Skip to main content

Fixing a rubric table with CSS


1 comment

  • Stephen Ladek

    Credit (Greg Bird): 

    Hi Miles.   I am not sure what theme you are using, but CSS overrides are usually added to the theme (as custom CSS), rather than the additional HTML.   That being said, it should work either way, as long as you are loading your CSS before the page loads (eg in the <head>)

    Check your CSS specificity - You want to make sure you are targeting the tables on this interface and not more widely than this.  

    Your developer tools are critical here to see what CSS is at play, so you can properly override it:

    You will see the selector in play, so you may need to extend off this to add your own custom CSS:

    .gradingform_rubric .criteria {
    /* Do stuff*/

    PS.   To avoid unintended consequences, I would be tempted to more tightly specify things.  

    #rubric-advancedgrading table#advancedgrading-criteria {
    /* Do stuff */

    This should be unnecessary, but I prefer IDs over classes where they are provided so that the CSS doesn't 'leak' and affect other elements (eg with the .criteria class).

    ..... and I know it should be unnecessary to chain together two ids in this way, but I don't know whether you are specifically targeting the table within the Rubric advanced grading method ONLY or tables within other advanced grading methods as well.

    Overkill.....  but I've been bitten before


Please sign in to leave a comment.