Jump to content

Attendance Detail widget - adding some CSS


Graham Quince

Recommended Posts

I've just been working with a school who uses lesson Attendance codes as a way of reporting behaviour.

The widget works pretty well anyway, but you have to mouse over the green tick to see the behaviour.   Using CSS to target the widget and the tick's Title, we were able to add a pseudo element.   Thought I'd share it here:

<style>

div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Outstanding]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Outstanding]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Outstanding]"]::after   
    { 
    content: "        Outstanding"; 
    white-space: pre;
}

div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Outstanding]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Outstanding]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Outstanding]"]  { 
    border-right: 50px solid #15a100 !important;
}    
    

div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Good]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Good]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Good]"]::after   
    { 
    content: "        Good"; 
    white-space: pre;
}

div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Good]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Good]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Good]"]  { 
    border-right: 50px solid #C0C0C0 !important;
}      
    
    
    
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Requires improvement]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Requires improvement]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Requires improvement]"]::after   
    { 
    content: "        Requires \a improvement"; 
    white-space: pre;
}

div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Requires improvement]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Requires improvement]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Requires improvement]"]  { 
    border-right: 50px solid #cd7f32 !important;
}  
    
    
    
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Inadequate]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Inadequate]"]::after,
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Inadequate]"]::after   
    { 
    content: "        Inadequate"; 
    white-space: pre;
}

div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Maths. [Inadequate]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="Science [Inadequate]"],
div[data-content-uuid="widgetuuid"] .attdetail_lesson[title="English [Inadequate]"]  { 
    border-right: 50px solid #FF0000 !important;
}         
</style>

It needs tidy up and unfortunately, using the Title means that each subject needs to be included, 

attendance.PNG

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...