Scribd Logo
Upload

Welcome to Scribd!

  • Breadcrumbs - Instr's

    Uploaded by

    hawaiifunsun
    6 views3 pages
    How to make breadcrumbs on weebly - by brittany bunk

    Copyright

    © Public Domain

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    How to make breadcrumbs on weebly - by brittany bunk

    Copyright:

    Public Domain
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views3 pages

    Breadcrumbs - Instr's

    Uploaded by

    hawaiifunsun
    How to make breadcrumbs on weebly - by brittany bunk

    Copyright:

    Public Domain
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    6/27/22, 9:40 AM Link based breadcrumb - Weebly Community

    Weebly Community

    Give Feedback

    Vote on Features

    Re: Link based breadcrumb

    Comment
    rightarrowsmall rightarrowsmall rightarrowsmall

    hawaiisunfun
    ‎04-25-2022
    10:29 AM
    - edited
    ‎04-25-2022
    01:43 PM

    - edited
    The beauty of weebly is that they leave it up to web developers to build a website - which builds coding skills! I mean
    everyone said it's easy if weebly was able to do it here. That's great - let's use them to build our own.
     
    Note: everyone's theme will be different - so the files will be in different locations than mine. My theme is old, so I don't even
    know the name of it. I'll just say what I did.
     
    I looked at this website's source by just adding view-source: in front of the url. There I found something called lia-breadcrumb
    node. I googled that and found https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html in which they have
    the whole HTML and CSS code for breadcrumbs after clicking the button saying 'open in code pen' and seeing
    https://codepen.io/pen, which could be easily copy/pasted into weebly: 
     
    In the file 'main_style.css', I pasted above search box: 

    /* Breadcrumbs

    --------------------------------------------------------------------------------*/

    nav.breadcrumb {

    padding: 0.8em 1em;

    border: 1px solid hsl(0deg 0% 90%);

    border-radius: 4px;

    background: hsl(300deg 14% 97%);

    nav.breadcrumb ol {

    margin: 0;

    padding-left: 0;

    list-style: none;

    nav.breadcrumb li {

    display: inline;

    nav.breadcrumb li + li::before {

    display: inline-block;

    margin: 0 0.25em;

    transform: rotate(15deg);

    border-right: 0.1em solid currentColor;

    height: 0.8em;

    content: "";

    nav.breadcrumb [aria-current="page"] {

    color: #000;

    font-weight: 700;

    text-decoration: none;

     
    Copy/paste this as an embed code widget on every page and fill in manually (unfortunately):

    https://community.weebly.com/t5/ideas/ideaprintpage/blog-id/IdeaExchange/article-id/35650/comment-id/36343 1/3
    6/27/22, 9:40 AM Link based breadcrumb - Weebly Community

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body class=' breadcrumb-page wsite-theme-light'>

    <div id="header-wrap">

    <div id="header-top">

    <table id="header">

    <tr>

    <td id="logo">{logo}</td>

    <td id="header-right">

    <table>

    <tr>

    <td class="phone-number">{phone:text}</td>

    <td class="social">{social}</td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    <div id="navigation">

    {menu}

    <div class="search">{search}</div>

    <div class="clear"></div>

    </div>

    </div>

    </div>

    <div id="main-wrap">

    <div id="main">

    <nav aria-label="Breadcrumb" class="breadcrumb">

    <ol>

    <li>

    <a href="../../"></a>

    </li>

    <li>

    <a href="../../#aria_ex"></a>

    </li>

    <li>

    <a href="../../#breadcrumb"></a>

    </li>

    <li>

    <a href="./index.html" aria-current="page"></a>

    </li>

    </ol>

    </nav>

    <div id="banner">

    <div class="wsite-header"></div>

    <em id="tl"></em>

    <em id="tr"></em>

    <em id="bl"></em>

    <em id="br"></em>

    </div>

    <div id="content">

    {content}

    <div class="clear"></div>

    </div>

    </div>

    </div>

    <div id="footer-wrap">

    <div id="footer">

    {footer}

    <div class="clear"></div>

    </div>

    </div>

    </body>

    </html>

    https://community.weebly.com/t5/ideas/ideaprintpage/blog-id/IdeaExchange/article-id/35650/comment-id/36343 2/3
    6/27/22, 9:40 AM Link based breadcrumb - Weebly Community

    https://community.weebly.com/t5/ideas/ideaprintpage/blog-id/IdeaExchange/article-id/35650/comment-id/36343 3/3

    You might also like