Sue Busher Posted November 15, 2016 Share Posted November 15, 2016 Can someone help provide me with the HTML code for the Website Link widget? I want to use it but to add my own icon, wording and link, so the styles remain consistent. Help with what I need to change where would be appreciated too. Thanks in advance Link to comment Share on other sites More sharing options...
Graham Quince Posted November 15, 2016 Share Posted November 15, 2016 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("file/resource/986C0DE9200309A504BD9F0B7CEBBB01911FFC4C1164E285");"><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. 1 Link to comment Share on other sites More sharing options...
Sue Busher Posted November 15, 2016 Author Share Posted November 15, 2016 Exactly what I need, thanks so much Graham, much appreciated, 1 Link to comment Share on other sites More sharing options...
clangstaff Posted November 15, 2016 Share Posted November 15, 2016 Hadn't even thought of doing this if I'm honest - glad someone else did! 1 Link to comment Share on other sites More sharing options...
clangstaff Posted December 12, 2016 Share Posted December 12, 2016 @Graham Quince is it possible to use this method to link to a specific page within a site without refreshing the whole browser? So I want to link from the first page of my site to another page. Link to comment Share on other sites More sharing options...
Graham Quince Posted December 12, 2016 Share Posted December 12, 2016 Hi @clangstaff Wouldn't the page link option in the text widget do what you're after? Link to comment Share on other sites More sharing options...
clangstaff Posted December 12, 2016 Share Posted December 12, 2016 1 hour ago, Graham Quince said: Hi @clangstaff Wouldn't the page link option in the text widget do what you're after? The text widget would but if feasible I'd prefer to use the format of the external link widget for consistency across the platform. If not I'll be using the text widget. Link to comment Share on other sites More sharing options...
Graham Quince Posted December 12, 2016 Share Posted December 12, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now