Jump to content
Sign in to follow this  
Graham Quince

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

Recommended Posts

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>

 

image_329.png

  • Like 2

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  

  • Similar Content

    • By Graham Quince
      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>  
    • By Graham Quince
      Here's a new FrogCode widget:
      https://www.frogeducation.com/community/frogcode/frogcode-showcase/visitor-log
      We worked with George Bligh from Greenshaw on this widget.  When someone views a page with this widget on, it records their visit.  Anyone with Edit and Manage rights gets a button which displays a list of all visitors, their profile, their children (if a parent), how many times they have visited the site and the time and date of their last visit.

      (This widget uses the datastore - a little known about feature of Frog's API.)
    • By Graham Quince
      The brilliant @Simon Law has built a new widget which adds a site's menu to a page, to save us all from having to do this manually using text widgets.
      You can download this from the showcase page:
      https://www.frogeducation.com/community/tutorials/frogcode/frogcode-showcase
    • By ann
      Hi
      Is there any way I can get a nested page to be centred on a page?
      I have created a number of pages with three equal columns - each one has an text widget containing an icon image linked to various places. Each of these 3 column pages are then nested onto one page.
      It looks fine on a PC as all three columns show across the page  but on a phone it justifies to the left.upsetting the design. 
       
      Thanks
      Ann

×
×
  • Create New...