Jump to content

HTML Code Help


Sue Busher

Recommended Posts

Hi @Sue Busher

It's really simple, just right-click on a website link widget and choose Inspect Element.  In the console which pops up, copy the highlighted section.

<div class="draggable sites_widget" data-uuid="BE192E2E2001B55EF23EDF7D7D59D40A84F4E6BCA96247B6" data-content-uuid="7BC5A604200282C95A9E8F687BAD52013AFD50BC439176B0"><div class="widget-close" style="display: none;"></div><div data-name="Widget.Sitelink" class="widget-content link-widget widget_sitelink"><div class="content-wrapper">
    <div class="column link-info">
        <h2 class="os-ellipsis" title="How we tackle bullying in our schools">How we tackle bullying in our schools</h2>
        <p class="os-ellipsis" title="Kate Wragg, Head of ICT for Education and Leadership Trust talks about their anti-bullying strategy">Kate Wragg, Head of ICT for Education and Leadership Trust talks about their anti-bullying strategy</p>
        
    </div>
</div>

<div class="column widget-icon-wrapper">
    <div class="widget-icon os-background-default" style="background-image: url(&quot;file/resource/986C0DE9200309A504BD9F0B7CEBBB01911FFC4C1164E285&quot;);"><img class="site-icon" alt="icon" src="file/resource/986C0DE9200309A504BD9F0B7CEBBB01911FFC4C1164E285"></div>
</div>
</div></div>

You then just need to change bits and strip out what you don't need and add an <a href=""> over the whole thing.

<a href="">
<div class="draggable sites_widget"><div class="widget-close" style="display: none;"></div><div data-name="Widget.Sitelink" class="widget-content link-widget widget_sitelink"><div class="content-wrapper">
    <div class="column link-info">
        <h2 class="os-ellipsis" title="Your title">Your title</h2>
        <p class="os-ellipsis" title="Your details">Your details</p>
        
    </div>
</div>

<div class="column widget-icon-wrapper">
    <div class="widget-icon os-background-default" style="background-image: url('image web address');"><img class="site-icon" alt="icon" src="image web address"></div>
</div>
</div></div>
</a>

Extra tip:

If you use the Text widget to make a link, come out of the editor then Inspect and copy that link, it will provide you with the <a href > you need for your link.  I'm guessing you're wanting to make page links.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Got you.   OK, so this is something we might be able to do soon using FrogCode, but in the meantime, you can try:

  • Create a link to a page using the text widget
  • Click off the text widget (you don't need to leave editing mode)
  • Right-click on the link and choose Inspect Element
  • Copy the code highlighted in the Developer console.
  • Use the HTML widget wrapped with the <A href wrapped around the code at the top.   

You shouldn't get any refreshing or page reloading.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...