Skip to main content

Fixing a rubric table with CSS

Stephen Ladek

Credit (Miles Exner): I am trying to fix the rubric table on the grader page with CSS, but the CSS added to Additional HTML does not seem to affect that page. Additional HTML works on other pages. Does it not work on this page? The top row shows how I have it looking with CSS using the dev tools. How do I apply this to the actual page? (/mod/assign/view.php?id=6477&action=grader&userid=15703)

0

Comments

1 comment

Date Votes
  • 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

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post