Skip to content

Custom html in nodebb to prevent cache

Unsolved Configure
18 2 5.1k 1
  • wrote on last edited by Panda
    #1

    I wish to stop browser cash to force nodebb to rerun custom css everytime page is refreshed
    (as it picks different random image as background)
    Theres place for custom css / js
    But where to put this html

    Cache-Control: no-cache
    

    I tried it in a few places but it didnt work

    On further googling do I need all these lines?

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    

    I tried that in Custom Header, didnt work either

  • wrote on last edited by
    #2

    Strange update with incognito browser it doesnt cache, and shows different background every time.
    But oddly the forum text is different color and looks blurred with icognito

  • I wish to stop browser cash to force nodebb to rerun custom css everytime page is refreshed
    (as it picks different random image as background)
    Theres place for custom css / js
    But where to put this html

    Cache-Control: no-cache
    

    I tried it in a few places but it didnt work

    On further googling do I need all these lines?

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    

    I tried that in Custom Header, didnt work either

    wrote on last edited by
    #3

    @Panda said in Custom html in nodebb to prevent cache:

    On further googling do I need all these lines?

    Yes, they are all necessary.

  • Strange update with incognito browser it doesnt cache, and shows different background every time.
    But oddly the forum text is different color and looks blurred with icognito

    wrote on last edited by
    #4

    @Panda said in Custom html in nodebb to prevent cache:

    Strange update with incognito browser it doesnt cache, and shows different background every time.
    But oddly the forum text is different color and looks blurred with icognito

    Incognito is exactly that. It doesn’t cache anything, which is what it’s supposed to do. Are you using a desktop or chrome for this? Also, is your webserver nginx ?

  • @Panda said in Custom html in nodebb to prevent cache:

    Strange update with incognito browser it doesnt cache, and shows different background every time.
    But oddly the forum text is different color and looks blurred with icognito

    Incognito is exactly that. It doesn’t cache anything, which is what it’s supposed to do. Are you using a desktop or chrome for this? Also, is your webserver nginx ?

    wrote on last edited by Panda
    #5

    @phenomlab so nodebb hosted so Im not using any nginx etc
    Can you tell me if aignite.nodebb.com looks very different for you on mobile chrome, in incognito browser?
    In my incognito, some text barely readable!

    Also still caching on normal mobile browser despite all those lines in custom header

  • @phenomlab so nodebb hosted so Im not using any nginx etc
    Can you tell me if aignite.nodebb.com looks very different for you on mobile chrome, in incognito browser?
    In my incognito, some text barely readable!

    Also still caching on normal mobile browser despite all those lines in custom header

    wrote on last edited by
    #6

    @Panda if it’s hosted NodeBB then I’m 99% sure that they will be using nginx. Nginx itself will cache static assets - css being one of them, so what you are experiencing is normal behavior, and the cache-control headers you have defined with have virtually zero effect when they are already set by nginx itself.

    On a desktop, you can force the browser to clear that cache for that specific site by pressing f12 to open the developers console, then left click and hold on the reload button in the browser

    After and one second you’ll see three options. You want the third, which is “Clear cache and reload”

    I know you use your phone to do most things, but I can tell you now that it’s almost impossible to develop in this way and it needs to be done via a PC or laptop.

  • @phenomlab so nodebb hosted so Im not using any nginx etc
    Can you tell me if aignite.nodebb.com looks very different for you on mobile chrome, in incognito browser?
    In my incognito, some text barely readable!

    Also still caching on normal mobile browser despite all those lines in custom header

    wrote on last edited by
    #7

    @Panda said in Custom html in nodebb to prevent cache:

    Can you tell me if aignite.nodebb.com looks very different for you on mobile chrome, in incognito browser?

    What I can tell you is that the white overlay with the lime green text doesn’t work. It’s virtually illegible and not pleasing to the eye at all.

  • @Panda said in Custom html in nodebb to prevent cache:

    Can you tell me if aignite.nodebb.com looks very different for you on mobile chrome, in incognito browser?

    What I can tell you is that the white overlay with the lime green text doesn’t work. It’s virtually illegible and not pleasing to the eye at all.

    wrote on last edited by Panda
    #8

    @phenomlab yes, but the point about browser cache on mobile, I want the users to get a different background pic each time.

    So I know I an manually clear cache, but the users shouldnt need to know about that.

  • @phenomlab yes, but the point about browser cache on mobile, I want the users to get a different background pic each time.

    So I know I an manually clear cache, but the users shouldnt need to know about that.

    wrote on last edited by phenomlab
    #9

    @Panda how are you issuing the image? If you use JS to do this, you won’t need to worry about browser cache. It’s a little unclear as to what you currently have in place.

  • @Panda how are you issuing the image? If you use JS to do this, you won’t need to worry about browser cache. It’s a little unclear as to what you currently have in place.

    wrote on last edited by
    #10

    @phenomlab
    Just css with a random image url
    You have login, take a look?

  • @phenomlab
    Just css with a random image url
    You have login, take a look?

    wrote on last edited by
    #11

    @Panda I’m not in front of a PC presently, but can look tomorrow.

  • @Panda I’m not in front of a PC presently, but can look tomorrow.

    wrote on last edited by
    #12

    @phenomlab the forum looking so different on incognito and standard browser is so weird.
    (This is on Android device)
    Its like the Neon theme is much more Neon on the incognito, and the text is hard to read!

  • @phenomlab the forum looking so different on incognito and standard browser is so weird.
    (This is on Android device)
    Its like the Neon theme is much more Neon on the incognito, and the text is hard to read!

    wrote on last edited by
    #13

    @Panda said in Custom html in nodebb to prevent cache:

    Its like the Neon theme is much more Neon on the incognito, and the text is hard to read!

    Incognito mode will always reflect the current state of affairs as it will not cache anything. If it looks bad in this session, this is how others will see it also.

  • wrote on last edited by
    #14

    @Panda What I see on checking the site is this

    image.png

    It looks psychedelic and the colours do not work at all.

  • @Panda What I see on checking the site is this

    image.png

    It looks psychedelic and the colours do not work at all.

    wrote on last edited by Panda
    #15

    @phenomlab yes, but skins / themes arent supposed to cache.
    So my main issue here is why was it looking different?
    I’ve changed skin now, but still want to get round this caching, as still have problem on normal broswer that I dont get new background image every time browser bar refreshed

  • @phenomlab yes, but skins / themes arent supposed to cache.
    So my main issue here is why was it looking different?
    I’ve changed skin now, but still want to get round this caching, as still have problem on normal broswer that I dont get new background image every time browser bar refreshed

    wrote on last edited by
    #16

    @Panda said in Custom html in nodebb to prevent cache:

    yes, but skins / themes arent supposed to cache.

    They will cache by default - by NGINX, and not anything you choose to put in the headers. The code you specified there would apply to the entire site, which defeats the purpose of using a cache to speed up delivery of assets that the browser already has. Even without the case in Incognito mode, the experience is awful because most of the text is unreadable.

    The point you made about fonts looking blurry is because of the presence of text-shadow as a CSS element. This technique is used to made text stand out by using a drop shadow of another colour. This now clashes with the changes you have made and makes the text look blurry.

  • wrote on last edited by
    #17

    So if I cant prevent cache, how do I achieve different background each time?

  • So if I cant prevent cache, how do I achieve different background each time?

    wrote on last edited by
    #18

    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this

    d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png

    The colour choice is still really hard on the eye, but at least you can now read the text


Related Topics
  • 4 Votes
    3 Posts
    2k Views
    crazycells
    thanks @DownPW ! this is definitely very helpful.
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    20k Views
    phenomlab
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • Fixed background to nodebb forum

    Solved Configure nodebb
    25
    4 Votes
    25 Posts
    10k Views
    phenomlab
    @Panda said in Fixed background to nodebb forum: Chatgpt told me the ::before method. Go figure
  • build nodebb Warning in entrypoint size limit

    Solved Performance nodebb
    2
    0 Votes
    2 Posts
    1k Views
    phenomlab
    @eeeee they are nothing to worry about, and can be ignored.
  • Gettin Erors NodeBB

    Solved Configure nodebb eror
    7
    0 Votes
    7 Posts
    2k Views
    cagatay
    @phenomlab no forum is working goods. there is no eror message since yestarday.
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    JAC
    @phenomlab many thanks Mark .