Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter ironEd

    (@ironed)

    Ok, I’ve discovered a fix for the “offset-the-header” issue. Add this to the CSS:

    html
    {
      scroll-padding-top: 5vh; /* height of sticky header */
    }
    Thread Starter ironEd

    (@ironed)

    Screen shot is at the below link and I think within the last 30 min I solved 85% of the issue. I still have one problem.

    https://iron10.ca/Morning_and_Evening_MBA_-_Rotman_Registrar’s_Office.jpg

    What I think the issue is, is that the H2 tags — which I want to base the Table of Contents on — already have ID tags that someone before me hand-coded. Those ID attributes are inconsistently formatted. Your plugin is too polite and won’t replace those IDs (a tag can only ever have 1 ID).

    So I wrote some JS to force the IDs to be consistent. I’ll put that at the end of this message in case someone else can make use of it. (showed above this one b/c WordPress’s system flagged this msg ?? )

    The problem I still have is that when the anchor links are clicked and the page scrolls to the H2, the H2 isn’t offset from the floating header. It is ignoring the offset settings in your plugin. If you can give me a clue about how to resolve this, I would appreciate it.

    Thread Starter ironEd

    (@ironed)

    Here’s that JS to force consistency on the Ids:

    //  force the Ids of the H2 tags to be consistently formatted so the sidebar menu works consistently
        jQuery(function() {
            const elHeadTwo= document.getElementsByTagName('h2');
               // Iterate through the retrieved elements and add the necessary ID names.
                 for(var i = 0; i < elHeadTwo.length; i++)
                 {
                     var idText = elHeadTwo[i].innerHTML;
                     let resultOne = idText.replace(/ /gi, "-");
                     let resultTwo = resultOne.toLowerCase();
                    //  sometimes an extra hyphen shows up at the end of the string. Cut it out.
                     let lastChar = resultTwo.at(-1);
                     if (lastChar==="-") {
                        const resultThree = resultTwo.replace(/.$/,"");
                        elHeadTwo[i].setAttribute("id", resultThree);
                    } else {
                        elHeadTwo[i].setAttribute("id", resultTwo);
                    }
                 }
         }, false);
    Thread Starter ironEd

    (@ironed)

    Screen shot is at the below link and I think within the last 30 min I solved 85% of the issue. I still have one problem.

    https://iron10.ca/Morning_and_Evening_MBA_-_Rotman_Registrar’s_Office.jpg

    What I think the issue is, is that the H2 tags — which I want to base the Table of Contents on — already have ID tags that someone before me hand-coded. Those ID attributes are inconsistently formatted. Your plugin is too polite and won’t replace those IDs (a tag can only ever have 1 ID).

    So I wrote some JS to force the IDs to be consistent. I’ll put that at the end of this message in case someone else can make use of it.

    The problem I still have is that when the anchor links are clicked and the page scrolls to the H2, the H2 isn’t offset from the floating header. It is ignoring the offset settings in your plugin. If you can give me a clue about how to resolve this, I would appreciate it.

    • This reply was modified 2 years, 1 month ago by ironEd.
    • This reply was modified 2 years, 1 month ago by ironEd.
    • This reply was modified 2 years, 1 month ago by ironEd.
    • This reply was modified 2 years, 1 month ago by ironEd.
    • This reply was modified 2 years, 1 month ago by ironEd.

    I don’t have an answer for the “change the base font” issue other than use a child CSS. This works for me BUT not in the admin interface — which is an issue as I need to hand off my sites to people less technically literate than I and it throws them to see fonts the public site doesn’t use. As others noted, using a theme.json in my child folder has no effect.

    HOWEVER, a few people mentioned that their child.css files are being ignored. Make sure your child theme folder has been created properly… it’s changed with FSE.

    I used a WP supplied plugin called ‘Create Block Theme’ and then modified the result. Works like a charm (except for the theme.json).

    Using entires doesn’t work. The entities display in the web page when the html is called from the data base.

Viewing 6 replies - 1 through 6 (of 6 total)