Jump to content
Sue Busher

HTML Code Help

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

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

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.



×
×
  • Create New...