Changing the title of the My Notes widget using CSS and the HTML widget

[Graham Quince]

Following on this earlier post about styling individual elements in FrogLearn, here's how you can completely change the look of My Notes, including the title!

You'll need to follow these steps first:

1. Add your widget to page.
2. Save and close the editor.
3. Right-click on the widget and choose Inspect Element
4. In the Elements section of the developer tools, move up the tree until in the page window, the entirety of the widget is highlighted
5. In the Element area, copy the highlighted code
6. Paste this code into your favourite code editor
7. Isolate the bit called data-content-uuid=""
8. Back to the browser, you can close the Developer tools.
9. Re-edit the page and drag in the HTML widget
10. Get started styling

<style>
div[data-content-uuid="your_UUID"]{
border-radius:5px;
border:1px solid #DDDDDD;
box-shadow: 5px 5px 5px #888888;
}

div[data-content-uuid="your_UUID"] .widget_notes .widget_notes-wrap .frame {
color:#FF0000;
background:#FFFFFF;
background-image: none !important;
height:100%;
}

div[data-content-uuid="your_UUID"] .widget_notes .widget_notes-wrap {
color:#FF0000;
background:#FFFFFF;
background-image: none !important;
height:100%;
}


div[data-content-uuid="your_UUID"] .widget_notes .widget_notes-wrap .header {
color:#000000;
background:#cccccc;
background-image: none !important;
text-indent:-9999px;
line-height:0;
margin:0px;
height:30px;
padding:0px;
margin:0px;
vertical-align:middle;
border-bottom-radius:0px;
}

div[data-content-uuid="your_UUID"] .widget_notes .widget_notes-wrap .header:after {
text-indent:0;
display:block;
line-height:30px;
font-size:20px;
font-family:Arial;
content: 'My own title';
}


</style>