Tutorial

Back to Tutorials

CSS Styling

A guide to using CSS inside FrogLearn

Share this page...

Control the look of FrogLearn


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>
.mobile {
   display:none;
}
@media screen and (max-width: 700px) {
    .mobile {
        display:table;
    }
    .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/


Tutorials in this series...

Quicklinks