Jump to content
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
Link to comment
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.



  • Similar Content

    • By Graham Quince
      Hi everyone,
      Here's a bit of CSS you can add to an HTML widget to hide the first three columns in the Data Viewer widget should you want to:
      <style> /* Hide first three columns in Data Viewer */ div[data-content-uuid="WIDGET_UUID"] .dataviewer-list th:nth-child(2), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list th:nth-child(3), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list th:nth-child(4), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list td:nth-child(2), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list td:nth-child(3), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list td:nth-child(4){ display: none !important; } </style>  
    • By Sean_M
      Hello
      Wondering if anyone could help with an issue which popped up for some of our users (just students by the looks of it), seemly out of nowhere with no known changes to permissions, policy settings, etc.
      Student users are having the error, screenshot attached, "You do not have the required access to open menu.docs.network_drive.user_drive.default.".  When navigating to a page with the Network Files widget to their Home folder. Or in FrogDrive > Home Drive.
      I've checked the policy permissions for FrogDrive and Network Files apps/widgets, file paths in Users is correct, permissions of the folder on the file server. Nothing out of place as far as I can see.
      What setting am I missing to check? 
       
      Many thanks
      Sean

    • By Marcus Goluch
      Hi,
       
      I am going to ask a few questions regarding widget development:
      what DB software do you use (mogo, mysql, plaintext)? what npm module is used to manage this database? with out using any thing like frog forms, frog data viewer, csv files, frog documents of any kind. Could I please get access to give my widgets an actual database table? Can we get the ability to read console print outs from the server side code execution of widgets? Can we please get some form of API access for the server side part of EJS templates, mainly for use with databases.  
      Essentially as somebody who has limited experience developing web apps, I find that the current widget system of having to hack in things from locally hosted files, or using the client to connect to a Document based database hosted on 365 is too janky. Client side access for rendering inside an EJS template is exactly what I want but I don't have the tools available to do the really cool stuff I want to do.
       
      In a nut shell you can't watch Doctor Who on BBC one if you have a Television, but no TV channels. EJS is our television but right now we have no decent channels to watch.
       
      I know, I make a post about this every year but, Frog Code seriously needs to start being worked on again, right now we can not even delete our demo widget projects. I think Frog Code needs a road map and a clear plan, or it needs to be removed if you have no plans on finishing this feature.
       
      Sorry to sound like a brat, but I feel this is a seriously huge missed opportunity.
       
      Thank you
    • 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.)
       
      Updates
      This latest version 2.2 includes a "copy to clipboard" button, which allows you to copy the whole table and paste it into a spreadsheet program like Excel.
      The second new feature includes the ability to alter the Datastore's reference.  So if you wish to reset the log, instead of deleting the widget and adding it again, you can now change the reference and the information will remain stored.
       
    • 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/frogcode/frogcode-showcase/navigation
×
×
  • Create New...