Adding an HTML widget to your school dashboard in FrogLearn and adding CSS to this widget will give you control over the look of FrogLearn without having to build a new theme.

To learn how you can use CSS to style up your content take a look through the links below...

Default colour

Default font size

Create a banner style

CSS class for images

Control visibility of tables

Please note:

• You will need the HTML widget activated on your FrogLearn - this is different to the Basic Code Activity widget and the Code Preview widget.  Please contact the Service Desk on 01422 395939 to get the HTML widget.
• Frog's service desk cannot help you with HTML code.  Please use Frog's community forums to discuss any questions.

Default colour of hyperlinks in the text widget
 

<style>
.widget_text a {
    color:#FF0000;
}

</style>

Default font size in the text widget
 

<style>
.widget_text {
    font-size:16pt;
}
</style>

Creating a banner style using the text widget
 

<style>
.widget_text h6 {
    background:#0000FF !important;
    font-size:25pt !important;
    padding:20px !important;
    border-radius:10px !important;
    color:#FFFFFF !important;
    width:95% !important;
}
</style>

Creating a CSS class for images
​​​​​​​

Control visibility of tables on mobile screens
 

<style>
.css_mobile {
   display:none;
}
@media screen and (max-width: 700px) {
    .css_mobile {
        display:table;
    }
    .css_desktop {
        display:none;
    }
}
</style>

Note:

• Colorzilla was used to create the gradients on the finished menus in the tutorial: http://www.colorzilla.com/gradient-editor/
   
• In the original tutorial, we used the class "mobile", unfortunately this class is reused elsewhere in the codebase, so we've updated the code to something unique