Jump to content
Sign in to follow this  
Graham Quince

Attendance Detail widget - adding some CSS

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...