Skip to content

Link vs Refresh

Solved Customisation
  • I have the pages plugin and the featured topics extended plugin installed. I have the layout of my blog page the way I want with custom css and html. I have a custom page that says blog. The link to the blog is /blog preceded by the domain.

    When I click on the link it brings me to the blog page but the layout is all wrong and looks horrible. If I press the refresh button the layout then appears the way that it should. I do notice that when I first click on the blog link that the layout does start to look the way it should but then in less than a second it gets all messed up and doesn’t look right.

    This is the way it should look. I am not done designing this, but this is in general how it will look.
    e8978f9c-90d4-4db2-b7fe-afc2e5a56550-image.png

    This is how it looks when I click the blog link that you see.
    60580f26-3035-4f13-8692-97cb81eceb84-image.png

    Then when I refresh, it will go back to looking like that first pic. I am not sure what is happening and why it is doing that. Any help is greatly appreciated! Thank you!!

  • @Madchatthew I took an extended look at this, and the issue is being caused by the code you have for the custom template below

    <div class="grid">
      <!-- BEGIN topics -->
      <div id="gridItem" class="grid__item">
        <div class="card">
          <img class="card__img" src="{topics.imageurl}">  
          <div class="card__content">
            <h1 class="card__header"><a href="{config.relative_path}/topic/{topics.slug}">{topics.title}</a></h1>
            <p>{topics.date.full}</p>
            <p class="card__text">{topics.post.content}</p>
            <a href="{config.relative_path}/topic/{topics.slug}"><button class="card__btn">Read More<span>&rarr;</span></button></a>
          </div>
        </div>
      </div>
      <!-- END topics --> 
    </div>
    

    No matter what I try, it looks like the CSS you have is being overridden by either the plugin, or the core itself. Based on this, I took the decision to rewrite the code. Here’s what is in use now on your site

    <div class="row blog-wrapper">
    <br>
    <!-- BEGIN topics -->
    <div class="col-xs-2 col-sm-2 post-holder" tid="{topics.tid}">
        <div class="blog-container">
      <a href="{config.relative_path}/topic/{topics.slug}" class="post-box" style="min-height: 340px;">
          <div class="parent">
        <figure class="blog-image child" style="background: {topics.user.icon:bgColor}
          <!-- IF topics.imageurl -->
            url({topics.imageurl})
          <!-- END topics.imageurl -->
          ;">     
        </figure>
        </div>
        <div class="blog">
            <span class="category">{topics.title}</span>
        </div>
      </a>
    </div>
    </div>
    <!-- END topics -->
    </div>
    
     <!-- IF paginator -->
      <div class="section sectionMain">
        <div class="PageNav">
          <nav>
            <!-- IF prevpage -->
            <a href="{config.relative_path}{featuredRoute}{prevpage}" class="btn btn-default paginate"></a>
            <!-- ENDIF prevpage -->
    
            <!-- BEGIN pages -->
            <a href="{config.relative_path}{featuredRoute}{pages.number}" class="btn <!-- IF pages.currentPage -->btn-primary active<!-- ELSE -->btn-default<!-- ENDIF pages.currentPage -->">{pages.number}</a>
            <!-- END pages -->
    
            <!-- IF nextpage -->
            <a href="{config.relative_path}{featuredRoute}{nextpage}" class="btn btn-default paginate"></a>
            <!-- ENDIF nextpage -->
          </nav>
        </div>
      </div>
      <!-- ENDIF paginator -->
    </div>
    

    Plus, I added some custom CSS on your site

    /* Phenomlab Custom CSS */
    figure.blog-image {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-size: cover !important;
        height: 150px;
    }
    .blog {
        background: #ffffff;
        border-radius: 0 0 4px 4px;
        border-top: 0;
        color: #333;
        font-size: 2.0em;
        padding: 20px 25px;
        line-height: 1.5em;
        min-height: 108px;
        transition: all .2s ease-in-out;
        margin: 1px;
    }
    .post-holder {
        margin-bottom: 20px;
    }
    .row.blog-wrapper {
        padding: 50px;
    }
    span.category {
        color: #3384C7;
    }
    .blog-content-wrapper {
      max-width: 400px;
      margin: 50px auto;
    }
    @media (max-width: 767px) {
    .post-holder {
        width: 100%;
    }
    }
    

    The end result is this when accessing the site directly, or clicking the “Blog” link

    9f402ecd-764e-4987-81ba-21600cec4f45-image.png

    As you can see, this works without issue. Of course, you’ll need to tweak the template I created (and probably the CSS) to get the desired look and feel you want. Note, that an <a> tag is present in the entire body of each post, so no matter where you click, it’ll open the associated article - there’s no need for a “Read More” or “Explore” function.

    The code is also 100% mobile friendly, and will stack accordingly at 767px in terms of viewport breakpoint.

  • @Madchatthew can you provide a link where I can see this ? From what you’ve explained, this sounds JS related in the sense that the callback is missing and is only present on load.

  • @phenomlab I don’t. It is setup on my laptop on a virtual machine running a Ubuntu server with virtualmin setup installed. I can see if I can make it a live link when I get home and leave it running for you to check out.

  • @Madchatthew ok, thanks. Let me know.

  • @phenomlab I have it set up so you can see the site.

    24.230.54.176

    This also happens on the Edge browser as well. When I went to the page with my phone it works as it should with all the cards in a single column and spaced as it should be.

    Not sure when it is in full screen mode why it doesn’t. When you click on refresh it will display as it should.

    Thanks again for the help!

  • @Madchatthew thanks. I’ll take a look at this. How long will the instance be up for ? I don’t think I’ll get to this until tomorrow my time now.

  • @phenomlab I will leave it up and running so when you get time to check it out. Again, I really appreciate it.

  • I noticed that when I right click on Blog and choose Open in new tab that the page displays the way I want it too. It is just when I click on Blog and have it open in the same page. I am not sure how to fix this?

  • @Madchatthew I tried looking at this earlier, but didn’t get very far as I need access to the admin settings. Do you get the same if you browse to /user/admin/blog ? (I’m assuming you are logged in as admin)

  • @phenomlab I get the following error when I go to that address. Also I sent you a DM with username and password so you can login and take a look.

    Internal Error.
    Oops! Looks like something went wrong!
    
    /user/admin/blog
    
    Cannot read property 'username' of null
    
  • @Madchatthew thanks. I’ll check on this tomorrow.

  • @phenomlab Sounds good! Thank you!!

  • @Madchatthew From what I can see, you have some custom JS that looks like the below

    const gridItem = document.getElementById("gridItem");
    gridItem.removeAtribute('style');
    

    I’m not entirely sure what this is for, but it will only fire on page load - not on AJAX calls which is used when clicking links. To fix this issue, you can wrap the JS so that it will also work on AJAX calls as follows

    $(window).on('action:ajaxify.end', function(data) {
        const gridItem = document.getElementById("gridItem");
        gridItem.removeAtribute('style');
    });
    

    This will then allow the same code to execute when the links are clicked. However, this then generates the below error in the console

    b846ea60-c361-4350-84f2-bc16fa97de9f-image.png

    This relates to gridItem.removeAttribute not being a valid function, so the JS fails and will not process further. This shortened version will work though

    $(window).on('action:ajaxify.end', function(data) {
        document.getElementById("gridItem").removeAttribute("style");
    });
    

    As I mentioned, I do not see any reason for this specific code to execute, as it appears to be removing a style from an element. Is this actively being used for anything ? This doesn’t seem to be causing the strange layout - I suspect this comes from the URL entered in config.json in the NodeBB root.

    The blog page should also show when you navigate to https://siteurl.com/user/username/blog but it fails to render with the below in the console

    GET http://x.x.x.x/assets/src/client/account/fte-blog.js?v=ph7njujnhro net::ERR_ABORTED 404 (Not Found)
    

    Again, I think this is because of the url value in config.json. Is there any way I can get access to the Ubuntu server this instance is running on ?

  • @phenomlab I added the js to remove a style that was making the layout not work the way I wanted. So I thought well I will just remove the style so that my css will work. When I did that then my layout would work. But maybe that is the cause of my issue?

    I will see if I can set it up so you can access the server remotely. I will figure out how to make the IP public so you can remote in or at least so you can access the virtualmin/webmin pages.

  • @phenomlab I sent you a DM with the info in it. Thanks again!

  • @Madchatthew I took an extended look at this, and the issue is being caused by the code you have for the custom template below

    <div class="grid">
      <!-- BEGIN topics -->
      <div id="gridItem" class="grid__item">
        <div class="card">
          <img class="card__img" src="{topics.imageurl}">  
          <div class="card__content">
            <h1 class="card__header"><a href="{config.relative_path}/topic/{topics.slug}">{topics.title}</a></h1>
            <p>{topics.date.full}</p>
            <p class="card__text">{topics.post.content}</p>
            <a href="{config.relative_path}/topic/{topics.slug}"><button class="card__btn">Read More<span>&rarr;</span></button></a>
          </div>
        </div>
      </div>
      <!-- END topics --> 
    </div>
    

    No matter what I try, it looks like the CSS you have is being overridden by either the plugin, or the core itself. Based on this, I took the decision to rewrite the code. Here’s what is in use now on your site

    <div class="row blog-wrapper">
    <br>
    <!-- BEGIN topics -->
    <div class="col-xs-2 col-sm-2 post-holder" tid="{topics.tid}">
        <div class="blog-container">
      <a href="{config.relative_path}/topic/{topics.slug}" class="post-box" style="min-height: 340px;">
          <div class="parent">
        <figure class="blog-image child" style="background: {topics.user.icon:bgColor}
          <!-- IF topics.imageurl -->
            url({topics.imageurl})
          <!-- END topics.imageurl -->
          ;">     
        </figure>
        </div>
        <div class="blog">
            <span class="category">{topics.title}</span>
        </div>
      </a>
    </div>
    </div>
    <!-- END topics -->
    </div>
    
     <!-- IF paginator -->
      <div class="section sectionMain">
        <div class="PageNav">
          <nav>
            <!-- IF prevpage -->
            <a href="{config.relative_path}{featuredRoute}{prevpage}" class="btn btn-default paginate"></a>
            <!-- ENDIF prevpage -->
    
            <!-- BEGIN pages -->
            <a href="{config.relative_path}{featuredRoute}{pages.number}" class="btn <!-- IF pages.currentPage -->btn-primary active<!-- ELSE -->btn-default<!-- ENDIF pages.currentPage -->">{pages.number}</a>
            <!-- END pages -->
    
            <!-- IF nextpage -->
            <a href="{config.relative_path}{featuredRoute}{nextpage}" class="btn btn-default paginate"></a>
            <!-- ENDIF nextpage -->
          </nav>
        </div>
      </div>
      <!-- ENDIF paginator -->
    </div>
    

    Plus, I added some custom CSS on your site

    /* Phenomlab Custom CSS */
    figure.blog-image {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-size: cover !important;
        height: 150px;
    }
    .blog {
        background: #ffffff;
        border-radius: 0 0 4px 4px;
        border-top: 0;
        color: #333;
        font-size: 2.0em;
        padding: 20px 25px;
        line-height: 1.5em;
        min-height: 108px;
        transition: all .2s ease-in-out;
        margin: 1px;
    }
    .post-holder {
        margin-bottom: 20px;
    }
    .row.blog-wrapper {
        padding: 50px;
    }
    span.category {
        color: #3384C7;
    }
    .blog-content-wrapper {
      max-width: 400px;
      margin: 50px auto;
    }
    @media (max-width: 767px) {
    .post-holder {
        width: 100%;
    }
    }
    

    The end result is this when accessing the site directly, or clicking the “Blog” link

    9f402ecd-764e-4987-81ba-21600cec4f45-image.png

    As you can see, this works without issue. Of course, you’ll need to tweak the template I created (and probably the CSS) to get the desired look and feel you want. Note, that an <a> tag is present in the entire body of each post, so no matter where you click, it’ll open the associated article - there’s no need for a “Read More” or “Explore” function.

    The code is also 100% mobile friendly, and will stack accordingly at 767px in terms of viewport breakpoint.

  • @phenomlab Wow, that is awesome! I can see I have a long way to go before I become a web dev. It seems to me like I should have been able to figure this out. Thanks again for your help. I really appreciate it!!

  • @Madchatthew No problem at all. More than happy to help with stuff like this 🙂

  • phenomlabundefined phenomlab has marked this topic as solved on
  • @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation💗

  • 2 Votes
    8 Posts
    239 Views

    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.

  • Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    283 Views

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • Smart Widgets

    Solved Configure
    9
    3 Votes
    9 Posts
    299 Views

    @Panda said in Smart Widgets:

    So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object?

    It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train 🙂

  • NodeBB upgrade now cant post

    Solved Bugs
    5
    2 Votes
    5 Posts
    177 Views

    @Panda yes, for some reason, that is the case. If you need an urgent response, it’s probably better to post here because of the time difference.

  • 4 Votes
    8 Posts
    321 Views

    @Panda said in Upgrade to NodeBB v3? 2BB or not 2BB, that is the question!:

    So although thats a plugin it has Widget like element and stopped working on the Theme change

    Which is normal based on the widgets being reset when you change themes.

  • hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    588 Views

    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function

    document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); })

    The CSS for start is below

    .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; }

    And this is the corresponding keyframe

    @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }

    It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.

  • 0 Votes
    4 Posts
    518 Views

    @cagatay You’d target the body tag and use the below line of CSS

    background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed;

    Obviously, you need to change the path to suit where your image is being stored.

    More info around the background property can be found here

    https://www.w3schools.com/cssref/css3_pr_background.php

  • 0 Votes
    1 Posts
    168 Views
    No one has replied