Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Support
    • Support
    • Common Questions
  • General
    • The Frog Academy
    • Teaching and Learning
    • General chat
    • Showcase
    • Webinars
  • Technical Forums (How do I...?)
    • Learn
    • Play
    • Progress
    • Frog3
    • Coding

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


School

Found 4 results

  1. Every time I add in a text widget,, I have to resize the text, as it starts too small, is there a way of setting the size be default?
  2. Hi everyone, Here's part 2 in our Simple CSS tutorial series showing how you can use simple code to make a big change to FrogLearn: https://www.frogcommunity.com/css/font-size
  3. 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: Add your widget to page. Save and close the editor. Right-click on the widget and choose Inspect Element In the Elements section of the developer tools, move up the tree until in the page window, the entirety of the widget is highlighted In the Element area, copy the highlighted code Paste this code into your favourite code editor Isolate the bit called data-content-uuid="" Back to the browser, you can close the Developer tools. Re-edit the page and drag in the HTML widget 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>
  4. When I posted the snippet to allow you to restyle of My Notes, I hadn't thought that it wasn't as straight forward to change the title of Phrase of the Day. This bit of CSS is the easiest way I've found of changing all Phrases of the Day, although if you combine it with the the technique(?) mentioned in the restyling My Notes, you can restyle individual widgets in the same way. <style> .widget_phrase-wrap .header { height:50px; overflow:hidden; } .widget_phrase-wrap .header h2::before { content: 'My own title \a'; white-space: pre; } </style>
×
×
  • Create New...